《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記四:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)鏈?zhǔn)秸{(diào)用實(shí)例分析
本文實(shí)例講述了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)鏈?zhǔn)秸{(diào)用。分享給大家供大家參考,具體如下:
1.鏈?zhǔn)秸{(diào)用:
jquery可能是目前大家最常用到的js框架了,也習(xí)慣了如下的調(diào)用方式:
$('.someclass').show().css('xxx','xxxx').click(function(){}).xxx……
這種調(diào)用方式就叫做鏈?zhǔn)秸{(diào)用,也就是說在調(diào)用一個(gè)方法之后,可以使用方法的返回值來繼續(xù)進(jìn)行方法調(diào)用。
2.如何實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用:
了解了什么是鏈?zhǔn)秸{(diào)用,我們?cè)賮砜慈绾螌?shí)現(xiàn)鏈?zhǔn)秸{(diào)用,從1中所述我們應(yīng)該知道鏈?zhǔn)秸{(diào)用的關(guān)鍵在于方法的返回值,只要方法的返回值都是調(diào)用該方法的對(duì)象,那么,我們就可以實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用了,我們仿照jquery,使用$作為對(duì)象的選擇器:
(function(){ function _$(els){ this.elements = []; for(var i=0, len=els.length;i<len;i++){ var elements = els[i]; if(typeof element = ‘string'){ element = document.getElementByIdx_x_x(element); } } this.elements.push(element); } _$.prototype = { each:function(fn){ for(var i=0,len=this.elements.length;i<len;i++){ fn.call(this, this.elements[i]); } return this; }, setStyle: function(prop, val){ …… }, show:function(){ …… }, …… } window.$ = function(){ return new _$(arguments); } })();
上面的代碼就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的鏈?zhǔn)秸{(diào)用對(duì)象,并且使用一個(gè)_$作為$的別名,以防止$被其他代碼改寫而導(dǎo)致整個(gè)對(duì)象的定義丟失。
附:一個(gè)簡(jiǎn)單鏈?zhǔn)秸{(diào)用示例:
/* map() items 遍歷的數(shù)組的每一項(xiàng) */ var arr = [1,2,3]; var num = arr.map(function(items){ return items + 1; }); console.log(num);//[2,3,4 var arr = [1,2,3]; var num = arr.map(function (items) { return items+1; }).reduce(function (a,b) {//[2,3,4].reduce() return a+b; }) console.log(num);//0 --- 2+3+4 = 9] /* reduce 實(shí)現(xiàn)數(shù)組里的每個(gè)數(shù)相加,也就是給數(shù)組的每一項(xiàng)求總和 reduce(function(a,b){ return a+b; },a)--a的初始值 */ var arr = [1,2,3]; var num_1 = arr.reduce(function (a,b) { return a+b; }) console.log(num_1);//6 /* 鏈?zhǔn)秸{(diào)用 一個(gè)鏈子接一個(gè)鏈子 */ var arr = [1,2,3]; var num = arr.map(function (items) { return items+1; }).reduce(function (a,b) {//[2,3,4].reduce() return a+b; }) console.log(num);//0 --- 2+3+4 = 9
感興趣的朋友可以使用在線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ì)有所幫助。
- JavaScript鏈?zhǔn)秸{(diào)用原理與實(shí)現(xiàn)方法詳解
- 在JavaScript中實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)
- JavaScript的級(jí)聯(lián)函數(shù)用法簡(jiǎn)單示例【鏈?zhǔn)秸{(diào)用】
- JavaScript鏈?zhǔn)秸{(diào)用實(shí)例淺析
- javascript簡(jiǎn)單鏈?zhǔn)秸{(diào)用案例分析
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式(鏈?zhǔn)秸{(diào)用)
- JavaScript DSL 流暢接口(使用鏈?zhǔn)秸{(diào)用)實(shí)例
- JS鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)方法
- JavaScript中兩種鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼
- javascript中的鏈?zhǔn)秸{(diào)用
- javascript 支持鏈?zhǔn)秸{(diào)用的異步調(diào)用框架Async.Operation
- JavaScript 異步調(diào)用框架 (Part 5 - 鏈?zhǔn)綄?shí)現(xiàn))
- 詳解JavaScript中的鏈?zhǔn)秸{(diào)用
相關(guān)文章
實(shí)例詳解JSON數(shù)據(jù)格式及json格式數(shù)據(jù)域字符串相互轉(zhuǎn)換
JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式。JSON采用完全獨(dú)立于語言的文本格式,這些特性使JSON成為理想的數(shù)據(jù)交換語言2016-01-01js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁面底部繼續(xù)加載
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁面底部繼續(xù)加載,原理很簡(jiǎn)單,就是為window添加一個(gè)scroll事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01javascript自定義函數(shù)參數(shù)傳遞為字符串格式
本節(jié)主要介紹了通過自定義javascript函數(shù)傳遞參數(shù)為字符串格式的,用this傳遞、引號(hào)缺省,示例如下2014-07-07使弱類型的語言JavaScript變強(qiáng)勢(shì)
Javascript (ECMA Script)是一種弱類型的語言.這并不意味著它沒有數(shù)據(jù)類型,只是變量或者Javascript對(duì)象屬性不需要一個(gè)特定類型的值分配給它或者它始終使用相同的值.Javascript中的變量同樣支持自由類型轉(zhuǎn)換成為適用(或者要求)的內(nèi)容以便于使用.2009-06-06微信小程序數(shù)據(jù)分析之自定義分析的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序數(shù)據(jù)分析之自定義分析的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08