仿照vue实现双向数据绑定兼容IE6

vue的双向绑定原理：使用object.definproperty改写data数据属性的set内容，当属性发生更改时，set函数调用，通知vue组件绑定的watcher（一个组件一个watcher)，然后对相关试图进行刷新
仿照这个思路，做了一下demo，因为vue依靠object.definproperty实现mvvm，由于ie不支持object.definproperty，所以vue不能兼容低版本的ie浏览器
实现补充

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><input id="in" type="text" value=""/><div id="out">{{hello}}</div>
</div>
</body>
<script>var isIE = !!window.attachEvent;var input = document.getElementById('in'),out = document.getElementById('out'),obj = {}console.log(isIE);function addEvent(element,type,handler){if(element.attachEvent){element.attachEvent('on'+type,handler)}else if(element.addEventListener){element.addEventListener(type,handler)}}if (!isIE) {Object.defineProperty(obj, 'hello', {set: function (val) {input.value = val;out.innerText = val;}})input.onkeyup = function (e) {obj.hello = e.target.value}obj.hello = ''} else {function MyObject(argus) {this.value=''this.set = argus.set || function (val) {this.value = val}this.get = argus.get || function () {return this.value}}var hello = new MyObject({set: function (val) {input.value = val;out.innerText = val;}})obj.hello=helloaddEvent(input,'keyup',function (e) {obj.hello.set(input.value)})}</script>
</html>

仿照vue实现双向数据绑定兼容IE6相关推荐

手写Vue 的双向数据绑定
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理. 本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希 ...
面试题：你能写一个Vue的双向数据绑定吗？
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
深入了解Vue的双向数据绑定
前言在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释 ...
面试题：你能写一个 Vue 的双向数据绑定吗？
作者:呆头呆脑丶 segmentfault.com/a/1190000014274840 在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理 ...
写一个Vue的双向数据绑定
原文 https://segmentfault.com/a/1190000014274840 在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出 ...
你能写一个 Vue 的双向数据绑定吗？
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
Vue 的双向数据绑定原理解析
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
vue的双向数据绑定的原理
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 代码演示:defineProp ...
Vue的双向数据绑定原理（极简版）
先说面试答案: 答: vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者 ...

仿照vue实现双向数据绑定兼容IE6

仿照vue实现双向数据绑定兼容IE6相关推荐

最新文章

热门文章