背景介紹

jQuery可以說是流行最廣，使用量最多的一個(gè)js庫了。它極大的提高了人們工作的效率，解決了困擾人們很久的dom不一致性所帶來的各種問題。jQuery最大的貢獻(xiàn)就是在dom操作這方面，當(dāng)然它還提供其他方面的操作。下面我們來通過一個(gè)小的例子簡單介紹一下jQuery的實(shí)現(xiàn)原理。

內(nèi)部結(jié)構(gòu)

jQuery內(nèi)部其實(shí)是一個(gè)偽數(shù)組對象，對象上還綁定一些自帶的屬性，比如說context,selector等。最重要的是jQuery的原型，接下來我們講。

構(gòu)造函數(shù)

把jQuery寫成構(gòu)造函數(shù)，把所有的共用屬性寫在JQuery.prototype上，方便每個(gè)示例的調(diào)用，也節(jié)省了大量的內(nèi)存空間。如果是非構(gòu)造函數(shù)形式調(diào)用，那么就new一個(gè)實(shí)例并返回。

  window.jQuery = function(nodes){
    //判斷是否使用 new 關(guān)鍵字
    if(this instanceof jQuery){
      this.init(nodes);
    }else {
      return new jQuery(nodes);
    }
  };

獲取節(jié)點(diǎn)

jQuery基于原生的Dom屬性與方法封裝了自己的選擇器方法。通過選擇器方法，可以把原生節(jié)點(diǎn)，選擇器字符串轉(zhuǎn)換為jQuery內(nèi)部節(jié)點(diǎn)。然后對節(jié)點(diǎn)進(jìn)行操作。由于選擇器方法比較復(fù)雜，我們就用現(xiàn)有的document.querSelectorAll()來代替，實(shí)現(xiàn)的效果相同。在構(gòu)造函數(shù)初始化的時(shí)候就去執(zhí)行這個(gè)方法。

  //初始化函數(shù)，把nodes節(jié)點(diǎn)傳給this
  jQuery.prototype.init = function(nodes){
    var _this = this;
    _this.length = 0;
    if(typeof nodes === 'string'){
      nodes = document.querySelectorAll(nodes);
    }
    for(var i=0;i<nodes.length;i++){
      _this[_this.length] = nodes[i];
      _this.length++;
    }
  };

addClass方法

jQuery有一個(gè)addClass方法，我們這里模擬一下。不過只是一個(gè)簡易版，了解一下原理即可。首先遍歷所有實(shí)例中的節(jié)點(diǎn)對象，然后每個(gè)執(zhí)行dom原生提供的classList.add()。

  //添加class
  jQuery.prototype.addClass = function(className){
    var _this = this;
    for(var i = 0;i < _this.length;i++){
      _this[i].classList.add(className)
    }
  };

setText方法

setText方法和addClass方法原理類似，都要遍歷實(shí)例中的節(jié)點(diǎn)對象，然后每個(gè)執(zhí)行一遍dom提供的textContent的方法。

  //添加文字
  jQuery.prototype.setText = function(text){
    var _this = this;
    for(var i = 0;i < _this.length;i++){
      _this[i].textContent = text;
    }
  };

window.$

為了使用戶用的方便，最好能像jQuery一樣，直接使用$就可以，只需要設(shè)置window.$ = jQuery即可。剛剛已經(jīng)講過內(nèi)部已經(jīng)判斷過是否是通過new 來構(gòu)造實(shí)例的，如果不是，內(nèi)部return new jQuery。

調(diào)用測試

通過以下代碼調(diào)用，基本都實(shí)現(xiàn)功能。如果想要實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用，直接在每個(gè)方法結(jié)尾return this即可。

    $('div').addClass('red');
    $('div').setText('h1');

總結(jié)

jQuery內(nèi)部提供了大量的api,如果有興趣，可以自己多實(shí)現(xiàn)一些方法。本文只是簡單介紹一下實(shí)現(xiàn)原理與結(jié)構(gòu)。本文內(nèi)容僅供學(xué)習(xí)與交流使用，轉(zhuǎn)載請注明出處。