简洁的JS代码--几点建议-积累ing

1. 常量

（1）变量标识具有特定的含义的值

$elem.on('keydown', function(e) {
if (e.keyCode == 27) {
//...
}
});

27到底代表什么？代表ESC键。你可以在后边加上注释。不过，在这里我建议你使用一个常量名来代替，比如：

KEY_ESC = 27

。这样更加直观易懂！

（2）变量本地化

变量本地化，节省操作次数！！jQuery一定要做变量本地化，（一般框架强大，必定效率不高）。

例：

for(var i=0,len=$("p").length;i<len;i++){...}

2.标识符(identifiers)

我们经常需要获取某个元素(评论、博客、用户、等等)的标识符，然后做一些计算。比如:

var id = $(this).attr('id').substring(8);

阅读这段代码的开发者需要去推测为什么用8。

我们再举一个例子(来自一个实际的项目)：

var last_id = $('#answer_pid' + id + ' li:first div').attr('id').substr(7);

html的布局稍有变动，都将导致这部分代码出错。

我们再看一个：

<div class="comment" id="comment_123"></div>
var id = $(this).attr('id').substring("comment_".length);

这段代码好一点，至少没有使用看不懂的数字，但JavaScript代码还是和html有太多的绑定。

我们可以使用data-*语法：

<div class="comment" data-id="123"></div>

然后，用更加简洁的语法来获取属性值：

var id = $(this).attr('data-id');
//或者
var id = $(this).data('id');

3. $.post写法

写法好过$.post方法。错误处理比较繁琐。下面写法简单易懂：

$.ajax({
type: "POST",
url: url,
data: data,
dataType: "json",
success: function(data) {
//...
},
error: function() {
//...错误处理机制
}
});

4. 多元素事件

有时候，我们需要给页面元素绑定对应的事件(删除消息的按钮)。经常，我们会这样实现：

$('.comment a.delete').click(function(){
//...
});

问题在于，如果我们要把同一个事件绑定到一个新的元素(比如一个新载入的评论)。我浏览过很多解法，其中一个典型的解法是重新定义所有元素上的事件：

$('.comment a.dele').unbind('click').click(function(){
//
});

在jQuery 1.7中有on事件，可以把事件绑定到某个行为，并且可以通过选择器(selector)过滤元素：(利用事件冒泡机制，可查看我的博客： jQuery.on() 函数深入解析)

$('body').on('click', 'a.external', function(e) {
// 该函数只会绑定到那些有external类的元素上
});

值得一提的是，上面的代码对于动态生成的对象也有效。应当大力提倡，不过也要小心！如下代码会导致效率的降低，拖慢浏览器的速度：

$('body').on('mousemove', selector, function() {
//...
});

参考链接：

https://blog.fundebug.com/2017/07/12/tips_for_writing_cleaner_code/