浅谈javascript技术的双向数据绑定

浅谈javascript技术的双向数据绑定,第1张

  JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。JavaScript 是因特网上最流行的脚本语言。

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

  

  什么是数据的双向绑定?

  浅谈javascript技术的双向数据绑定,浅谈javascript技术的双向数据绑定,第2张

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

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

  实现步骤:

  一:用js监听数据的变化并将变化的数据时时的同步到页面

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

  推荐下我的前端群:524262608,不定期会有干货分享,初学者还有一套整理好的入门教程,欢迎初学者和进阶中的小伙伴。

  1.属性介绍

  浅谈javascript技术的双向数据绑定,浅谈javascript技术的双向数据绑定,第3张

  2.方法介绍

  浅谈javascript技术的双向数据绑定,浅谈javascript技术的双向数据绑定,第4张

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

  浅谈javascript技术的双向数据绑定,浅谈javascript技术的双向数据绑定,第5张

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

  浅谈javascript技术的双向数据绑定,浅谈javascript技术的双向数据绑定,第6张

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/dianzi/2717087.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-08-17
下一篇 2022-08-17

发表评论

登录后才能评论

评论列表(0条)

保存