前言
本次探索的demo是基于jquery寫的，畢竟jquery提供了強大的選擇器，用慣了就離不開它了！angular的雙向綁定實在是有點精深，本次探索只實現了文本的雙向綁定。
View-Model
先看效果：文本框輸入內容,model層數據也同步過來了
Model-View
先看效果：js改變model層數據，視圖也立即隨之變化
上我的demo
<!DOCTYPE html><html lang="en" data-swq-app = 'app'><head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/jquery-1.9.1.min.js"></script></head><body><input type="text" data-swq-model="name"><input type="text" data-swq-model="age"><div>name:<span data-swq-bind="name"></span></div><div>age:<span data-swq-bind="age"></span></div><script> (function(window){ //模仿angular的雙向綁定 //需要一個發布者，也就是angular里面的$scope的存在，這里我取我的大名swq，是個對象 //需要訂閱者數據容器 var swqArray = []; //訂閱者數據容器 var swqNamesArray = ['name','age']; //存放訂閱者標識容器，這邊寫死，實際上肯定需要動態獲取 window.swq ={ scanTag : function (){ var swqController = $('[data-swq-app]:first');// view層需要和model層綁定的元素進行事件綁定 var allModelView = swqController.find('[data-swq-model]'); allModelView.each(function(){ $(this).on('keyup',function(event){ var targetBind = $(this).data('swqModel'); var value = $(this).val(); if(targetBind && targetBind.length > 0){ swq[targetBind] = value; } }); });// model層需要劫持綁定的進行綁定 $.each(swqNamesArray,function(index,value){ notifyProperty(value); }) } }; //數據的變化需要反映到視圖上，因此要監聽到數據的變化，js原生的defineProperty給我們提供了監聽的可能，劫持更改數據，思路有點類似前端路由的實現思路，我監聽到你某個操作但是我不做你的功能，我自己定義該做的事 function notifyProperty(name){ Object.defineProperty(swq,name,{ //劫持到set方法 set : function(newValue){ swqArray[name] = newValue;// 實現model-view的同步 var $target = $('[data-swq-bind = "'+name+'"],[data-swq-model = "'+name+'"]'); if($target){ $target.each(function(){ var tagName = $(this)[0].tagName.toLowerCase(); if(tagName == 'input' || tagName =='select' || tagName =='textarea'){ $(this).val(newValue) }else{ $(this).text(newValue) } }) } }, //劫持到get方法，因為get方法已經被劫持，所以比如我們劫持了swq.name，那么swq.name就沒有值了，所以我們給它返回值，返回值是存在訂閱者數據容器里面的 get : function(){ return swqArray[name]; } }); } })(window); swq.scanTag();//初始化，進行雙向綁定// 尚未實現的功能 ;// 1.動態獲取需要進行雙向綁定的name// 2.只實現了text文本的綁定，對象的綁定需要遞歸// 3.臟查詢機制還未實現，就是我們某些js后增加的需要雙向綁定的name，沒辦法進行雙向綁定了// 4.angular雙花括號解析表達式未實現<br>// 5.感覺還差得遠，哪位大神看到有成熟的demo記得給鏈接!!! </script></body></html>demo解讀
核心其實就是js原生的defineProperty。在這之前，我們需要知道，我們在給某個對象添加和獲取屬性和方法時其實它底層是調用了set和get方法，比如obj.name="名字",這里是調用了set方法,obj.name這里是調用了get方法。
因此，我們可以劫持js的這兩個底層方法
Object.defineProperty(obj,attribute,{set:function(newVlaue){//dosomething},get:function(){//dosomething}}）
obj是我們的model對象，attribute就是我們要劫持的需要雙向綁定的name,set就是設置屬性時底層調用的方法,get就是獲取屬性時底層調用的方法因為我們劫持了這兩個底層方法，我們可以做我們想做的事，但是同時我們也破壞了它本身的設置和獲取功能，因此我這里是把訂閱者的數據都是存在一個數組里面的，我還聲明了一個數組用來保存所有需要進行雙向綁定的name，比較low的是我這邊是寫死的，實際情況下肯定是要動態獲取所有需要雙向綁定的name的
結言
本人小菜對前端技術很感興趣，有大神路過給點指點，我也可以關注下各位大神的博客，希望可以學到更多的東西！！！謝謝
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
