本喵写了以下三种不同方式的数据绑定(只实现了单向绑定):
废话不多说,直接撸起代码~
如果绑定的数据过多,脏值检测可能会造成性能问题,因为每次改变值,都需要进行轮询改变对应的值。
- <!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" style="width: 40%; height: 50px;">增加</button>
- <button a-click="reset" style="width: 40%; height: 50px;">重置</button>
- <div>
- <span>第一个绑定数据:</span>
- <span id="aa" style="color:#CC6600" a-bind="counter"></span>
- </div>
- <div>
- <span>第二个绑定数据:</span>
- <span style="color:#CCCC33" a-bind="counter"></span>
- </div>
- <div>
- <span>第三个绑定数据:</span>
- <span style="color:#336699" 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>
该方法是目前比较主流的方法,兼容性也不错,支持 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" style="width: 40%; height: 50px;">增加</button>
- <button a-click="reset" style="width: 40%; height: 50px;">重置</button>
- <div>
- <span>第一个绑定数据:</span>
- <span style="color:#CC6600" a-bind="counter"></span>
- </div>
- <div>
- <span>第二个绑定数据:</span>
- <span style="color:#CCCC33" a-bind="counter"></span>
- </div>
- <div>
- <span>第三个绑定数据:</span>
- <span style="color:#336699" 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>
相比上面两种方法,用 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" style="width: 40%; height: 50px;">增加</button>
- <button a-click="reset" style="width: 40%; height: 50px;">重置</button>
- <div>
- <span>第一个绑定数据:</span>
- <span style="color:#CC6600" a-bind="counter"></span>
- </div>
- <div>
- <span>第二个绑定数据:</span>
- <span style="color:#CCCC33" a-bind="counter"></span>
- </div>
- <div>
- <span>第三个绑定数据:</span>
- <span style="color:#336699" 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>
除了上面三种方式外,其实原本还有一种 Object.observe 方法,该方法是在 es7 的草案中,不过经过各位大佬的讨论,还是废弃了这种方法,只有 chrome 曾经支持过(没错,是曾经,现在不支持了),这里就不鞭尸了(懒)。上面三种方式,无疑 proxy 是一个趋势,vue3 也改用它了,相信未来几年,proxy 会得到各个技术人的热捧。
9月17日,2020云栖大会上,阿里云正式发布工业大脑3.0。 阿里云智能资深产品专家...
最近,DevOps的采用导致了企业计算的重大转变。除无服务器计算,动态配置和即付...
定义 this是函数运行时自动生成的内部对象,即调用函数的那个对象。(不一定很准...
一、PostgreSQL行业位置 一 行业位置 首先我们看一看RDS PostgreSQL在整个行业当...
查看表结构,sbtest1有主键、k_1二级索引、i_c二级索引 CREATE TABLE `sbtest1` ...
2020年对于云计算行业来说是突破性的一年,因为公共云供应商增加了收入,而疫情...
本文转载自网络,原文链接:https://mp.weixin.qq.com/s/vlOUg46B5bcmToX-fjavJQ...
中国最?好的一朵云飘进了华瑞银行。阿里云将进一步助力华瑞银行All in Cloud。 -...
很长时间没有更新原创文章了,但是还一直在思考和沉淀当中,后面公众号会更频繁...
在TOP云(zuntop.com)科技租赁过服务器的站长都知道独立服务器在价格上比VPS主...