《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)用,也就是說(shuō)在調(diào)用一個(gè)方法之后,可以使用方法的返回值來(lái)繼續(xù)進(jìn)行方法調(diào)用。
2.如何實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用:
了解了什么是鏈?zhǔn)秸{(diào)用,我們?cè)賮?lái)看如何實(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è)_$作為$的別名,以防止$被其他代碼改寫(xiě)而導(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)容感興趣的讀者可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《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. IDEA 2020.1.2 安裝教程附破解教程詳解2. Spring如何集成ibatis項(xiàng)目并實(shí)現(xiàn)dao層基類(lèi)封裝3. Java PreparedStatement用法詳解4. idea設(shè)置提示不區(qū)分大小寫(xiě)的方法5. 40個(gè)Java集合面試問(wèn)題和答案6. Java利用TCP協(xié)議實(shí)現(xiàn)客戶(hù)端與服務(wù)器通信(附通信源碼)7. django queryset相加和篩選教程8. IntelliJ IDEA導(dǎo)出項(xiàng)目的方法9. asp.net core項(xiàng)目授權(quán)流程詳解10. ASP.NET MVC使用異步Action的方法

網(wǎng)公網(wǎng)安備