JS 实现双向数据绑定

近几年前端技术栈真是发展的太迅速了,从以前的针对dom操作的框架如jquery,ext.js等框架逐步过渡到当前的mvvm模式,让前端开发者将注意力从dom操作逐渐解脱出来,专注于逻辑的实现,个人认为开发效率至少提升了1倍,mvvm模式的一个核心便是数据的双向绑定。

什么是数据的双向绑定?

双向数据绑定

上面说的是在vue框架中数据双向绑定的应用,个人认为这个特性很赞,是大幅提升开发效率的关键,那如果脱离mvvm的框架,我也想实现这种数据的双向绑定,可不可以实现了,该如何实现了?

用原生js模拟数据双向绑定

为了实现这个功能我们需要用到js的一个方法Object.defineProperty

1. 属性介绍

属性介绍

2. 方法介绍

方法介绍

大概的介绍了defineProperty核心的两个方法,看到这里,你就知道可以利用这两个内置方法搞事情了,看下面利用该方法实现数据双向绑定的一个例子

例子

效果如下,当姓名发生变化时后面的输入框中的值也同步发生变化:

效果图

小伙伴们,你们看完上述代码,现在心中的疑惑应该会少很多哈,,嘎嘎。

看完文章还有福利拿,往下看👇👇👇
小伙伴可以在公号【grain先森】后台回复【190301】获取130套简历模板。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • js双向绑定几种方法的介绍 使用Object.defineProperty实现简单的js双向绑定剖析Vue原理&实...
    darr250阅读 9,696评论 1 5
  • 原理 本篇是使用Object.defineProperty()来实现双向绑定 该方法提供一个对象的get&set回...
    LElysion阅读 1,983评论 0 0
  • 单向数据绑定  把Model绑定到view,Model更新,View将会自动更新双向数据绑定  用户更新view,...
    w_wx_x阅读 211评论 0 0
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 10,053评论 1 52
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,800评论 0 6

友情链接更多精彩内容