规范 JS 写法的几点建议

1、定义常量

例子：

$(element).on('keydown', function(e) {
  if (e.keyCode == 13) {
    //code...
  }
});

那么13代表什么呢，查看对照表会知道13代表 回车按键 ，当然你也可以加上注释，如果 KEY_ENTER = 13 定义为常量，理解起来就好多了。

var KEY_ENTER = 13;
$(element).on('keydown', function(e) {
  if (e.keyCode == KEY_ENTER) {
    console.log('这是回车按键');
  }
});

2、使用data标识符储存数据

例子：

<div class="goods" id="goods_111">花卷</div>
<script>
//获取id
$(".goods").click(function(){
    var id = $(this).prop('id').substring(6);
    console.log(id);
});
</script>

使用data-*语法

<div class="goods" data-id="111">花卷</div>
<script>
//获取id
$(".goods").click(function(){
    var id = $(this).attr('data-id');
    //或者
    var id = $(this).data('id');
    console.log(id);
});
</script>

这样改动元素结构，也不会影响后续使用，理解起来也容易，减少了javascript与html绑定

3、使用$.ajax 代替 $.get和$.post

$.ajax({
  type: "POST",
  url: url,
  data: data,
  dataType: "json",
  success: function(data) {
    //...
  },
  error: function() {
    //...
  }
});

参数：

• type
  - 类型：String
  - 默认值: “GET”)。请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

• url

  • 类型：String
  • 默认值: 当前页地址。发送请求的地址。

• data

  • 类型：String
  • 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。

• dataType

  • 类型：String
  • 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
  • “xml”: 返回 XML 文档，可用 jQuery 处理。
  • “html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  • “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  • “json”: 返回 JSON 数据 。
  • “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  • “text”: 返回纯文本字符串

• success

  • 类型：Function
  • 请求成功后的回调函数。
  • 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
  • 这是一个 Ajax 事件。

• error

  • 类型：Function
  • 默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
  • 有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
  • 如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。
  • 这是一个 Ajax 事件。

4、使用on进行事件绑定

在jQuery 1.7中有on事件，可以把事件绑定到某个行为，并且可以通过选择器(selector)过滤元素：

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

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

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

5、带命名空间的事件

带命名空间的事件(namespaced events)在jQuery 1.2就被加入了，但是很少被使用。
例子：

$('a').on('click', function() {
  // Action 1
}); 
$('a').on('click', function() {
  // Action 2
});

如果我们想要移除第二个Action, 使用$(‘a’).off(‘click’)确会把两个Action都移除掉！

但是如果使用带命名空间的事件，就可以搞定：

$('a').on('click.namespace1', function() {
  //Action 1
}); 
$('a').on('click.namespace2', function() {
  //Action 2
});

使用如下代码移除：

$('a').off('click.namespace2');