原生javascript實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
本文實(shí)例講述了原生javascript實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定功能。分享給大家供大家參考,具體如下:
觀察者模式
let observer = { /*訂閱功能*/ addSubscriber: function (cb) { this.subscribers.push(cb); }, /*退訂功能*/ removerSubscriber: function (cb) { let index = this.subscribers.indexOf(cb); this.subscribers.splice(index, 1) }, // 發(fā)布功能 publish: function (what) { for (let i in this.subscribers) { if (typeof this.subscribers[i] == "function") { this.subscribers[i](what); } } }, // 讓每個(gè)對(duì)象具有訂閱功能 make:function(obj){ for(let key in this){ obj[key] = this[key]; } obj.subscribers = []; }, }
使用實(shí)例
// 定義對(duì)象 let o = {}; // 實(shí)現(xiàn)數(shù)據(jù)綁定 實(shí)現(xiàn)具有發(fā)布訂閱功能 observer.make(o); // 發(fā)布 $("#num").oninput = function(){ o.publish(this.value); }; // 平方功能 o.addSubscriber(function(num){ $("#sqrnum").value = Math.pow(num,2); }); o.addSubscriber(function(num){ $("#cubenum").value = Math.pow(num,3); }); o.addSubscriber(function(num){ $("#fourFangnum").value = Math.pow(num,4); }); o.addSubscriber(function(num){ $("#sqrtnum").value = Math.sqrt(num); }); } function $(str){//#box .cls p if(str.charAt(0)=="#"){ return document.getElementById(str.substring(1)); }else if(str.charAt(0)=="."){ return document.getElementsByClassName(str.substring(1)); }else{ return document.getElementsByTagName(str); } }
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具:http://tools.jb51.net/code/WebCodeRun測(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)文章
WebApi+Bootstrap+KnockoutJs打造單頁面程序
這篇文章主要介紹了WebApi+Bootstrap+KnockoutJs打造單頁面程序的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05javascript倒計(jì)時(shí)效果實(shí)現(xiàn)
這篇文章為大家分享了javascript倒計(jì)時(shí)效果實(shí)現(xiàn)代碼段,現(xiàn)今團(tuán)購網(wǎng)、電商網(wǎng)、門戶網(wǎng)等,常使用時(shí)間記錄重要的時(shí)刻,如時(shí)間顯示、倒計(jì)時(shí)差、限時(shí)搶購等,特別是雙十一活動(dòng),需要的朋友可以參考下2015-11-11Javascript類型系統(tǒng)之undefined和null淺析
這篇文章主要介紹了Javascript類型系統(tǒng)之undefined和null的知識(shí),通過本文還簡(jiǎn)單給大家介紹了javascript中null和undefined的區(qū)別的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07小程序如何實(shí)現(xiàn)中間帶加號(hào)的tabbar
自定義tabBar可以讓開發(fā)者更加靈活地設(shè)置tabBar樣式,以滿足更多個(gè)性化的場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于小程序如何實(shí)現(xiàn)中間帶加號(hào)tabbar的相關(guān)資料,需要的朋友可以參考下2022-04-04Wordpress ThickBox 點(diǎn)擊圖片顯示下一張圖的修改方法
Wordpress自帶的ThickBox特效中,單擊圖片會(huì)調(diào)用 tb_remove 以關(guān)閉特效窗口,現(xiàn)將修改其動(dòng)作為顯示下一張圖。2010-12-12node.js+express+mySQL+ejs+bootstrop實(shí)現(xiàn)網(wǎng)站登錄注冊(cè)功能
這篇文章主要介紹了node.js+express+mySQL+ejs+bootstrop實(shí)現(xiàn)網(wǎng)站登錄注冊(cè)功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01