搜索到
2
篇与
的结果
-
基于es6 proxy的单向数据绑定 看了一些关于vue3.0的更新内容，主要是围绕性能方面的提升和对MVVM数据绑定的完全重写。3.0中不再使用 Object.defineProperty 而是原生ES6 Proxy，关于ProxyProxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。在vue2.x中，使用Object.defineProperty实现数据劫持。一般的做法如下：let obj = {}; // 遍历data的所有属性 let dataKeys = Object.keys(data); dataKeys.map(key => { // 为data的所有属性添加set方法 Object.defineProperty(data, key, { set: function(newVal) { // 修改v-text属性对应的data中的key的值 document.querySelector(el + " *[v-text=" + key + "]").textContent = newVal; } }); }); // 将处理好的data赋值给要返回的对象 obj.data = data; return obj;上面的代码中可以看出，主要有两个问题：要为对象的每一个属性添加数据劫持，一般结合Object.keys()遍历对象属性实现。如果对象的层级结构不是简单的层级结构，只能一直遍历处理。不能监听数组的变化，数组的push, pop, shift, unshift, splice, sort, reverse等方法不会触发set的侦听。我们在使用vue修改数组时能触发view的更新是因为vue内部做了变相的处理。针对Vue 3.0的这个更新，做了一个简单的单向数据绑定的例子，说明3.0中使用Proxy实现数据绑定的基本原理（只是简单的单向绑定，数据的更改会反映到视图上）<div id="app"> <h1 v-text="title"></h1> <p>当前时间：<span v-text="time"></span></p> </div>function ViewBind({ el = 'body', data = {}} = {}) { // 要返回的对象实例 let obj = {}; const proxy = new Proxy(data, { get(obj, property) { return obj[property] }, set(obj, property, newValue) { obj[property] = newValue; const bindEle = document.querySelector(el + " *[v-text=" + property + "]"); if (bindEle) { bindEle.textContent = newValue; } } }); obj.data = proxy; return obj; }; const app = new ViewBind({ el: '#app', data: { count: 0, title: '这是标题', time: +new Date() } }); setInterval(() => { // 定时修改页面上<span v-text="time">元素中的内容 app.data.time = +new Date(); app.data.count = app.data.count + 1; app.data.title = '这是标题' + app.data.count; }, 1000)上面的代码中通过ViewBind实例化了一个对象，定时修改对象的属性，视图上通过v-text绑定的内容就会自动更新，效果如下 -
强大的Array.prototype.splice() 之所以会单独针对这个api写这么一篇博文，一方面是因为最近在一次面试中聊到了这个API，我没能完全说出它的用法；另一方面则是因为通过熟悉后觉得这个api确实很灵活很强大，充分体现了javascript的灵活性。所以写这么一篇博文，可以让自己更深刻地记住这个方法，也希望能让更多地同仁用这个方法让自己的javascript代码更加简洁，更加有效率。MDN Web Docs中对Array.prototype.splice()的描述信息如下splice(start, deleteCount, item1, item2, ...) 方法通过删除或替换现有元素和/或添加新元素来更改数组的内容。传参信息如下1. start 从什么位置开始修改当前数组，这个参数有如下几种情况0到数组长度-1，即当前数组的任意位置。大于数组长度-1，不报错，但是不会删除当前数组的元素，第二个参数无效。但是，如果这个时候传入了第三个，以及第四个。。。参数，那么，这些参数值会被添加到数组的末尾位置，也就类似于push方法。小于0，如果开始位置为负数，会从数组的末尾倒着查找，如，-1为最后一个元素，-2为倒数第二个元素。2. deleteCount 要删除的内容的长度，这个参数有如下几种情况0或负数 不删除数组元素。大于0并且小于start指定位置到数组最后一个元素的长度，则删除指定长度的元素。大于start指定位置到数组最后一个元素的长度，删除从start位置后面所有的元素，如splice(0, 99999999)会晴空长度小于99999999的数组3. 在start位置开始要添加或者替换的元素，可以有多个。针对上面的描述，我们一一验证它的所有用法。删除元素（第二个参数不为0，后续参数不传入，只删除）let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 1); // 从第二个位置开始删掉一个元素 console.log(ary); // ['a', 'c', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 2); // 从第二个位置开始删掉两个元素 console.log(ary); // ['a', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(-2, 1); // 删掉倒数第二个元素‘e’ console.log(ary); // ['a', 'b', 'c', 'd', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(0, ary.length); // 删掉所有元素 console.log(ary); // []添加元素(第二个参数为0，后续参数不为空，则只增加不删除)let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(ary.length, 0, 'x'); // 在数组末尾追加一个元素 console.log(ary); // ['a', 'b', 'c', 'd', 'e', 'f', 'x']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 0, 'x'); // 在数组第二个元素前插入一个元素 console.log(ary); // ['a','x', 'b', 'c', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(-2, 0, 'x'); // 在数组倒数第二个元素前插入一个元素 console.log(ary); // ['a', 'b', 'c', 'd', 'x', 'e', 'f']let ary = ['a', 'b', 'c']; let ary2 = ['d', 'e', 'f'] ary.splice(ary.length, 0, ...ary2); // 数组拼接 console.log(ary); // ['a', 'b', 'c', 'd', 'e', 'f']更新/替换元素（第二个参数不为0，后续参数不为空，这里需要注意的是，传入的替换元素的个数可以等于前面的长度，也可以不等于前端的长度）替换元素其实执行的是先删除再插入，所以一定要清楚传入参数的意义let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 1, 'x'); // 替换第二个元素‘b’为‘x’ (长度和传入的替换元素个数都为一) console.log(ary); // ['a', 'x', 'c', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 2, 'x'); // 删掉第二个和第三个元素‘b’ ‘c’，插入一个元素‘x’ (长度大于传入的替换元素个数) console.log(ary); // ['a', 'x', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 2, 'x', 'y', 'z'); // 删掉第二个和第三个元素‘b’ ‘c’，插入三个元素‘x’，‘y’， ‘z’ (长度小于传入的替换元素个数) console.log(ary); // ['a', 'x','y', 'z', 'd', 'e', 'f']上面这些就是我目前总结的常用的splice的用法，如有更多使用方法，欢迎留言讨论
