jQuery結(jié)構(gòu)簡析

xiaokai 發(fā)布于2019-08-23 11:53 / 1869人閱讀

摘要：構(gòu)成類數(shù)組對象，引入，并使其自增版本信息模擬數(shù)組，即這里構(gòu)成一個類數(shù)組對象由于這里把作為構(gòu)造函數(shù)調(diào)用，得到一個對象，所以我們把作為的原型。

本文簡單實(shí)現(xiàn)jQuery框架，深入理解javascript對象。
本文的對照版本是jQuery-1.2.6.js

本文注重jquery結(jié)構(gòu)設(shè)計思路，并不側(cè)重具體功能的實(shí)現(xiàn)以及兼容性和安全性的部分。

首先建立基本框架如下：

(function(window){
  "use strict";
  var jQuery = window.jQuery = window.$ = function(selector){
    //定義$函數(shù)，并把$和jQuery暴露到外面
  };

  jQuery.fn = jQuery.prototype = {
    //jQuery原型
  };

  jQuery.extend = jQuery.fn.extend = function(){
    //添加擴(kuò)展方法，jQuery.extend添加靜態(tài)方法，也可以實(shí)現(xiàn)繼承，jQuery.fn.extend添加動態(tài)方法
  }
})(window);

進(jìn)一步，實(shí)現(xiàn)jQuery的初始化

//上述框架中的部分代碼
//由于$("#selector")得到的是一個jQuery對象，嘗試直接返回jQuery對象
var jQuery = window.jQuery = window.$ = function(selector){
  return new jQuery();   //這里會導(dǎo)致一個死循環(huán)，所以不能這樣直接構(gòu)建jQuery對象
};

修正上述代碼中的死循環(huán)，我們可以試圖返回this，但是this明顯是window，不是我們需要的jQuery，利用原型中的this返回構(gòu)造函數(shù)實(shí)例化對象的特點(diǎn)(不理解的可以參看javascript中this詳解)，我們作以下修改:

//上述框架中的部分代碼
//由于$("#selector")得到的是一個jQuery對象，嘗試直接返回jQuery對象
var jQuery = window.jQuery = window.$ = function(){
    return jQuery.fn.init();   //執(zhí)行初始化
};
jQuery.fn = jQuery.prototype = {
  init: function(){
    return this;
  },
  jQuery: "1.0.0",   //jQuery版本信息
  length: 0,    //模擬數(shù)組，即這里構(gòu)成一個類數(shù)組對象
  size: function(){
    return this.length;
  }
}

到此$()可以返回一個jQuery對象了。但是在舊瀏覽器中有一個bug。如果用戶如下這樣使用代碼，那么什么都得不到：

var ele = $.fn.init();

這里直接調(diào)用了init(), 這樣會得到init創(chuàng)造的對象，由于$是個函數(shù)，$.fn是函數(shù)的原型，函數(shù)原型是個空函數(shù)，所以這里得到了一個以空函數(shù)為構(gòu)造函數(shù)創(chuàng)造的對象。為了解決這問題，采用new的方式:

//上述框架中的部分代碼
var jQuery = window.jQuery = window.$ = function(selector){
    return new jQuery.fn.init(selector);   //執(zhí)行初始化
};
jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  init: function(selector){
    var elements = document.querySelectorAll(selector);   //順便簡單的實(shí)現(xiàn)了選擇器
    //注意querySelectorAll在老的瀏覽器中是不支持的，這里專注在jQuery的結(jié)構(gòu)上。
    Array.prototype.push.apply(this, elements);   //構(gòu)成類數(shù)組對象，引入length，并使其自增
    return this;
  },
  jQuery: "1.0.0",   //jQuery版本信息
  length: 0,    //模擬數(shù)組，即這里構(gòu)成一個類數(shù)組對象
  size: function(){
    return this.length;
  }
}
jQuery.fn.init.prototype = jQuery.fn;

由于這里把jQuery.fn.init()作為構(gòu)造函數(shù)調(diào)用，得到一個jQuery對象，所以我們把jQuery.fn作為jQuery.fn.init()的原型。

下一步實(shí)現(xiàn)extend方法

//上述框架中的部分代碼
jQuery.extend = jQuery.fn.extend = function(obj, srcObj){
    var target, len = arguments.length;
    if(len === 1){   //傳入一個參數(shù)時實(shí)現(xiàn)繼承
      deep(obj, this);
      return this;
    } else {
      for(var i = 1; i < len; i++){
        target = arguments[i];
        deep(target, obj);
      }
      return obj;
    }

    function deep(oldOne, newOne){   //實(shí)現(xiàn)深拷貝
      for(var prop in oldOne){
        if(typeof oldOne[prop] === "object" && oldOne[prop] !== null){
            newOne[prop] = oldOne[prop].constructor === Array ? [] : {};
            deep(oldOne[prop], newOne[prop]);
        }
        else{
            newOne[prop] = oldOne[prop];
        }
      }
    }
  };

寫了extend，我們定義幾個簡單的方法（2靜態(tài)方法，3個動態(tài)方法）可以用來測試。

//添加靜態(tài)方法
jQuery.extend({
  trim: function(text){
    return (text || "").replace(/^s+|s+$/g, "");
  },
  makeArray: function(obj){
    return Array.prototype.slice.call(obj);
  }
});

//添加動態(tài)方法
jQuery.fn.extend({
  //get方法
  get: function(num){
    return num == null ?
    jQuery.makeArray(this):
    num < 0 ? this[ num + this.length ] : this[ num ];   //索引小于零表示倒數(shù)
  },

  //each 遍歷執(zhí)行函數(shù)
  each: function(fun){
    for(var i = 0, len = this.length; i < len; ++i){
      if(fun(i, this[i]) === false)
        break;
    }
    return this;  //用于鏈?zhǔn)秸{(diào)用
  },

  //修改css屬性
  css: function(key, value){
    var len = arguments.length;
    if(len === 1){     //傳入1個參數(shù)返回對應(yīng)值
      return this[0].style[key];
    } else if(len === 2){    //傳入2個參數(shù)設(shè)置對應(yīng)值
      this.each(function(index, ele){
        ele.style[key] = value;
      });
    }
    return this;  //用于鏈?zhǔn)秸{(diào)用
  }
});

到這里，jQuery的基本結(jié)構(gòu)就形成了，還有一個問題需要解決，就是處理變量沖突。
當(dāng)環(huán)境中以及有jQuery和$時可以選擇釋放$或時釋放jQuery和$

(function(window){
  "use strict";
  //在框架一開始先保留外部可能存在的$或jQuery變量，以便在后來恢復(fù)
  var _$ = window.$;
  var _jQuery = window.jQuery;

  var jQuery = window.jQuery = window.$ = function(selector){};
  jQuery.fn = jQuery.prototype = {};
  jQuery.extend = jQuery.fn.extend = function(){};
})(window);

然后寫noConflict函數(shù)

jQuery.extend({
  noConflict: function(deep){  //傳入true時同時釋放$和jQuery，否則只是釋放$
    window.$ = _$;
    if(deep) window.jQuery = _jQuery;
    return jQuery;
  }
});

到此為止，jQuery的框架已經(jīng)形成。下面是完整代碼部分:

(function(window){
  "use strict";
  var _$ = window.$;
  var _jQuery = window.jQuery;

  //定義全局接口
  var jQuery = window.jQuery = window.$ = function(selector){
    return new jQuery.fn.init(selector);
  };

  var HTMLRegex = /^(?:s*(<[wW]+>)[^>]*|#([w-]+))$/;  //用于匹配html標(biāo)簽

  var rootjQuery;   //默認(rèn)根節(jié)點(diǎn)的jQuery對象

  //原型
  jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    // init: function(selector){
    //   var elements = document.getElementsByTagName(selector);
    //   Array.prototype.push.apply(this, elements);
    //   return this;
    // },
    init: function(selector){
      if(!selector){
        return this;
      }
      var elements = document.getElementsByTagName(selector);
      Array.prototype.push.apply(this, elements);
      return this;
    },
    jQuery: "1.0.0",
    length: 0,
    size: function(){
      return this.length;
    }
  };
  jQuery.fn.init.prototype = jQuery.fn;

  //繼承
  jQuery.extend = jQuery.fn.extend = function(obj){
    var target, len = arguments.length;
    if(len === 1){   //傳入一個參數(shù)時實(shí)現(xiàn)繼承
      deep(obj, this);
      return this;
    } else {
      for(var i = 1; i < len; i++){
        target = arguments[i];
        deep(target, obj);
      }
      return obj;
    }

    function deep(oldOne, newOne){
      for(var prop in oldOne){
        if(typeof oldOne[prop] === "object" && oldOne[prop] !== null){
            newOne[prop] = oldOne[prop].constructor === Array ? [] : {};
            deep(oldOne[prop], newOne[prop]);
        }
        else{
            newOne[prop] = oldOne[prop];
        }
      }
    }
  };

  //靜態(tài)函數(shù)
  jQuery.extend({
    trim: function(text){
      return (text || "").replace(/^s+|s+$/g, "");
    },
    noConflict: function(deep){
      window.$ = _$;
      if(deep) window.jQuery = _jQuery;
      return jQuery;
    },
    makeArray: function(obj){
      return Array.prototype.slice.call(obj);
    }
  });

  //對象方法
  jQuery.fn.extend({
    get: function(num){
      return num == null ?
      jQuery.makeArray(this):
      num < 0 ? this[ num + this.length ] : this[ num ];   //索引小于零表示倒數(shù)第n個
    },
    each: function(fun){
      for(var i = 0, len = this.length; i < len; ++i){
        if(fun(i, this[i]) === false)
          break;
      }
      return this;  //用于鏈?zhǔn)秸{(diào)用
    },
    css: function(key, value){
      var len = arguments.length;
      if(len === 1){
        return this[0].style[key];
      } else if(len === 2){
        this.each(function(index, ele){
          ele.style[key] = value;
        });
      }
      return this;  //用于鏈?zhǔn)秸{(diào)用
    }
  });
}(window));

上述代碼源碼：Download

GPU云服務(wù)器云服務(wù)器簡析跳表簡析統(tǒng)計年度數(shù)據(jù)簡析年度統(tǒng)計數(shù)據(jù)簡析

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97616.html

發(fā)表評論

登陸后可評論

0條評論

xiaokai

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2523·2023-04-25 19:24
關(guān)于Matlab小波工具箱打開.mat文件為一條遞增斜線問題的解決辦法

閱讀 1740·2021-11-11 16:54
hostEONS：雙11促銷，美國VPS年付$21起，新購給雙倍流量、雙倍硬盤，1Gbps帶寬自帶1

閱讀 2861·2021-11-08 13:19
ZJI：雙十一自營服務(wù)器55折起,香港葵灣E5服務(wù)器522元/月起

閱讀 3581·2021-10-25 09:45
CloudCone：KVM月付1.99美元起,洛杉磯機(jī)房,支持PayPal/支付寶

閱讀 2589·2021-09-13 10:24
阿里云金秋上云季活動：超強(qiáng)算力企業(yè)級云服務(wù)器首次特供僅4折起!

閱讀 3316·2021-09-07 10:15
阿帕云引擎(原zkeys系統(tǒng))出售：idc管理系統(tǒng)源碼,云服務(wù)器管理系統(tǒng)

閱讀 4110·2021-09-07 10:14
Dom 事件詳解

閱讀 2984·2019-08-30 15:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

jQuery結(jié)構(gòu)簡析

相關(guān)文章

JS或Jquery

Webpack模塊化原理簡析

發(fā)表評論

0條評論

xiaokai

男|高級講師

TA的文章

tensorflow

關(guān)于Matlab小波工具箱打開.mat文件為一條遞增斜線問題的解決辦法

hostEONS：雙11促銷，美國VPS年付$21起，新購給雙倍流量、雙倍硬盤，1Gbps帶寬自帶1

ZJI：雙十一自營服務(wù)器55折起,香港葵灣E5服務(wù)器522元/月起

CloudCone：KVM月付1.99美元起,洛杉磯機(jī)房,支持PayPal/支付寶

阿里云金秋上云季活動：超強(qiáng)算力企業(yè)級云服務(wù)器首次特供僅4折起!

阿帕云引擎(原zkeys系統(tǒng))出售：idc管理系統(tǒng)源碼,云服務(wù)器管理系統(tǒng)

Dom 事件詳解

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

jQuery結(jié)構(gòu)簡析

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！