快捷導(dǎo)航

javascript簡(jiǎn)單鏈?zhǔn)秸{(diào)用案例分析

更新時(shí)間：2017年05月10日 09:50:19 作者：TBHacker

這篇文章主要介紹了javascript簡(jiǎn)單鏈?zhǔn)秸{(diào)用,結(jié)合具體實(shí)例形式模擬jQuery分析了鏈?zhǔn)秸{(diào)用的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript簡(jiǎn)單鏈?zhǔn)秸{(diào)用方法。分享給大家供大家參考，具體如下：

jQuery用的就是鏈?zhǔn)秸{(diào)用。像一條連接一樣調(diào)用方法。
鏈?zhǔn)秸{(diào)用的核心就是return this;,每個(gè)方法都返回對(duì)象本身。

下面是簡(jiǎn)單的模擬jQuery的代碼：

<script>
  window.$ = function (id) {
    return new _$(id);
  }
  function _$(id) {
    this.elements = document.getElementById(id);
  }
  _$.prototype = {
    constructor: _$,
    hide: function () {
      console.log('hide');
      return this;
    },
    show: function () {
      console.log('show');
      return this;
    },
    getName: function (callback) {
      if (callback) {
        callback.call(this, this.name);
      }
      return this;
    },
    setName: function (name) {
      this.name = name;
      return this;
    }
  }
  $('test').setName('helloworld').getName(function (name) {
    console.log(name);
  }).show().hide().show().hide().show();
</script>

運(yùn)行效果圖如下：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript中繼承原理與用法實(shí)例入門
這篇文章主要介紹了JavaScript中繼承原理與用法,結(jié)合實(shí)例形式分析了JavaScript中繼承的基本概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
JavaScript網(wǎng)絡(luò)請(qǐng)求工具庫(kù)axios使用實(shí)例探索
這篇文章主要為大家介紹了JavaScript網(wǎng)絡(luò)請(qǐng)求工具庫(kù)axios使用實(shí)例探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2024-01-01
js和jquery分別驗(yàn)證單選框、復(fù)選框、下拉框
這篇文章主要為大家詳細(xì)介紹了js和jquery分別驗(yàn)證單選框、復(fù)選框、下拉框的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-12-12
使用 Opentype.js 生成字體子集的實(shí)例代碼詳解
這篇文章主要介紹了使用 Opentype.js 生成字體子集,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-05-05
js改變透明度實(shí)現(xiàn)輪播圖的算法
這篇文章主要為大家詳細(xì)介紹了js改變透明度實(shí)現(xiàn)輪播圖的算法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法,簡(jiǎn)單講述了廣義表的原理與相關(guān)概念,并結(jié)合實(shí)例形式分析了javascript定義與使用廣義表的相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04
用js實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)放大鏡效果，利用背景圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
DWR實(shí)現(xiàn)模擬Google搜索效果實(shí)現(xiàn)原理及代碼
本文主要介紹DWR實(shí)現(xiàn)模擬Google搜索效果實(shí)現(xiàn)原理，感興趣的朋友可以了解下，或許對(duì)你的DWR學(xué)習(xí)有幫助，閑話就不多說(shuō)了，看代碼了
2013-01-01
JavaScript實(shí)現(xiàn)圖片懶加載的兩種方式
現(xiàn)在的科技發(fā)達(dá),圖片的資源占比越來(lái)越大,對(duì)圖片在頁(yè)面的優(yōu)化已經(jīng)成為前端開發(fā)必備的技術(shù)之一,難的圖片懶加載方法咱們看著頭大,簡(jiǎn)單,易懂的才適合我們程序員,所以本文給大家介紹了JavaScript實(shí)現(xiàn)圖片懶加載的兩種方式,需要的朋友可以參考下
2024-04-04
js中如何將多層嵌套的數(shù)組轉(zhuǎn)換為一層數(shù)組
這篇文章主要介紹了js中如何將多層嵌套的數(shù)組轉(zhuǎn)換為一層數(shù)組問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06