JavaScript技巧

尽量使用原生JavaScript

命名规范

性能优化

选择器

// Not Recommended
var $products = $("div.products");

// Recommended
var $products = $(".products");

DOM操作

// Not recommended
for (var i = 0; i < 100; i++) {
document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}

// Recommended
var myList = "";
var myListHTML = document.getElementById("myList");

for (var i = 0; i < 100; i++) {
 myList += "<span>" + i + "</span>";
}

myListHTML.innerHTML = myList;

缓存数组长度

var arr = new Array(1000),
len, i;

// Not recommended
for (i = 0; i < arr.length; i++) {
    //..
}

// Recommended
for (i = 0, len = arr.length; i < len; i++) {
    //..
}

高效循环

// Not Recommended
var $products = $("div.products");

// Recommended
var $products = $(".products");

注释

函数/方法注释

/**
* 函数描述
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明，
* 比较长就换行
* @param {number=} p3 参数3的说明（可选）
* @return {Object} 返回值描述
*/
function foo(p1, p2, p3) {
var p3 = p3 || 10;
return {
    p1: p1,
    p2: p2,
    p3: p3
    };
}

函数/方法注释

/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@gmail.com (Firstname Lastname)
* Copyright 2009 Google Inc. All Rights Reserved.
*/

移动端touch事件

*****
Written by Shen Ting on 2016 Feb 17