用原生 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 在摩拜单车在线数据业务的应用和实践
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章