jQuery的编写原则

jQuery的编写原则：

1、不要过分使用jQuery

1. jQuery速度再快，也没法与原生的javascript方法相比，并且创建的jQuery对象包含的信息量很庞大。因此有原生方法可使用的场合，尽可能避免使用jQuery。

$("a").click(function(){
    alert($(this).attr("id"));
});
//改良后↓
$("a").click(function(){
    alert(this.id);
});

2. 许多jQuery方法都有两个版本，一个是供jQuery对象使用的版本，另外一个是供jQuery函数使用的版本。因为后者不经过jQuery对象操做，因此相对开销较小，速度比较快。

var $text = $("#text");
var $ts = $text.text();
//改良后↓
var $text = $("#text");
var $ts = $.text($text);

这里是用了“$.text()”的内置函数，其余相似的还有“$.data()”等。

2、缓存jQuery对象

查找DOM元素实际上有不小的内存开销，使用选择器的次数应该越少越好，而且尽量缓存选中的结果，便于之后反复使用。记住，永远不要让相同的选择器出现屡次。

例如：

$("#top").find("p.classA");
$("#top").find("p.classB");
改良后↓
var cached = $("#top");
cached.find("p.classA");
cached.find("p.classB");

3、少改动DOM结构

若是要屡次改动DOM结构，就先把要改动的部分先取出来，改动完成后再放回去。这里的基本思想是在内存中创建你确实想要的东西，最后作一次最有效的更新DOM操做。

例如：

var top_100_list = [...], // 这里是100个字符串的数组  
$mylist = $("#mylist"); 
for (var i=0, l=top_100_list.length; i<l; i++){
    $mylist.append("<li>" + top_100_list[i] + "</li>"); // 100次DOM操做
}
改良后↓
var top_100_list = [...],
$mylist = $("#mylist"),
top_100_li = ""; // 这个变量用来存储变化的字符串
for (var i=0, l=top_100_list.length; i<l; i++){
    top_100_li += "<li>" + top_100_list[i] + "</li>";
} 
$mylist.html(top_100_li);// DOM操做只有这么一次

4、命名规范

jQuery代码中难免夹杂有JS代码，如何让jQuery代码看起来严谨有序，规范本身的命名规则能更好的提升代码的阅读性。

1. 函数名：function getResultByUserId(){..}，遵循骆驼命名法，首字母小写，单词首字母大写，尽可能短并且明确表达方法的用意。

还能够这样定义：

$.flushCartItemList = function() {
    isAjaxDate = true;
}

2. 参数名：function method(recordIdx, recordVal){..}, 同函数名，参数尽可能用缩写。
命名就是要有意义，一些属性的缩写也颇有讲究，例如：索引：idx；值：val；长度：len；名称：nm；等...

3. 变量名：var user_id; var user_list_tab; var user_list_tr_1;，通常如下划线为单词分割，按照“命名_元素_索引”的规则。

jQuery对象的变量名要加上“$”的前缀以区分javascript对象。

jQuery编写技巧：

1、选择器择优

选择器是jQuery的基础，如何选择效率最高的选择器，先要了解各类选择器的性能差别。

①ID选择器和标签元素选择器：$("#ID"); $("Tag");

jQuery内部会自动调用浏览器的原生方法（getElementById();，getElementByTagName();），因此执行速度快。

②类选择器：$(".Class");

jQuery会遍历全部DOM节点查找class=Class的DOM对象，因此执行速度较慢。

③伪类选择器和属性选择器：$(":Type"); $("[Attribute='Value']");

由于浏览器没有针对它们的原生方法，这两种选择器执行速度是最慢的。不过，不排除一些第三方浏览器增长了querySelector()和querySelectorAll()方法，所以会使这类选择器的性能有大幅提升。

2、链式写法

$("div").find("h3").eq(2).html("Hello");

采用链式写法时，jQuery会自动缓存每一步的结果，比非链式写法（手动缓存）要快。

3、高效循环

　　循环老是一种比较耗时的操做，javascript原生循环方法for和while，要比jQuery的“.each()”快。而且关于for循环，如下这种写法效率最高。

for (var i = 0, len = array.length; i < len; i++) {
  // alert(i);
}

先声明变量，再进行循环操做，效率远比遍历数组“for (var i in arr)”高得多，也比循环取得数组长度“for (var i = 0; i < arr.length; i++)”的效率高！

4、字符串拼接

　字符串的拼接在开发中会常常遇到，用“+=”的方式来拼接字符串的效率很是的低，咱们能够利用数组的“.join()”方法。

var array = [];
for(var i = 0; i < 10000; i++){    array[i] = "<input type='button' value='a'>";}
document.getElementById("one").innerHTML = array.join("");

直接用arr[i]或者arr[arr.length]的方式要快一点，可是差异不是很大。

5、页面加载

　尽管$(function(){}); 确实颇有用， 它是在全部DOM元素加载完成。若是你发现你的页面一直是载入中的状态，颇有可能就是这个函数引发的。你能够经过将jQuery函数绑定到$(window).load 事件的方法来减小页面载入时的cpu使用率。

$(window).load(function(){
    // 页面彻底载入(包括全部的DOM元素和JS代码)后才初始化的jQuery函数. 
});

一些特效的功能，例如拖放，视觉特效和动画，预载入隐藏图像等等，都是适合这种技术的场合。