用原生 JS 實現雙向綁定及應用實例
寫在前面：
所謂的雙向綁定，無非是從界面的操做能實時反映到數據，數據的變動也能實時展示到界面。angular封裝了雙向綁定的方法，使雙向綁定變得十分簡單。可是在有些場景下（好比下面那個場景），不能使用angular來實現雙向綁定，須要咱們使用js來實現雙向綁定。javascript
需求場景：
寫了一個點擊事件，當點擊的時候在後臺賦值了，可是在頁面視圖上面沒有顯示出來，想到要使用雙向綁定來實現這個功能。由於代碼以前是用js和jq寫的，引入angular的話，會致使以前的代碼不能用。在網上參考了一篇文章以後作出來了這個功能html
ps零碎知識點：樓主踩過坑了，引用angular寫的話，不能再使用JQ寫代碼，樓主上次代碼都刪的差很少了，還不能使用，最後才發現是angular和JQ衝突了，因此最好不要混着使用。java
實現效果：
實現效果
點擊按鈕的時候，在後臺賦值，而後直接在頁面中顯示出來，在方框裏面輸入值，也能夠實時反映到數據。git
ps：文末有demo連接，能夠直接複製到本地試一試github
應用：
好比實現一個在後臺賦值，而後界面出現一個隨機的選項，誰是臥底、狼人殺這類型的。數組
實現原生js過程當中的三個步驟：
1.須要一個UI元素和屬性相互綁定的方法（核心）app
2.監視屬性和UI元素的變化dom
3.須要讓全部綁定的對象和元素都能感知到變化學習
實現思路：
咱們使用數據特性來爲HTML代碼進行綁定，全部被綁定在一塊兒的JavaScript對象和DOM元素都會訂閱一個PubSub對象。只要JavaScript對象或者一個HTML輸入元素監聽到數據的變化時，就會觸發綁定到PubSub對象上的事件，從而其餘綁定的對象和元素都會作出相應的變化。ui
代碼實現部分：
html代碼部分：
<h1>原生js雙向綁定及其應用</h1>
<div class="js-2-1section2 col-sm-10 col-xs-10">
<div><input type="text" data-bind-1="peopleName" id="text1"/>
<!--data-bind-1="peopleName" 原生js雙向綁定的格式-->
</div>
<div><input type="text" data-bind-2="killName" id="text2" />
<button class="btn btn-primary" onclick="randomGroup()">隨機詞組</button>
</div>
<p data-bind-1="peopleName"></p>
<p data-bind-2="killName"></p>
</div>複製代碼
上面代碼中data-bind-1="peopleName" 比較重要，其餘一些亂七八糟，用來實現效果的，能夠不用管。
分析一下————data-bind-1="peopleName"：
格式：data-bind-能夠更改，只能是數字="能夠更改，至關於變量名"
ps：第一個地方只能更改數字，由於建立的是對象。這裏的數字能夠不按照順序，我試了999均可以。
js代碼雙向綁定部分
js代碼是封裝好了的一個方法，能夠按照前面幾行的方式調用，代碼裏面有註釋。
實際上如下這段代碼已經實現了雙向綁定，下面還有一個應用實例，感興趣的能夠看看。文末有demo連接，能夠直接複製到本地試一試。
var DBind1 = new DBind( 1 );
var DBind2 = new DBind( 2 );//前面是變量，括號裏面的是html那裏填的數字
DBind1.set( "peopleName", '第一個' );
DBind2.set( "killName", '第二個' );//第一個是剛纔html格式那裏的變量名，第二個方框是賦值
function DataBinder( object_id ) {
// 建立一個簡單的pubSub對象
var pubSub = {
callbacks: {},
on: function( msg, callback ) {
this.callbacks[ msg ] = this.callbacks[ msg ] || [];
this.callbacks[ msg ].push( callback );
},
publish: function( msg ) {
this.callbacks[ msg ] = this.callbacks[ msg ] || [];
for ( var i = 0, len = this.callbacks[ msg ].length; i < len; i++ ) {
this.callbacks[ msg ][ i ].apply( this, arguments );
}
}
},
data_attr = "data-bind-" + object_id,
message = object_id + ":input",
timeIn;
changeHandler = function( evt ) {
var target = evt.target || evt.srcElement, // IE8兼容
prop_name = target.getAttribute( data_attr );
if ( prop_name && prop_name !== "" ) {
clearTimeout(timeIn);
timeIn = setTimeout(function(){
pubSub.publish( message, prop_name, target.value );
},50);
}
};
// 監聽事件變化，並代理到pubSub
if ( document.addEventListener ) {
document.addEventListener( "input", changeHandler, false );
} else {
// IE8使用attachEvent而不是addEventListenter
document.attachEvent( "oninput", changeHandler );
}
// pubSub將變化傳播到全部綁定元素
pubSub.on( message, function( evt, prop_name, new_val ) {
var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),
tag_name;
for ( var i = 0, len = elements.length; i < len; i++ ) {
tag_name = elements[ i ].tagName.toLowerCase();
if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) {
elements[ i ].value = new_val;
} else {
elements[ i ].innerHTML = new_val;
}
}
});
return pubSub;
}
function DBind( uid ) {
var binder = new DataBinder( uid ),
user = {
// 屬性設置器使用數據綁定器pubSub來發布
attributes: {},
set: function( attr_name, val ) {
this.attributes[ attr_name ] = val;
// Use the `publish` method
binder.publish( uid + ":input", attr_name, val, this );
},
get: function( attr_name ) {
return this.attributes[ attr_name ];
},
_binder: binder
};
// Subscribe to the PubSub
binder.on( uid + ":input", function( evt, attr_name, new_val, initiator ) {
if ( initiator !== user ) {
user.set( attr_name, new_val );
}
});
return user;
}複製代碼
原生js雙向綁定應用實例：
作了一個實現像誰是臥底中，隨機抽取詞彙，相似的功能。
function randomGroup() {
var oGroup=[];//存放全部詞彙的詞組、
for(var i=0;i<20;i++){
oGroup[i]={};//設置數組中的每一個元素都是一個對象
}
//一個一個定義他們狀態的字符串，而後在下面賦值
oGroup[0].people="降龍十八掌";
oGroup[0].killer="九陰白骨爪";
oGroup[1].people="快樂大本營";
oGroup[1].killer="每天向上";
oGroup[2].people="零花錢";
oGroup[2].killer="生活費";
oGroup[3].people="爺爺";
oGroup[3].killer="姥爺";
oGroup[4].people="同窗";
oGroup[4].killer="同桌";
oGroup[5].people="小瀋陽";
oGroup[5].killer="宋小寶";
oGroup[6].people="成吉思汗";
oGroup[6].killer="努爾哈赤";
oGroup[7].people="謝娜張傑";
oGroup[7].killer="鄧超孫儷";
oGroup[8].people="新年";
oGroup[8].killer="跨年";
oGroup[9].people="保安";
oGroup[9].killer="保鏢";
oGroup[10].people="眉毛";
oGroup[10].killer="鬍鬚";
oGroup[11].people="端午節";
oGroup[11].killer="中秋節";
oGroup[12].people="摩托車";
oGroup[12].killer="電動車";
oGroup[13].people="高跟鞋";
oGroup[13].killer="增高鞋";
oGroup[14].people="漢堡包";
oGroup[14].killer="肉夾饃";
oGroup[15].people="牛奶";
oGroup[15].killer="豆漿";
oGroup[16].people="脣膏";
oGroup[16].killer="口紅";
oGroup[17].people="公交";
oGroup[17].killer="地鐵";
oGroup[18].people="結婚";
oGroup[18].killer="訂婚";
oGroup[19].people="麪包";
oGroup[19].killer="蛋糕";
//詞彙出自——————誰是臥底的詞彙大全
var oGroupNum=Math.floor(Math.random()*20);//抽取一個隨機數，隨機數範圍跟上面數組的長度是一致的
oPeople=oGroup[oGroupNum].people;
okiller=oGroup[oGroupNum].killer;//隨機數的對應下標的狀態字符串賦值給這個變量。
console.log(oPeople,okiller);
DBind1.set( "peopleName", oPeople );//將上面的狀態字符串賦值給input框，。這一步將在界面中直接顯示出來
DBind2.set( "killName", okiller );
}複製代碼
demo地址
以上就是用原生js實現雙向綁定及其應用的全部內容了，本文主要是分享給以前不知道的小夥伴們看的，或者須要此類資料的小夥伴們。
最後：如需轉載，請放上原文連接並署名。碼字不易，感謝支持！由於我常常看不懂別人寫的分享，因此我的寫文比較偏小白，寫的很差之處，歡迎指點。而後就是但願看完的朋友點個喜歡，也能夠關注一下我。
ps：目前待業，座標北京，本人適應互聯網快節奏，高強度，持續學習，持續成長，認真，嚴謹，學習積極性強。中小公司大佬求帶走，郵箱：1677593011@qq.com。
掘金我的主頁
參考連接：
相關文章
- 1. 用原生 JS 實現雙向綁定及應用實例
- 2. JS實現雙向綁定
- 3. 雙向數據綁定原理（原生js實現雙向數據綁定）
- 4. Vue雙向綁定原理及實現
- 5. 轉 vue實現雙向數據綁定之原理及實現篇 vue的雙向綁定原理及實現
- 6. vue雙向綁定原理及實現
- 7. vue的雙向綁定原理及實現 vue的雙向綁定原理及實現
- 8. JS實現數據雙向綁定
- 9. 原生js模擬vue實現雙向數據綁定
- 10. 原生js實現數據的雙向綁定
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • 使用Redis和Lua的原子性實現搶紅包功能 - 紅包項目實戰
- • Java Agent入門實戰（三）-JVM Attach原理與使用
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章