angular雙向綁定模擬探索

更新時間：2016年12月26日 14:54:10 投稿：lijiao

這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言
本次探索的demo是基于jquery寫的，畢竟jquery提供了強大的選擇器，用慣了就離不開它了！angular的雙向綁定實在是有點精深，本次探索只實現(xiàn)了文本的雙向綁定。

View-Model

先看效果：文本框輸入內(nèi)容,model層數(shù)據(jù)也同步過來了

Model-View

先看效果：js改變model層數(shù)據(jù)，視圖也立即隨之變化

上我的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的雙向綁定
    //需要一個發(fā)布者，也就是angular里面的$scope的存在，這里我取我的大名swq，是個對象
    //需要訂閱者數(shù)據(jù)容器
    var swqArray = []; //訂閱者數(shù)據(jù)容器
    var swqNamesArray = ['name','age'];  //存放訂閱者標識容器，這邊寫死，實際上肯定需要動態(tài)獲取
    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);
      })
    }
    };
    //數(shù)據(jù)的變化需要反映到視圖上，因此要監(jiān)聽到數(shù)據(jù)的變化，js原生的defineProperty給我們提供了監(jiān)聽的可能，劫持更改數(shù)據(jù)，思路有點類似前端路由的實現(xiàn)思路，我監(jiān)聽到你某個操作但是我不做你的功能，我自己定義該做的事
    function notifyProperty(name){
      Object.defineProperty(swq,name,{
        //劫持到set方法
        set : function(newValue){
          swqArray[name] = newValue;
//      實現(xiàn)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方法已經(jīng)被劫持，所以比如我們劫持了swq.name，那么swq.name就沒有值了，所以我們給它返回值，返回值是存在訂閱者數(shù)據(jù)容器里面的
        get : function(){
          return swqArray[name];
        }
      });
    }
 
  })(window);
 
  swq.scanTag();//初始化，進行雙向綁定
//  尚未實現(xiàn)的功能 ;
//  1.動態(tài)獲取需要進行雙向綁定的name
//  2.只實現(xiàn)了text文本的綁定，對象的綁定需要遞歸
//  3.臟查詢機制還未實現(xiàn)，就是我們某些js后增加的需要雙向綁定的name，沒辦法進行雙向綁定了
//  4.angular雙花括號解析表達式未實現(xiàn)<br>//  5.感覺還差得遠，哪位大神看到有成熟的demo記得給鏈接!!!
 
 
</script>
</body>
</html>

demo解讀

核心其實就是js原生的defineProperty。在這之前，我們需要知道，我們在給某個對象添加和獲取屬性和方法時其實它底層是調(diào)用了set和get方法，比如obj.name="名字",這里是調(diào)用了set方法,obj.name這里是調(diào)用了get方法。

因此，我們可以劫持js的這兩個底層方法

Object.defineProperty(obj,attribute,{set:function(newVlaue){//dosomething},get:function(){//dosomething}}）
obj是我們的model對象，attribute就是我們要劫持的需要雙向綁定的name,set就是設置屬性時底層調(diào)用的方法,get就是獲取屬性時底層調(diào)用的方法因為我們劫持了這兩個底層方法，我們可以做我們想做的事，但是同時我們也破壞了它本身的設置和獲取功能，因此我這里是把訂閱者的數(shù)據(jù)都是存在一個數(shù)組里面的，我還聲明了一個數(shù)組用來保存所有需要進行雙向綁定的name，比較low的是我這邊是寫死的，實際情況下肯定是要動態(tài)獲取所有需要雙向綁定的name的

結言

本人小菜對前端技術很感興趣，有大神路過給點指點，我也可以關注下各位大神的博客，希望可以學到更多的東西?。?！謝謝

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: