原型

silencezwm 發(fā)布于2019-04-23 13:28 / 3216人閱讀

摘要：每個第一次使用的開發(fā)者都感到驚嘆的太神奇了究竟是怎么做到的使用控制贊嘆前人之余探究其本源才是前端開發(fā)者應(yīng)該做的事社區(qū)常常說不要重復造輪子可是啊連輪子都造不出來又怎么去了解在什么環(huán)境下用什么輪子怎么樣才可以造成更加優(yōu)秀的輪子不同階段對前端有不

每個第一次使用jq的開發(fā)者都感到驚嘆,jq的$太神奇了,究竟是怎么做到的使用$控制dom

贊嘆前人之余,探究其本源才是前端開發(fā)者應(yīng)該做的事,社區(qū)常常說,不要重復造輪子,

可是啊,連輪子都造不出來,又怎么去了解在什么環(huán)境下用什么輪子,怎么樣才可以造成更加優(yōu)秀的輪子,

不同階段對前端有不同的理解,作為一名程序員,本就是沒有盡頭,靜下心來,和別人比一比,多借鑒前人的發(fā)展,取其精

華去其糟粕,不要閉門造車,做一名不斷學習的前端開發(fā)者

? 回頭看來jq已經(jīng)逐漸在不斷的學習中揭開了他神秘的面紗,讓我想看看美麗的$是怎么出生的

jQuery只有一個全局變量$ 那一定是掛載在window上面的

(function (window){
    var jQuery = function (selects) {
       
    }
    window.$ = jQuery;
 }
)(window)

可愛的$就指向JQuery的實例了當我們$("#id")就相當于 jQuery("#id")

那么現(xiàn)在就要處理獲取到的dom元素


(function (window) {
  function jQuery(selects) {
    return new jQuery.fn.init(selects)
  }
  jQuery.fn = {}  //創(chuàng)建掛載函數(shù)
  jQuery.fn.init = function (selects) {
    var dom = [].slice.call(document.querySelectorAll(selects))
    var i = 0;
    var len = dom ? dom.length : 0
    for (i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    this.length = len
    this.selects = selects || " ";
  }
  window.$ = jQuery; //注意這里jQuery指向window
})(window)

現(xiàn)在我們就已經(jīng)將$()里面的dom捕捉到了,請轉(zhuǎn)化成為數(shù)組,利于后面的操作

下一步就是在原型鏈上面創(chuàng)建jquery的方法了

(function (window){
  var jQuery = function (selector){
    return new jQuery.fn.init(selector)    //這里必須構(gòu)造函數(shù)要不放怎么去獲取節(jié)點信息
  }
  jQuery.fn = {
    val(){
      return this[0].innerHTML
    }
      //.......等等方法
  }
  var int = jQuery.fn.init = function (selector) {
    var dom = [].slice.call(document.querySelectorAll(selector)) 
    var i,len = dom?dom.length:0
    for (i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    console.log(len,selector);

    this.length = len;
    this.selector = selector || " "
  }

  int.prototype = jQuery.fn

  window.$ = jQuery;
})(window)

我們實現(xiàn)了類似jq的val()方法了

試驗一下