JavaScript鏈?zhǔn)秸{(diào)用原理與實(shí)現(xiàn)方法詳解
本文實(shí)例講述了JavaScript鏈?zhǔn)秸{(diào)用原理與實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
1、什么是鏈?zhǔn)秸{(diào)用?
這個(gè)很容易理解,例如
$(’text’).setStyle(’color’, ’red’).show();
一般的函數(shù)調(diào)用和鏈?zhǔn)秸{(diào)用的區(qū)別:鏈?zhǔn)秸{(diào)用完方法后,return this返回當(dāng)前調(diào)用方法的對(duì)象。
首先,我們先來看看一般函數(shù)的調(diào)用方式
(1)先創(chuàng)建一個(gè)簡(jiǎn)單的類
//創(chuàng)建一個(gè)bird類 function Bird(name) { this.name=name; this.run=function () { document.write(name+' '+'start run;');} this.stopRun=function () { document.write(name+' '+'start run;');} this.sing=function () { document.write(name+' '+'start sing;'); } this.stopSing=function () { document.write(name+' '+'start stopSing;'); } }
(2)使用方式:一般的調(diào)用方式
var bird=new Bird('測(cè)試'); bird.run(); birdbird.sing(); bird.stopSing(); bird.stopRun();
//結(jié)果為;測(cè)試 start run;測(cè)試 start sing;測(cè)試 start stopSing;測(cè)試 start run;
(3)總結(jié),該種方式有一個(gè)弊端就是:多次重復(fù)使用一個(gè)對(duì)象變量
然后,我們?cè)賮砜纯磳⑸鲜龈某涉準(zhǔn)秸{(diào)用的格式
(1)在創(chuàng)建的簡(jiǎn)單類中加上return this,如下
//創(chuàng)建一個(gè)bird類 function Bird(name) { this.name=name; this.run=function () { document.write(name+' '+'start run;'); return this;// return this返回當(dāng)前調(diào)用方法的對(duì)象。 } this.stopRun=function () { document.write(name+' '+'start run;'); return this; } this.sing=function () { document.write(name+' '+'start sing;'); return this; } this.stopSing=function () { document.write(name+' '+'start stopSing;'); return this; } }
(2)使用鏈?zhǔn)秸{(diào)用(連綴的方式)
var bird=new Bird('測(cè)試'); bird.run().sing().stopSing().stopRun();//結(jié)果為;測(cè)試 start run;測(cè)試 start sing;測(cè)試 start stopSing;測(cè)試 start run;
(3)總結(jié)此種方式的調(diào)用結(jié)果與一般的調(diào)用方式產(chǎn)生的結(jié)果一樣,優(yōu)點(diǎn)是:鏈?zhǔn)秸{(diào)用這種風(fēng)格有助于簡(jiǎn)化代碼的編寫工作,讓代碼更加簡(jiǎn)潔、易讀,同時(shí)也避免多次重復(fù)使用一個(gè)對(duì)象變量
2.模仿jquery的鏈?zhǔn)秸{(diào)用
第一步,定義一個(gè)含參數(shù)的空對(duì)象
(function(){ //下劃線:表示私有變量的寫法 function _$(els) { };//有參數(shù)的空對(duì)象})()//程序啟動(dòng)的時(shí)候 里面的代碼直接執(zhí)行了
第二步,準(zhǔn)備方法 在_$上定義一個(gè)onrReady方法
(function(){ //第一步,下劃線:表示私有變量的寫法 function _$(els) { };//有參數(shù)的空對(duì)象 //第二步,準(zhǔn)備方法 在_$上定義一個(gè)onrReady方法 _$.onrReady=function (fn) { //按要求把對(duì)象(_$)注冊(cè)到window對(duì)象上 //對(duì)外開放的接口 window.$=function () { return new _$(arguments);//傳遞相應(yīng)的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對(duì)象($('')=_$(參數(shù))) } fn(); } }})()
第三步,為了類(Function)能擴(kuò)展函數(shù),我們定義一個(gè)它的靜態(tài)函數(shù)
Function.prototype.method=function (name,fn) {//(函數(shù)名稱,函數(shù)本身) this.prototype[name]=fn; return this;//鏈?zhǔn)秸{(diào)用關(guān)鍵};//這個(gè)函數(shù)的意思:為function對(duì)象增加函數(shù),會(huì)用鏈?zhǔn)秸{(diào)用,鏈?zhǔn)秸{(diào)用有兩個(gè)參數(shù)name,和fn
第四步,擴(kuò)展類的相應(yīng)方法 鏈?zhǔn)降膶?duì)象增加jquery庫(kù)提供的操作函數(shù)
(function(){ //下劃線:表示私有變量的寫法 function _$(els) { };//有參數(shù)的空對(duì)象 //第二步,準(zhǔn)備方法 在_$上定義一個(gè)onrReady方法 _$.onrReady=function (fn) { //按要求把對(duì)象(_$)注冊(cè)到window對(duì)象上 //對(duì)外開放的接口 window.$=function () { return new _$(arguments);//傳遞相應(yīng)的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對(duì)象($('')=_$(參數(shù))) } fn(); } //第四步 //擴(kuò)展類的相應(yīng)方法 鏈?zhǔn)降膶?duì)象增加jquery庫(kù)提供的操作函數(shù) _$.method('AddEvent',function (type,fn) {//_$本身是一個(gè)function要繼承原型鏈上的東西。 fn();}).method('getEvent',function (fn,e) { fn();})})()
第五步,使用 ,需要調(diào)用_$.onReady方法才可以返回對(duì)象使用從function類繼承而來的原型上的方法
(function () { // (1)下劃線:表示私有變量的寫法 function _$(els) { };//有參數(shù)的空對(duì)象 //(2)準(zhǔn)備方法 在_$上定義一個(gè)onrReady方法 // window.$=_$; _$.onrReady=function (fn) { //按要求把對(duì)象(_$)注冊(cè)到window對(duì)象上 在任何地方都可以使用 //對(duì)外開放的接口 window.$=function () {//window 上先注冊(cè)一個(gè)全局變量 與外界產(chǎn)生關(guān)系 return new _$(arguments);//傳遞相應(yīng)的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對(duì)象($('')=_$(參數(shù))) } fn(); } //(4)擴(kuò)展類的相應(yīng)方法 鏈?zhǔn)降膶?duì)象增加jquery庫(kù)提供的操作函數(shù)_$.method('AddEvent',function (type,fn) {//_$本身是一個(gè)function要繼承原型鏈上的東西。 fn();}).method('getEvent',function (fn,e) { fn();}); //第五步,開始使用 ,需要調(diào)用_$.onready方法才可以返回對(duì)象使用從function類繼承而來的原型上的方法 _$.onrReady(function () {//$是綁定在Windows上的 $('').AddEvent('click',function () { alert('click') }) })})()
上述綜合的代碼為
//第三步,為了類(Function)能擴(kuò)展函數(shù),我們定義一個(gè)它的靜態(tài)函數(shù)Function.prototype.method=function (name,fn) {//(函數(shù)名稱,函數(shù)本身) this.prototype[name]=fn; return this;//鏈?zhǔn)秸{(diào)用關(guān)鍵};//這個(gè)函數(shù)的意思:為function對(duì)象增加函數(shù),會(huì)用鏈?zhǔn)秸{(diào)用,鏈?zhǔn)秸{(diào)用有兩個(gè)參數(shù)name,和fn(function () { // 第一步,下劃線:表示私有變量的寫法 function _$(els) { };//有參數(shù)的空對(duì)象 //第二步,準(zhǔn)備方法 在_$上定義一個(gè)onrReady方法 // window.$=_$; _$.onrReady=function (fn) { //按要求把對(duì)象(_$)注冊(cè)到window對(duì)象上 //對(duì)外開放的接口 window.$=function () { return new _$(arguments);//傳遞相應(yīng)的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對(duì)象($('')=_$(參數(shù))) } fn(); } //第四步,擴(kuò)展類的相應(yīng)方法 鏈?zhǔn)降膶?duì)象增加jquery庫(kù)提供的操作函數(shù)_$.method('AddEvent',function (type,fn) {//_$本身是一個(gè)function要繼承原型鏈上的東西,所以可以使用method方法 fn();}).method('getEvent',function (fn,e) { fn();}); //第五步,開始使用,需要調(diào)用_$.onready方法才可以返回對(duì)象使用從function類繼承而來的原型上的方法 _$.onrReady(function () {//$是綁定在Windows上的 $('').AddEvent('click',function () { alert('click') }) })})()
上述是將$綁定到window上的操作,如果我們想將$綁定到一個(gè)指定對(duì)象上我們可以這通過改變上述的第二步和第五步如下,
/** * Created by 與你在巔峰相會(huì) on 2017/10/12. *///第三步,為了類(Function)能擴(kuò)展函數(shù),我們定義一個(gè)它的靜態(tài)函數(shù)Function.prototype.method=function (name,fn) {//(函數(shù)名稱,函數(shù)本身) this.prototype[name]=fn; return this;//鏈?zhǔn)秸{(diào)用關(guān)鍵};//這個(gè)函數(shù)的意思:為function對(duì)象增加函數(shù),會(huì)用鏈?zhǔn)秸{(diào)用,鏈?zhǔn)秸{(diào)用有兩個(gè)參數(shù)name,和fn(function () { // 第一步,下劃線:表示私有變量的寫法 function _$(els) { };//有參數(shù)的空對(duì)象 //第二步,準(zhǔn)備方法 在_$上定義一個(gè)onrReady方法 _$.onReady=function (obj,fn) {//obj傳進(jìn)來的對(duì)象 if(obj){ //按要求把對(duì)象(_$)注冊(cè)到window對(duì)象上 //對(duì)外開放的接口 obj.$=function () {return new _$(arguments);//傳遞相應(yīng)的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對(duì)象($('')=_$(參數(shù))) } }else { //按要求把對(duì)象(_$)注冊(cè)到window對(duì)象上//對(duì)外開放的接口 window.$=function () {return new _$(arguments);//傳遞相應(yīng)的方法調(diào)用參數(shù) 返回一可以使用function類原型上的方法的對(duì)象($('')=_$(參數(shù))) } } fn(); } //第四步,擴(kuò)展類的相應(yīng)方法 鏈?zhǔn)降膶?duì)象增加jquery庫(kù)提供的操作函數(shù)_$.method('AddEvent',function (type,fn) {//_$本身是一個(gè)function要繼承原型鏈上的東西,可以直接使用method方法 fn();}).method('getEvent',function (fn,e) { fn();}); //第五步,開始使用,需要調(diào)用_$.onready方法才可以返回對(duì)象使用從function類繼承而來的原型上的方法 var com={}; _$.onReady(com,function () {//$是綁定在Windows上的 com.$('').AddEvent('click',function () { alert('click') }) })})()
自己畫一個(gè)圖簡(jiǎn)單理解一下上面的過程及思路:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章:
1. Python獲取抖音關(guān)注列表封號(hào)賬號(hào)的實(shí)現(xiàn)代碼2. Warning: require(): open_basedir restriction in effect,目錄配置open_basedir報(bào)錯(cuò)問題分析3. php網(wǎng)絡(luò)安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究4. 解決Python 進(jìn)程池Pool中一些坑5. php測(cè)試程序運(yùn)行速度和頁面執(zhí)行速度的代碼6. Python如何讀寫CSV文件7. 三個(gè)不常見的 HTML5 實(shí)用新特性簡(jiǎn)介8. ajax請(qǐng)求添加自定義header參數(shù)代碼9. python利用os模塊編寫文件復(fù)制功能——copy()函數(shù)用法10. 無線標(biāo)記語言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁
