近几年前端技术栈真是发展的太迅速了, 从以前的针对 dom 操作的框架如 jQuery,ext.JS 等框架逐步过渡到当前的 mvvm 模式, 让前端开发者将注意力从 dom 操作逐渐解脱出来, 专注于逻辑的实现, 个人认为开发效率至少提升了 1 倍, mvvm 模式的一个核心便是数据的双向绑定.
什么是数据的双向绑定?
image.PNG
上面说的是在 vue 框架中数据双向绑定的应用, 个人认为这个特性很赞, 是大幅提升开发效率的关键, 那如果脱离 mvvm 的框架, 我也想实现这种数据的双向绑定, 可不可以实现了, 该如何实现了?
用原生 JS 模拟数据双向绑定
实现步骤:
一: 用 JS 监听数据的变化并将变化的数据时时的同步到页面
为了实现这个功能我们需要用到 JS 的一个方法 Object.defineProperty
1. 属性介绍
image.PNG
2. 方法介绍
image.PNG
大概的介绍了 defineProperty 核心的两个方法, 看到这里, 你就知道可以利用这两个内置方法搞事情了, 看下面利用该方法实现数据双向绑定的一个例子
image.PNG
效果如下, 当姓名发生变化时后面的输入框中的值也同步发生变化:
image.PNG
小结: 虽然对此属性没有太研究, 但是感觉还是蛮新鲜的, 之前只是用到了 mvvm 模式带来的便捷却不知道如何去实现, 完全么有思路的说, 但是小伙伴们, 你们看完上述代码, 现在心中的疑惑应该会少很多哈,,
欢迎加入前端 web 资源分享, 群聊号码: 685910553
可在群内接私单! 可内推到大企业! 有问题也可以问群里的大神!
进群还免费领取 2019 年最新源码 + 教程一套
来源: http://www.jianshu.com/p/ed2da5ddac70