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 ,豐富了很多語境, 期望大家可以喜歡 .