成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

jQuery源碼探索之路（1）--一個(gè)開(kāi)始

sutaking / 2331人閱讀

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

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

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

jquery大概是怎樣的

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

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

在js中，這樣子我們就創(chuàng)建了一個(gè)特殊的函數(shù)作用域，在這個(gè)域中的代碼不會(huì)和已有同名方法，變量產(chǎn)生沖突。
我們看看一開(kāi)始JQ要怎么寫(xiě),在一步步解釋

(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)

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

為什么要這么寫(xiě)

首先

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

這個(gè)是一個(gè)很巧妙的方法，通過(guò)返回一個(gè)原型上init()實(shí)例來(lái)達(dá)到在使用中無(wú)需用new來(lái)調(diào)用，然后

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

我們將一些屬性和方法寫(xiě)在Ye的prototype中，再用Ye.prototype去覆蓋Ye.prototype.init的原型對(duì)象，這樣我們就能夠使用里面的屬性和方法了，接下來(lái)的重點(diǎn)就在于去構(gòu)造Ye.prototype了。
在外面

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81859.html

相關(guān)文章

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

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

    BenCHou 評(píng)論0 收藏0

  • 3月份前端資源分享

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

    nanchen2251 評(píng)論0 收藏0

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

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

    skinner 評(píng)論0 收藏0

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

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

    lwx12525 評(píng)論0 收藏0

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

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

    Pines_Cheng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<