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中修改输出值方式
                  }
            },
         },
    });
    复制代码

最后页面中看到输出结果是 : 张三 是个混蛋

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 搞笑版的数据渲染

<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 双向关系.

下面介绍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的命名为任意合法值.

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='我!你!你们 ! 王五疯了一般暴跳起来 ,疯狂的视图挣脱枷锁,挥舞着手铐抡向每一个靠近他的警员 . "嗞嗞" ,伴随着一丝皮肉的焦臭,一切又复归平静';
                          };
                      }
               }
 }});复制代码

 这里我改编自一个说谎逻辑推理题,希望没什么文字逻辑bug ,丰富了很多语境, 期望大家可以喜欢 .