原生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)文章
JavaScript中的reduce方法執(zhí)行過程、使用場景及進階用法
這篇文章主要介紹了JavaScript中的reduce方法執(zhí)行過程、使用場景及進階用法的相關(guān)資料,reduce是JavaScript中用于累積計算數(shù)組元素的重要方法,它接受一個回調(diào)函數(shù)和一個初始值,返回一個計算結(jié)果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
JavaScript實現(xiàn)獲得所有兄弟節(jié)點的方法
這篇文章主要介紹了JavaScript實現(xiàn)獲得所有兄弟節(jié)點的方法,實例分析了javascript節(jié)點遍歷的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
JavaScript中callee和caller的區(qū)別與用法實例分析
這篇文章主要介紹了JavaScript中callee和caller的區(qū)別與用法,結(jié)合實例形式分析了javascript中callee和caller的功能、區(qū)別、用法及操作注意事項,需要的朋友可以參考下2019-06-06

