原生javascript實現類似vue的資料繫結功能示例【觀察者模式】
阿新 • • 發佈:2020-02-25
本文例項講述了原生javascript實現類似vue的資料繫結功能。分享給大家供大家參考,具體如下:
觀察者模式
let observer = { /*訂閱功能*/ addSubscriber: function (cb) { this.subscribers.push(cb); },/*退訂功能*/ removerSubscriber: function (cb) { let index = this.subscribers.indexOf(cb); this.subscribers.splice(index,1) },// 釋出功能 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 = {}; // 實現資料繫結 實現具有釋出訂閱功能 observer.make(o); // 釋出 $("#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前端程式碼除錯執行工具:http://tools.jb51.net/code/WebCodeRun測試上述程式碼執行效果。
更多關於JavaScript相關內容還可檢視本站專題:《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。