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

資訊專欄INFORMATION COLUMN

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

sutaking / 2303人閱讀

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

自己最近在學(xué)習(xí)一些js的插件的寫法，那么當(dāng)然就繞不開jquery，于是自己就學(xué)習(xí)中遇到的一些問題做些總結(jié)和記錄

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

jquery大概是怎樣的

幾乎所有的js插件都一樣，首先肯定是創(chuàng)建一個閉包,也就是自調(diào)用的匿名函數(shù)

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

在js中，這樣子我們就創(chuàng)建了一個特殊的函數(shù)作用域，在這個域中的代碼不會和已有同名方法，變量產(chǎn)生沖突。
我們看看一開始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;
  //很多的靜態(tài)屬性和方法
  Ye.test = function(){
    console.log("可以使用");
  }
  window.y = Ye;
})(window,document)

這其實就是jq的大概結(jié)構(gòu)了，不過因為jq實在太大，會分很多個模塊，然后把上面這個構(gòu)造模塊也包括在一個自調(diào)用匿名函數(shù)中。

為什么要這么寫

首先

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

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

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的原型對象，這樣我們就能夠使用里面的屬性和方法了，接下來的重點就在于去構(gòu)造Ye.prototype了。
在外面

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

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

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

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

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

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

相關(guān)文章

  • 前端相關(guān)匯總

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

    BenCHou 評論0 收藏0

  • 3月份前端資源分享

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

    nanchen2251 評論0 收藏0

  • 如何合理的規(guī)劃前端之路

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

    skinner 評論0 收藏0

  • 如何合理的規(guī)劃前端之路

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

    lwx12525 評論0 收藏0

  • 如何合理的規(guī)劃前端之路

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

    Pines_Cheng 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<