H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】前端的三种数据绑定技术

本喵写了以下三种不同方式的数据绑定(只实现了单向绑定):

  • 第一种,使用了“脏值”检测,该方法是 angular 的数据绑定原理。
  • 第二种,使用了 es5 的 Object.defineProperty(),vue2 的数据绑定就是基于该方法。
  • 第三种,使用了 es6 的 Proxy ,vue3 的数据绑定开始全盘换为这种方式。

废话不多说,直接撸起代码~

【JS】前端的三种数据绑定技术

01 脏值检测

如果绑定的数据过多,脏值检测可能会造成性能问题,因为每次改变值,都需要进行轮询改变对应的值。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>脏值检测</title>
</head>
<body>
<h3>脏值检测</h3>
<button a-click="add">增加</button>
<button a-click="reset">重置</button>
<div>
<span>第一个绑定数据:</span>
<span id="aa" a-bind="counter"></span>
</div>
<div>
<span>第二个绑定数据:</span>
<span a-bind="counter"></span>
</div>
<div>
<span>第三个绑定数据:</span>
<span a-bind="counter"></span>
</div>
<script type="text/javascript">
window.onload = function () {
// 首次加载需要初始化数据
apply()
bind()
}
// data
let counter = 0
// methods
function add() {
counter++
}
function reset() {
counter = 0
}
// bind event
function bind() {
let list = document.querySelectorAll("[a-click]")
list.forEach(item => {
item.onclick = function () {
window[item.getAttribute("a-click")]()
apply()
}
})
}
// bind data
function apply() {
let list = document.querySelectorAll("[a-bind='counter']")
list.forEach(item => {
if (item.innerHTML !== counter + '') {
item.innerHTML = counter
}
})
}
</script>
</body>
</html>

02 Object.defineProperty(ES5)

    该方法是目前比较主流的方法,兼容性也不错,支持 ie8(注意:下面并没实现 vue2 的发布订阅者模式,有空再撸一个出来)。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object.defineProperty</title>
</head>
<body>
<h3>Object.defineProperty(ES5语法)</h3>
<button a-click="add">增加</button>
<button a-click="reset">重置</button>
<div>
<span>第一个绑定数据:</span>
<span a-bind="counter"></span>
</div>
<div>
<span>第二个绑定数据:</span>
<span a-bind="counter"></span>
</div>
<div>
<span>第三个绑定数据:</span>
<span a-bind="counter"></span>
</div>
<script type="text/javascript">
window.onload = function () {
// 首次加载需要初始化数据
apply('counter', obj.counter)
bind()
}
// data
let obj = {
_counter: 0
}
// counter 只是一个载体,真正的值存储在 _counter
Object.defineProperty(obj, 'counter', {
get: function () {
//console.log('get:', counter)
return this._counter
},
set: function (val) {
this._counter = val
//console.log('set:', counter)
apply('counter', this._counter)
}
})
// methods
function add() {
obj.counter++
}
function reset() {
obj.counter = 0
}
// bind event
function bind() {
let list = document.querySelectorAll('[a-click]')
list.forEach(item => {
item.onclick = function () {
window[item.getAttribute('a-click')]()
}
})
}
// bind data
function apply(str, val) {
let list = document.querySelectorAll(`[a-bind=${str}]`)
list.forEach(item => {
if (item.innerHTML !== val + '') {
item.innerHTML = val
}
})
}
</script>
</body>
</html>

03 Proxy(ES6)

    相比上面两种方法,用 es6 Proxy 来写数据绑定,代码会直观很多,而且很易用,不过遗憾的是 Proxy 兼容性很差,IE 是全面不支持它,而且 babel 没法完全将它转为 es5 语法,虽然有 google 大佬写的 Polyfill,但那个也是有残缺的(不知道尤大在 vue3 里怎么解决它)。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>proxy</title>
</head>
<body>
<h3>proxy(ES6语法)</h3>
<button a-click="add">增加</button>
<button a-click="reset">重置</button>
<div>
<span>第一个绑定数据:</span>
<span a-bind="counter"></span>
</div>
<div>
<span>第二个绑定数据:</span>
<span a-bind="counter"></span>
</div>
<div>
<span>第三个绑定数据:</span>
<span a-bind="counter"></span>
</div>
<script type="text/javascript">
window.onload = function () {
// 首次加载需要初始化数据
apply('counter', obj.counter)
bind()
}
// data
let obj = new Proxy({
counter: 0
}, {
set: function (obj, prop, value) {
obj[prop] = value
if (prop == 'counter') {
apply('counter', value)
}
return true
}
})
// methods
function add() {
obj.counter++
}
function reset() {
obj.counter = 0
}
// bind event
function bind() {
let list = document.querySelectorAll('[a-click]')
list.forEach(item => {
item.onclick = function () {
window[item.getAttribute('a-click')]()
}
})
}
// bind data
function apply(str, val) {
let list = document.querySelectorAll(`[a-bind=${str}]`)
list.forEach(item => {
if (item.innerHTML !== val + '') {
item.innerHTML = val
}
})
}
</script>
</body>
</html>

04 总结

    除了上面三种方式外,其实原本还有一种 Object.observe 方法,该方法是在 es7 的草案中,不过经过各位大佬的讨论,还是废弃了这种方法,只有 chrome 曾经支持过(没错,是曾经,现在不支持了),这里就不鞭尸了(懒)。上面三种方式,无疑 proxy 是一个趋势,vue3 也改用它了,相信未来几年,proxy 会得到各个技术淫的热捧。
    
    那么问题来了,react 的数据绑定技术是基于什么?有哪位技术淫可以告知一下吗?

共同进步

本喵第一次正式在思否平台发表文章,欢迎~欢迎~,希望能够与大家一起共同进步。
本喵专注于前端技术,不定期更新优质前端文章。
喜欢本喵,请点击下面“关注作者”,亲们还可以关注公众号“技术汤姆喵”哦~

【JS】前端的三种数据绑定技术

本文地址:H5W3 » 【JS】前端的三种数据绑定技术

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址