实现非常简单的js双向数据绑定(实现非常简单的英文)

编辑：rootadmin

推荐整理分享实现非常简单的js双向数据绑定(实现非常简单的英文)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:实现非常简单的英语,实现非常简单的成语,最简单的也是最难实现的,很简单就能做到的成语,实现简单的promise,简单实在,实现非常简单的英语,实现非常简单的英语,内容如对您有帮助，希望把文章链接给更多的朋友！

双向数据绑定指的就是，绑定对象属性的改变到用户界面的变化的能力，反之亦然。换种说法，如果我们有一个user对象和一个name属性，一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了。同样地，如果UI包含了一个输入用户姓名的输入框，输入一个新值就应该会使user对象的name属性做出相应的改变。

很多热门的JS框架客户端如Ember.js，Angular.js 或者KnockoutJS ，都在最新特性上刊登了双向数据绑定。这并不意味着从零实现它很难，也不是说需要这些功能的时候，采用这些框架是唯一的选择。下面的想法实际上很基础，可以被认为是3步走计划：

我们需要一个UI元素和属性相互绑定的方法我们需要监视属性和UI元素的变化我们需要让所有绑定的对象和元素都能感知到变化

还是有很多方法能够实现上面的想法，有一个简单有效的方法就是使用PubSub模式。这个思路很简单：我们使用数据特性来为HTML代码进行绑定，所有被绑定在一起的JavaScript对象和DOM元素都会订阅一个PubSub对象。只要JavaScript对象或者一个HTML输入元素监听到数据的变化时，就会触发绑定到PubSub对象上的事件，从而其他绑定的对象和元素都会做出相应的变化。

用jQuery做一个简单的实现

对于DOM事件的订阅和发布，用jQuery实现起来是非常简单的，接下来我们就是用Jquery比如下面：

对于上面这个实现来说，下面是一个User模型的最简单的实现方法：

现在我们如果想要将User模型属性绑定到UI上，我们只需要将适合的数据特性绑定到对应的HTML元素上。

这样输入值会自动映射到user对象的name属性，反之

亦然。到此这个简单实现就完成啦！

不需要jQuery的实现

在如今的大多数项目里，可能已经使用了jQuery，因此上面的例子完全可以接受。不过，如果我们需要试着向另一个极端做，并且还删除对jQuery的依赖，那么怎么做呢？好，证实一下这么做并不难（尤其是在我们限制只支持IE 8及以上版本的情况下）。最终，我们必须使用一般的javascript实现一个定制的PubSub并且保留了DOM事件:

除了设置器里调用 jQuery的trigger方法外，模型可以保持一样。调用trigger方法将替代为调用我们定制的具有不同特征的PubSub的publish方法：

我们又一次通过一百行不到，又可维护的纯javascript完成了我们想要的结果。

以上内容就是关于js双向数据绑定的相关教程，希望对大家学习有所帮助。

基于JavaScript实现仿京东图片轮播效果 js实现仿京东图片轮播效果，当鼠标划在窗口上面停止计时器，鼠标离开窗口，开启计时器，鼠标划在页签上面，停止计时器，手动切换，通过定义计时

详解javascript数组去重问题首先，我想到的是另建一个结果数组，用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较，检测是否重复。于是乎，

js识别uc浏览器的代码其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser')-1){alert("uc浏览器");}else｛//不是uc浏览器执行的操作｝如果想测试某个浏览器的特征可以通过如下方法

标签: 实现非常简单的英文

本文链接地址:https://www.jiuchutong.com/biancheng/383684.html 转载请保留说明！

上一篇：浅析javascript中的事件代理(细说javascript)

下一篇：基于JavaScript实现仿京东图片轮播效果(基于javascript的毕业设计)