jQuery 执行效率

当我们驯服了 jQuery 后，我们就会想着要驾驭她，政府 她，完全的控制她，以便于用更愉快的方式书写代码。

so，让 jQuery 唱 政府 吧！

作为专业人士，严谨的编程方式是必需的，她是提高编程体验的基础！

匈牙利类型标记法：b, i, f, s, a, o, $, fn, v, re

告诉你一个秘密：JavaScript没有块级作用域。（什么麻辣鸡块？）

正则不要打死：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

RegExp(pat, attr)
　　pat: 正则字符串
　　　　[a-Z], [^0-9], |, ?, +, *...这些可以懂
　　　　a{N}: N个a
　　　　a{N1, N2}: N1个a, 或者N2个a
　　　　a{M, }: 至少M个a
　　　　^a: a开头
　　　　$a: a结尾
　　　　?=a, ?!a: 可以不冻。。
楼下大写都是非，你懂的：
　　　　\w: 单词
　　　　\d: 数字
　　　　\s: 空白字符
　　　　\b: 单词开头或者结尾
　　attr:
　　　　global(g): 全局匹配
　　　　ignoreCase(i): 区分大小写

小面 向对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function Ninja(sName, bGender) {
  this.sName= sName;
  this.bGender= bGender;

  if (typeof Ninja._initialized == "undefined") {
    Ninja.prototype.fnNinjutsu= function(chakra) {
　　　if(chakra > 10){
　　　　alert("wow...");
　　　}
    };

    Ninja._initialized = true;
  }
}

var sasuke = new Ninja("sasuke", true);
sasuke.fnNinjutsu(101);

当我们掌握了这些规范，下面就进入本文的中心思想

改善 jQuery 的执行效率

  1. 选择 css 类，利用 id 或者 tag name 来加快筛选
    • $(“#nav .treeview”), $(“div.o3d”)
  2. 对 jQuery 对象进行多次操作，缓存变量或者链式添加
    • var $div = $(“div.content”)
  3. DOM 操作较慢，先缓存创建字符串(可考虑join)，最后一次性添加 DOM 操作
    • options += “orz”
  4. 慎用jQuery.live()，其实用起很方便的
  5. 给多个元素添加相同 callback 时，可以利用冒泡特性，在父节点上监听

高级应用

  1. 队列控制，一次执行函数：定义 Array<function> 时在每个 function 内添加 callback，结束时取消 callback。

    1
2
3
4
5
6
7

    var fnEffect_list = [
	function() {...; $("div").dequeue();},
	function() {...; $("div").dequeue();},
	function() {...;},
];
$("div").queue(fnEffect_list);
$("div").dequeue();

  2. 数组操作，转换数组中所有值或部分值，return null表示删除：

    1
2
3
4
5
6
7

    $.map([0, 1, 2], function(outer){
        var exist_item_list = $.grep([3, 2, 7], function(inner){
        return outer == inner;
    });
    if（exist_item_list.length == 0) return null;
    else return outer;
});//[2]

  3. 逐级查找DOM节点：

    1
2
3
4
5

    <div class="end sasuke" value="找到了">
    <div class="midway sasuke" value="继续找">
        <div class="begin sasuke" value="开始找"></div>
    </div>
</div>

    • closest：从当前元素开始匹配查找，返回第一个jQuery对象

      1

          $(".begin:first").closest(".sasuke").attr("value");//开始找

    • parents：从父元素开始匹配查找，返回所有匹配的jQuery对象集合

      1

          $(".begin:first").parents(".sasuke").attr("value");//["开始找", "继续找", "找到了"]

注意： $(“div”).val()与$(“div”).attr(“value”)是有区别滴！
4. 设置全局ajax默认选项：

1
2
3
4
5
6
7
8
9

$.ajaxSetup({
    async: false,
    cache: false,
    timeout: 1000,
    type: "POST",
    //url
    dataType: "json"
    //data
});
  1. 代理this对象：将$(“div”)替换为{name:“sconfield”}，貌似可以用with代替一哈哈
    1
2
3

    $("div").click($.proxy(function(){
	alert(this.name);//sconfield
}, {name:"sconfield"}));

是不是不明觉厉啊！