EngJS(超輕量) 中資料雙向繫結如何使用

薛定諤的喵 (ꈍᴗꈍ)發表於2019-02-22

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中修改輸出值方式
                  }
            },
         },
    });
    複製程式碼

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

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 = "張三! 你以為化名(弓長叄),我就認不出來你麼?";
                       }
                   }
               });
           },
     },
 });複製程式碼

EngJS(超輕量) 中資料雙向繫結如何使用

這個案例中 給 persons 陣列下的每一個元素的 name值 都建立了watcher關係
所以將其它元素下的name值更改為(弓長叄),都會觸發那句話
在watcherFor中直接修改item.$_data.name 可以達到同類效果,這裡僅為了演示Eng中 watcher 在迴圈中的簡單使用 .
這裡$_watcher 的用法 和 上個案例中的 watcher 用法是一致的,僅有作用域的區別 .詳細請參考Eng API中 關於 watcherFor 的說明

基於上個案例,額外演示個 watcherFor 搞笑版的資料渲染

<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不是中文,不允許通過
                 }; 
             },
      }
    });複製程式碼

EngJS(超輕量) 中資料雙向繫結如何使用

此案例是基於上個 案例的 watcherFor 迴圈過濾器 版
藉助watcherFor 與cache全域性快取變數區 , 可以 輕易的 實現 excel表格中,所有的複雜資料關係函式 , 輕鬆的建立 迴圈內 和 對全域性的 watcher 雙向關係.

下面介紹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複製程式碼

EngJS(超輕量) 中資料雙向繫結如何使用

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

this.$_eng 可以拿到當前元件的所有操作方法,也就是說,可以無限向下寫當前元件的渲染互動邏輯 ,無限追加元件的內容,當然在(watcher,watcherFor中同樣支援);

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

//else code 中, 所有寫在Eng 例項之後的js,在使用被e-event指令繫結的dom 時,都可以在外部操作這個元件

作者曾考慮 將Eng 元件內所有的dom 都繫結上操作雙向關係的能力, 但是覺的這似乎會有不可預知的問題,但是今後可能會開放支援

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

<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=`我!你!你們 ! 王五瘋了一般暴跳起來 ,瘋狂的檢視掙脫枷鎖,揮舞著手銬掄向每一個靠近他的警員 . "嗞嗞" ,伴隨著一絲皮肉的焦臭,一切又復歸平靜`;
                          };
                      }
               }
 }});複製程式碼

EngJS(超輕量) 中資料雙向繫結如何使用

 這裡我改編自一個說謊邏輯推理題,希望沒什麼文字邏輯bug ,豐富了很多語境, 期望大家可以喜歡 .

相關文章