EngJS(超輕量) 中數據雙向綁定如何使用

時間 2019-11-24

標籤 engjs 輕量數據雙向綁定如何使用简体版

原文原文鏈接

Eng github

全部支持數據雙向綁定的js工具 ,觸發雙向關係的基本方式無外乎 wather關係和事件關係兩種 . 前者操做數據時 ,後者觸發事件時.
下面簡單的介紹Eng 中的 watcher 與 dom事件的雙向數據關係如何使用 ,體會Eng不一樣之處.

結尾會提供一個用Eng 實現一個帶交互的數據遊戲

最簡單的 watcher 應用 :

<div id='app'>
        {{name}}
    </div>
----------------------------------------------------------------------------
   var app=new Eng({
         el:document.getElementById('app'),
         data:{
             name:"張三",
         },
         watcher:{
            "name":function(oldValue,newValue,items,cache){
                  if(newValue=='張三'){
                     items.$_value='張三 是個混蛋'; // Eng中修改輸出值方式
                  }
            },
         },
    });
    複製代碼

最後頁面中看到輸出結果是 : 張三是個混蛋

react

watcher 在循環數據中的應用:

<table width="500" border="1" id='app'>
    <tr>
         <td width="100">序號:</td><td>姓名:</td>
    </tr>
    <tr e-for='persons'>
         <td>{{$_index}}</td><td>{{name}}</td>
    </tr>
</table>
----------------------------------------------------------------------------
var app=new Eng({
      el:document.getElementById('app'),
      data:{
           persons:[
               {name:'李四'},
               {name:'王五'},
               {name:'弓長叄'},
           ]
      },
      watcherFor:{
          "persons":function( item , cache){
               item.$_watcher({
                  "name":function(oldValue,newValue,items,cache){
                       if(newValue=='弓長叄'){
                         items.$_value = "張三! 你覺得化名(弓長叄),我就認不出來你麼?";
                       }
                   }
               });
           },
     },
 });複製代碼

這個案例中給 persons 數組下的每個元素的 name值都創建了watcher關係
因此將其它元素下的name值更改成(弓長叄),都會觸發那句話
在watcherFor中直接修改item.$_data.name 能夠達到同類效果,這裏僅爲了演示Eng中 watcher 在循環中的簡單使用 .
這裏$_watcher 的用法和上個案例中的 watcher 用法是一致的,僅有做用域的區別 .詳細請參考Eng API中關於 watcherFor 的說明

基於上個案例,額外演示個 watcherFor 搞笑版的數據渲染
jquery

<table width="500" border="1" id='app'>
     <tr>
        <td width="100">序號:</td><td width="100">姓名:</td><td>備註:</td>
     </tr>
     <tr e-for='persons'>
        <td>{{$_index}}</td><td>{{name}}</td><td>{{remarks}}</td>
     </tr>
</table>
----------------------------------------------------------------------------
var app=new Eng({
      el:document.getElementById('app'),
      data:{
             persons:[
                   {name:'李四',remarks:''},
                   {name:'王五',remarks:''},
                   {name:'%$&^*&&',remarks:''},
                   {name:'弓長叄',remarks:''},
             ]
      },
      watcherFor:{
            "persons":function( item , cache){
               var name=item.$_data.name;
                 if(/[^\x00-\xff]/.test(name)){
                        if(name=='弓長叄'){
                          item.$_data.name="張三";
                          item.$_data.remarks="張三! 你覺得化名爲:弓長叄 ,混在人羣,就逃得了麼?";
                        }else{
                          item.$_data.remarks="解除嫌疑";
                        };
                 }else{
                           item.$_allow=false; //  這是一條奇怪的數據,name不是中文,不容許經過
                 }; 
             },
      }
    });複製代碼

此案例是基於上個案例的 watcherFor 循環過濾器版
藉助watcherFor 與cache全局緩存變量區 , 能夠輕易的實現 excel表格中,全部的複雜數據關係函數 , 輕鬆的創建循環內和對全局的 watcher 雙向關係.

git

下面介紹Eng 中 e-event 指令 ,DOM事件驅動的雙向關係

最簡單的 e-event 應用 :

<div id="app">
        <p>x == {{x}}</p><br>
        <button e-event='onclick:click1'>點擊 x++</button>
          
        <div e-base='base'>
           <p>y == {{y}}</p><br>
           <button e-event='onclick:click2'>點擊 y+=2</button>
        </div>
</div>
----------------------------------------------------------------------------
var app=new Eng({
      el:document.getElementById('app'),
      data:{
           x:0,
           base:{
              y:0
           }  
      },
      event:{
           click1:function(){
                //this.$_eng
                this.$_data.x++;
           },
           click2:function(){
                this.$_data.y+=2;
           },
      }
 });
// else code複製代碼

這個案例中 ,點擊第一個按鈕頁面會看到x的值加1 , 第二個按鈕 y的值加2;
$_data 是當前做用base 的域 : {y:0} , this.$_gData 則會指向數據根目錄, base的命名爲任意合法值.github

this.$_eng 能夠拿到當前組件的全部操做方法,也就是說,能夠無限向下寫當前組件的渲染交互邏輯 ,無限追加組件的內容,固然在(watcher,watcherFor中一樣支持);數組

Eng 中不存在任何組件通訊 , 傳值 , 鉤子生命週期,以及 angular,react 中特有的概念,技術名詞,強制的模式規範 , 全部的組件方法(實際上只有4個)之間都存在內在規律聯繫, 能夠像jquery僅需理解基礎方法 ,就能夠毫無顧忌的任意組合使用下去.緩存

//else code 中, 全部寫在Eng 實例以後的js,在使用被e-event指令綁定的dom 時,均可以在外部操做這個組件bash

做者曾考慮將Eng 組件內全部的dom 都綁定上操做雙向關係的能力, 可是覺的這彷佛會有不可預知的問題,可是從此可能會開放支持

一個複雜點的 e-event 交互應用 (小遊戲)
app

<table width="600" border="1" id='app'>
    <tr height="50" style="background:rgb(174,251,246);">
          <td colspan='4'>醜惡都市 , 某警局審訊室內 : 女生寢室偷盜案的 嫌犯 正在激烈的審訊中.....</td>
    </tr>
    <tr>
         <td width="100">序號:</td><td width="100">姓名:</td><td>口供</td><td width="40">提審</td> 
    </tr>
    <tbody>
     <tr e-for='嫌犯名單'>
              <td>{{$_index}}</td><td>{{suspect}}</td><td>{{say}}</td>
              <td><button e-event="onclick:testimony">審訊</button></td>
     </tr>
   </tbody>
   <tbody style="background:rgb(227,248,227);text-align:center;">
       <tr height="40">
          <td colspan='4'>{{scene}}</td>
       </tr>
       <tr height="80" style="text-align:left;">
          <td colspan='4'>{{message}}</td>
       </tr>
   </tbody>
</table>
----------------------------------------------------------------------------
var app=new Eng({
         el:document.getElementById('app'),
         data:{
             '嫌犯名單':[
                   {suspect:'張三',
                     say:'',
                    testimony:'這種事,除了李四 ,沒人能作的出來'},
                   {suspect:'李四',
                    say:'',
                    testimony:'哼!晦氣! 沒錯是我作的,反正以大家的判案做風 ,最後必定會認爲是我作的 , 可是王五 必定會冤枉我'},
                   {suspect:'王五',
                   say:'',
                   testimony:'呵! 確定是 張三和李四 合謀的唄,否則他倆爲什麼也會出如今附近,他們常常在一塊兒交流心得,那種心得大家懂的. 反正我敢對天發誓,我是無辜的'},
             ],
             scene:'此刻!局長辦公室內, 局長 梅巒勇 正在電腦桌前清閒的打着鬥地主',
             message:''
         },
         cache:{
              counts:0,
              flag1:false,
              flag2:false
         },
         event:{
               testimony:function(){
                  var data=this.$_data,th=this;
                  var cache=this.$_eng.$_cache;
                  var name=data.suspect;
                      if(cache.flag2)return;
                      data.say=data.testimony;
                      if(!cache[name]){
                           cache[name]=data;
                           cache.counts++;
                           if(cache.counts>2){
                              setTimeout(function(){
                                   th.$_gData.scene='一局結束 , 局長 梅巒勇 慵懶的伸了伸 懶腰 .唸到:"奶奶個熊輸了一天 !", 隨即看向牆上的秒鐘 , "答,答...."';
                              },4000);
                              setTimeout(function(){
                                   th.$_gData.scene='局長 梅巒勇 拿起了電話 ';
                              },10000);
                              setTimeout(function(){
                                   cache.flag1=true;
                                   th.$_gData.message='局長 : 趙六 ! 差很少了 , 該給我答案了. 上面的 審訊按鈕 再點一下就能交差了, 老子下班時間到了,明天還有明天的事!'
                              },14000);
                           }
                      };
                      if(cache.flag1){
                          cache.flag2=true;
                          if(name=='張三'){
                              cache['張三'].say='冤 ! 冤枉啊...... 張三顫抖的扶着鐵窗,絕望地癱軟在地,已然失去光彩的眼珠,死死地盯着牢門,口中赫赫的喃喃';
                              cache['李四'].say='哼!';
                              cache['王五'].say='怎麼只有張三 ! 剩下個最難辦的...唉..';
                          };
                          if(name=='李四'){
                              cache['張三'].say='切,我早就知道是你';
                              cache['李四'].say='李四由於憤怒而顫抖着攥緊雙拳 , 雙眼中密佈的血絲幾欲爆裂 ! 忽然仰天大笑起來,"哈哈哈,哈哈哈.." 隨即又變得像孤狼同樣異常的沉默冰冷 ,脣齒間彷佛摩擦出幾個如有若無的單詞:"此次....栽了....混亂都....沒有...是不可能的...個人主場..."';
                              cache['王五'].say='張三啊張三! 算你走運 ! 不過 , 只是暫時的.....';
                          }
                          if(name=='王五'){
                              cache['張三'].say='暈 ! 爲什麼不是李四 , 這個表面熱腸, 心裏陰冷的傢伙 . 每次纏過來 都能聞到陰而又險的氣味 ,恰恰又不是他的對手 , 失去了一次好機會 .惋惜惋惜!';
                              cache['李四'].say='李四背對着全部人 ,側面看去,彷佛臉上的肌肉顫動了幾下, 但當他轉過身時. 又好似如蒙大赦般的佝僂起身軀,頹廢感慨一番 .只是若是你能看到隱藏在下面的那雙眼睛......';
                              cache['王五'].say='我!你!大家 ! 王五瘋了通常暴跳起來 ,瘋狂的視圖掙脫枷鎖,揮舞着手銬掄向每個靠近他的警員 . "嗞嗞" ,伴隨着一絲皮肉的焦臭,一切又復歸平靜';
                          };
                      }
               }
 }});複製代碼