原生javascript實現(xiàn)類似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
本文實例講述了原生javascript實現(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); } } }, // 讓每個對象具有訂閱功能 make:function(obj){ for(let key in this){ obj[key] = this[key]; } obj.subscribers = []; }, }
使用實例
// 定義對象 let o = {}; // 實現(xiàn)數(shù)據(jù)綁定 實現(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)試運行工具:http://tools.jb51.net/code/WebCodeRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
WebApi+Bootstrap+KnockoutJs打造單頁面程序
這篇文章主要介紹了WebApi+Bootstrap+KnockoutJs打造單頁面程序的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05Javascript類型系統(tǒng)之undefined和null淺析
這篇文章主要介紹了Javascript類型系統(tǒng)之undefined和null的知識,通過本文還簡單給大家介紹了javascript中null和undefined的區(qū)別的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07Wordpress ThickBox 點擊圖片顯示下一張圖的修改方法
Wordpress自帶的ThickBox特效中,單擊圖片會調(diào)用 tb_remove 以關(guān)閉特效窗口,現(xiàn)將修改其動作為顯示下一張圖。2010-12-12node.js+express+mySQL+ejs+bootstrop實現(xiàn)網(wǎng)站登錄注冊功能
這篇文章主要介紹了node.js+express+mySQL+ejs+bootstrop實現(xiàn)網(wǎng)站登錄注冊功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-01-01