jQuery源碼探索之路（1）--一個開始

sutaking 發布于2019-08-20 14:43 / 2277人閱讀

摘要：在外面可以使用我們可以寫一些靜態的方法，這樣無需構造一個對象也可以使用，比如最后我們通過來將接口暴露出來，這樣在全局就可以使用來構造對象或是使用屬性方法。附既然看完了，麻煩各位客官老爺點個贊，給個唄，源碼地址

自己最近在學習一些js的插件的寫法，那么當然就繞不開jquery，于是自己就學習中遇到的一些問題做些總結和記錄

自己也是在學習過程中，有問題請各位指出，希望大伙能多多支持，給給star，點點贊唄，github地址

jquery大概是怎樣的

幾乎所有的js插件都一樣，首先肯定是創建一個閉包,也就是自調用的匿名函數

(function(){
  //各種各樣的代碼
})()

在js中，這樣子我們就創建了一個特殊的函數作用域，在這個域中的代碼不會和已有同名方法，變量產生沖突。
我們看看一開始JQ要怎么寫,在一步步解釋

(function(window,document){
  var Ye = function(selector){
    return new Ye.prototype.init(selector);
  }
  Ye.prototype = {
    constructor : Ye,
    init:function(selector){
      //一些代碼
    },
    //很多的原型屬性和方法
  }
  Ye.prototype.init.prototype = Ye.prototype;
  //很多的靜態屬性和方法
  Ye.test = function(){
    console.log("可以使用");
  }
  window.y = Ye;
})(window,document)

這其實就是jq的大概結構了，不過因為jq實在太大，會分很多個模塊，然后把上面這個構造模塊也包括在一個自調用匿名函數中。

為什么要這么寫

首先

var Ye = function(selector){
  return new Ye.prototype.init(selector);
}

這個是一個很巧妙的方法，通過返回一個原型上init()實例來達到在使用中無需用new來調用，然后

Ye.prototype = {
  constructor: Ye,
  length:0,
  init：function(selector){
    //代碼
  },
  html:function(v){
  //一些代碼
  }
}
Ye.prototype.init.prototype = Ye.prototype;

我們將一些屬性和方法寫在Ye的prototype中，再用Ye.prototype去覆蓋Ye.prototype.init的原型對象，這樣我們就能夠使用里面的屬性和方法了，接下來的重點就在于去構造Ye.prototype了。
在外面

Ye.test = function(){
  console.log("可以使用");
}

我們可以寫一些靜態的方法，這樣無需構造一個Ye對象也可以使用，比如y.test();
最后我們通過window.y = Ye來將接口暴露出來，這樣在全局就可以使用y來構造Ye對象或是使用屬性方法。

接下來我們就只需要想辦法在Ye.prototype實現JQ的各種各樣的功能了，是不是很方便。

附：既然看完了，麻煩各位客官老爺點個贊，給個star唄，源碼地址：https://github.com/LY55027575...

云服務器 GPU云服務器 id從1開始從0開始到1千萬用戶 jquery 2.1.1 cdn jquery 1 8 2

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81859.html

前端相關匯總

摘要：簡介前端發展迅速，開發者富有的創造力不斷的給前端生態注入新生命，各種庫框架工程化構建工具層出不窮，眼花繚亂，不盲目追求前沿技術，學習框架和庫在滿足自己開發需求的基礎上，然后最好可以對源碼進行調研，了解和深入實現原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 評論0 收藏0
3月份前端資源分享

摘要：面試如何防騙一份優秀的前端開發工程師簡歷是怎么樣的作為，有哪些一般人我都告訴他，但是他都不聽的忠告如何面試前端工程師更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...

nanchen2251 2019-08-21 15:21 評論0 收藏0
如何合理的規劃前端之路

摘要：什么是前端工程師總而言之就是運用等技術，在工作中配合設計師實現用戶界面，和后端工程師進行數據對接，完成應用開發的職位。什么是前端工程師？總而言之,就是運用 HTML、CSS、JavaScript 等 Web 技術，在工作中配合UI設計師實現用戶界面，和后端工程師進行數據對接，完成 Web 應用開發的職位。Tips:個人博客排版、UI更佳；地址：https://haonancx.git...

skinner 2019-08-02 15:56 評論0 收藏0
如何合理的規劃前端之路

摘要：什么是前端工程師總而言之就是運用等技術，在工作中配合設計師實現用戶界面，和后端工程師進行數據對接，完成應用開發的職位。什么是前端工程師？總而言之,就是運用 HTML、CSS、JavaScript 等 Web 技術，在工作中配合UI設計師實現用戶界面，和后端工程師進行數據對接，完成 Web 應用開發的職位。Tips:個人博客排版、UI更佳；地址：https://haonancx.git...

lwx12525 2019-08-30 13:13 評論0 收藏0
如何合理的規劃前端之路

摘要：什么是前端工程師總而言之就是運用等技術，在工作中配合設計師實現用戶界面，和后端工程師進行數據對接，完成應用開發的職位。什么是前端工程師？總而言之,就是運用 HTML、CSS、JavaScript 等 Web 技術，在工作中配合UI設計師實現用戶界面，和后端工程師進行數據對接，完成 Web 應用開發的職位。Tips:個人博客排版、UI更佳；地址：https://haonancx.git...

Pines_Cheng 2019-08-22 10:45 評論0 收藏0