今天就跟大家聊聊有关使用JavaScript怎么实现数据双向绑定，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
可以定义一个构造函数来获得这个对象。
因为get和set方法很显然是公共的，所以可以定义在原型对象上。
计算
安全
数据库
网络和加速
企业服务
var $vm = function(obj) {
this.data = obj.data
}
$vm.prototype.get = function(prop) {
//返回当前值
return this.data[prop]
}
$vm.prototype.set = function (prop, val) {
//赋值操作
this.data[prop] = val
}如果这时候实例化一个这个构造函数的对象，这个对象上就会存在get和set方法，看代码可以知道他对这个对象上的data生效。
这样一个简单的get set方法就设置好了。一个是获取当前对象属性的值，一个是对其设置新的值。
如果在设置的时候我们再去触发相应的视图层的操作，那么一个简单的绑定就实现了。
var vm = new $vm({
// 绑定的变量值
data: {
info: true
}
})取值
vm.get('info')存值
vm.set('info', false)如果我们在set方法里添加console.log()那么每次数据变动都会被打印出来。
使用set方法来替代=号的赋值操作可以一定意义上代替Object.defineProperty的效果。并且兼容性更好。
对视图数据进行绑定是一个很大的问题，怎样使数据的变动在视图上体现。
这里一个最简单的替代实现就是去手动绑定数据和视图。用jq的方式。
比如在set里面执行对应这个属性变动的回掉函数。
例如
$vm.prototype.set = function (prop, val) {
this.data[prop] = val
if (this.$$fn[prop]) {
this.$$fn[prop](val, oldVal)
}
}可以看到如果当前对象上$$fn属性上如果存在同名的函数，会执行。
这样我们可以把绑定dom的操作来放到里面显示。
这种写法显然可能不太利于维护，于是我想可以参照vue框架的watch观察者来实现。
在vue中观察对象上某个值的改变可以do someThing。
所以在此可以借鉴。
// 存值
$vm.prototype.set = function (prop, val) {
var oldVal = this.data[prop]
this.data[prop] = val
//如果发现被列入观察者 执行函数并注入修改后的值
if (this.watch[prop]) {
this.watch[prop](val, oldVal)
}
}鸽了，这里省略3000字。哈哈哈哈，因为写了好多代码但是没写博客，懒得写了直接跳过吧，有兴趣的童鞋直接看源码。虚拟dom和{{}}表达式，观察者模式，计算属性等等。
突发奇想，想要对数据层绑定还有个简单的方案。利用html data的自定义属性来绑定相应的属性，利用jq选择器来找到对应的节点进行更新。这也是一种替代的方案。
JQ选择器，选择属性=某值的dom节点。利用这个选择器可以来获得所有绑定了某属性的节点。
<div data-vm="info">
</div>$('[data-vm="info"]').text(300)这个节点的值变为了300。
所以利用自定义属性和jq的选择器，只要在dom节点上写上data-vm(取的名字)然后等于要绑定的值，那么就可以实现对视图的绑定了。
// 存值
$vm.prototype.set = function (prop, val) {
try {
var oldVal = this.data[prop]
this.data[prop] = val
//如果发现被列入观察者 执行函数并注入修改后的值
if (this.watch[prop]) {
this.watch[prop](val, oldVal)
}
//查询是否有订阅值
if (this.$$fn[prop]) {
this.$$fn[prop](val, oldVal)
}
//查询是否有依赖于此项的计算属性
if (this.$$count[prop]) {
// 获得所有依赖此值的计算属性
var arr = this.$$count[prop]
//循环遍历每个计算属性并重新计算它的值
for (var i = 0; i < arr.length; i++) {
var item = arr[i]
// 获得返回的值
this.data[item] = this.computed[item]()
}
}
// 如果节点绑定了此属性 更新节点
var dom = $('[data-vm="' + prop + '"]')
if (dom) {
dom.text(val)
}
// this.updateView()
} catch(e) {
console.log('error setData' + prop)
}
}看完上述内容，你们对使用JavaScript怎么实现数据双向绑定有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
