jQuery代码优化方法总结

2020-05-24 21:41:02易采站长站整理

var $ts = $.text($text);

由于后一种针对jQuery函数的版本不通过jQuery对象操作,所以相对开销较小,速度比较快

选择作用域链最短的方法

严格地说,这一条原则对所有Javascript编程都适用,而不仅仅针对jQuery

我们知道,Javascript的变量采用链式作用域。读取变量的时候,先在当前作用域寻找该变量,如果找不到,就前往上一层的作用域寻找该变量。这样的设计,使得读取局部变量比读取全局变量快得多

请看下面两段代码,第一段代码是读取全局变量:


var a = 0;
  function x(){
    a += 1;
  }

第二段代码是读取局部变量:


function y(){
    var a = 0;
    a += 1;
  }

第二段代码读取变量a的时候,不用前往上一层作用域,所以要比第一段代码快五六倍

同理,在调用对象方法的时候,closure模式要比prototype模式更快

prototype模式:


var X = function(name){ this.name = name; }
X.prototype.get_name = function() { return this.name; };

closure模式:


var Y = function(name) {
    var y = { name: name };
    return { 'get_name': function() { return y.name; } };
  };

同样是get_name()方法,closure模式更快

使用Pub/Sub模式管理事件

当发生某个事件后,如果要连续执行多个操作,最好不要写成下面这样:


function doSomthing{
    doSomethingElse();
    doOneMoreThing();
  }

而要改用事件触发的形式:


function doSomething{
    $.trigger("DO_SOMETHING_DONE");
  }
  $(document).on("DO_SOMETHING_DONE", function(){
    doSomethingElse();
});

还可以考虑使用deferred对象


function doSomething(){
    var dfd = new $.Deferred();
    //Do something async, then...
    //dfd.resolve();
    return dfd.promise();
  }
  function doSomethingElse(){
    $.when(doSomething()).then(//The next thing);
  }