9种方法优化jQuery代码详解

2020-06-16 06:49:20易采站长站整理

也可以使用针对jQuery函数的版本:


  var $text = $("#text");

  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);
  }

更多关于jQuery代码优化的方法请点击下面的相关链接