ES6高阶2：数据劫持、发布订阅者模式

最新推荐文章于 2020-10-19 22:37:10 发布
最新推荐文章于 2020-10-19 22:37:10 发布
阅读量460 收藏 1
点赞数
分类专栏： JavaScript高级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44145258/article/details/106156056
版权

什么是数据劫持？

举一个vue的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 插值表达式 -->
        {{ message }}
        <input v-model="message" />
        <div v-html="htmlData"></div>
    </div>
</body>
<script>
    // 1.怎么实现数据驱动？把数据渲染到视图里；
    let vm = new Vue({
        el: "#app",
        data: {
            message: "测试数据",
            htmlData: "<h1>标题</h1>"
        }
    })
    // 2.二次渲染；数据劫持；
    // console.log(vm._data)
    setTimeout(function () {
        vm._data.message = "修改的数据"
    }, 1000);
</script>

</html>

数据劫持就是修改内容后，差值表达式能够知道修改并作出变化

1 通过defineProperty实现数据劫持

defineProperty创建对象、修改对象

let obj = {
        name:"张三"
    }
let value = obj["name"]
Object.defineProperty(obj,"name",{
    configurable:true,
    enumerable:false,
    get(){
        return value;
    },
    set(newValue){
        console.log("set...",newValue);
        value = newValue;
    }
})
console.log(obj);
obj.name = "王五";

// configurable: false,外部无法获取对象属性
for (let key in obj) {
    console.log(key)
}
delete obj.name;

参数：

  1. enumerable 是否可枚举 默认为true
    为false时外部就无法获取这个对象内的属性
  2. configurable 是否可删除
    当configurable: true时，对象属性就无法被删除

1.1 利用自定义事件实现vue数据劫持

class Vue extends EventTarget {
    constructor(opts) {
        super();
        this.opts = opts;
        this._data = this.opts.data;
        this.observe(this._data);
        this.compile();
    }
    observe(data) {
        for (let key in data) {
            let _this = this;
            let value = data[key];
            Object.defineProperty(data, key, {
                configurable: true,
                enumerable: true,
                get() {
                    console.log("get...");
                    return value;
                },
                set(newValue) {
                    console.log("set...");
                    // 触发事件更新；
                    let event = new CustomEvent(key, {
                        detail: newValue
                    });
                    _this.dispatchEvent(event);
                    value = newValue;
                }
            });
        }
    }

    // 初次编译到dom里；
    compile() {
        let ele = document.querySelector(this.opts.el);
        let childNodes = ele.childNodes;
        this.compileNode(childNodes);
    }
    compileNode(childNodes) {
        childNodes.forEach(node => {
            if (node.nodeType === 3) {
                // 获取文本的内容；
                let textContent = node.textContent;
                // 分组匹配插入表达式里的变量
                let reg = /\{\{\s*([^\{\}\s*]+)\s*\}\}/g;
                if (reg.test(textContent)) {
                    let $1 = RegExp.$1;
                    console.log(this.opts.data[$1]);
                    node.textContent = node.textContent.replace(reg, this._data[$1]);
                    // 绑定自定义事件；
                    this.addEventListener($1, e => {
                        let newValue = e.detail;
                        let oldValue = this._data[$1];
                        let updateReg = new RegExp(oldValue);
                        node.textContent = node.textContent.replace(updateReg, newValue);
                    });
                }
            } else if (node.nodeType === 1) {
                // 判断节点内是否有子节点；
                if (node.childNodes.length > 0) {
                    // 有子节点
                    this.compileNode(node.childNodes);
                }
            }
        });

    }
}

1.2 通过发布订阅模式实现数据劫持

什么是发布订阅模式?

  • 分别定义一个收集器和订阅者类
  • 通过收集器收集订阅者
// 收集器；
class Dep {
    constructor() {
        this.subs = [];
    }
    addSub(sub) {
        this.subs.push(sub);
    }
    notify(newValue) {
        this.subs.forEach(sub => {
            sub.update(newValue);
        });
    }
}
// 订阅者；
class Watcher {
    constructor(data, key, cb) {
        Dep.target = this;
        data[key];
        this.cb = cb;
        Dep.target = null;
    }
    update(newValue) {
        this.cb(newValue);
    }
}

数据劫持

class Vue {
    constructor(opts) {
        this.opts = opts;
        this._data = this.opts.data;
        this.observe(this._data);
        this.compile();
    }
    observe(data) {
        for (let key in data) {
            let dep = new Dep();
            let value = data[key];
            Object.defineProperty(data, key, {
                configurable: true,
                enumerable: true,
                get() {
                    // 收集订阅者
                    console.log("get...");
                    // 如果有实例，就将实例push到收集器里
                    Dep.target && dep.addSub(Dep.target);
                    return value;
                },
                set(newValue) {
                    console.log("set...");
                    dep.notify(newValue);
                    value = newValue;
                }
            });
        }
    }


    // 初次编译到dom里；
    compile() {
        let ele = document.querySelector(this.opts.el);
        let childNodes = ele.childNodes;
        this.compileNode(childNodes);
    }
    compileNode(childNodes) {
        childNodes.forEach(node => {
            if (node.nodeType === 3) {
                // 获取文本的内容；
                let textContent = node.textContent;
                let reg = /\{\{\s*([^\{\}\s*]+)\s*\}\}/g;
                if (reg.test(textContent)) {
                    let $1 = RegExp.$1;
                    node.textContent = node.textContent.replace(reg, this._data[$1]);
                    // 触发
                    new Watcher(this._data, $1, (newValue) => {
                        let oldValue = this._data[$1];
                        let updateReg = new RegExp(oldValue);
                        node.textContent = node.textContent.replace(updateReg, newValue);
                    });


                }
            } else if (node.nodeType === 1) {
                let attrs = node.attributes;
                Array.from(attrs).forEach(attr => {
                    let attrName = attr.name;
                    let attrValue = attr.value;
                    if (attrName.indexOf("v-") === 0) {
                        if (attrName === "v-model") {
                            // console.log("有v-model指令")
                            node.value = this._data[attrValue];
                            node.addEventListener("input", e => {
                                // 触发视图更新；
                                this._data[attrValue] = e.target.value;
                            });
                        }
                    }
                });
                // 判断节点内是否有子节点；
                if (node.childNodes.length > 0) {
                    // 有子节点
                    this.compileNode(node.childNodes);
                }
            }
        });
    }
}
// 实现 v-html 指令；

// 收集器；
class Dep {
    constructor() {
        this.subs = [];
    }
    addSub(sub) {
        this.subs.push(sub);
    }
    notify(newValue) {
        this.subs.forEach(sub => {
            sub.update(newValue);
        });
    }
}
// 订阅者；
class Watcher {
    constructor(data, key, cb) {
        Dep.target = this;  // 通过Dep的静态属性target指向watcher实例，判断收集器是否与其关联
        data[key];
        this.cb = cb;
        Dep.target = null;
    }
    update(newValue) {
        // 触发回调
        this.cb(newValue);
    }
}

2 改进：proxy 劫持数据

defineProperty劫持属性有一些缺点，比如说：

  1. 如果对象里有数组，数组更改无法劫持
  2. 新增对象属性无法触发视图更新

proxy设置修改属性

不需要再进行对象循环，直接通过内置对象在这里插入代码片方法中的target, key ，newValue参数获取修改属性

    let obj = {
        name:"张三",
        age:20
    }

    let newObj = new Proxy(obj,{
        get(target,key){
            console.log("get...");
            return target[key];
        },
        set(target,key,newValue){
            console.log("set...",newValue);
            target[key] = newValue;
        }
    })
    newObj.name = "修改的";

改进之后的vue

class Vue {
    constructor(opts) {
        this.opts = opts;
        this._data = this.opts.data;
        this.observe(this._data);
        this.compile();
    }

    observe(data) {
        let dep = new Dep();
        this._data = new Proxy(data, {
            get(target, key) {
                if (Dep.target) {
                    dep.addSub(Dep.target);
                }
                return target[key];
            },
            set(target, key, newValue) {
                dep.notify(newValue);
                target[key] = newValue;
            }
        });
    }

    // 初次编译到dom里；
    compile() {
        let ele = document.querySelector(this.opts.el);
        let childNodes = ele.childNodes;
        this.compileNode(childNodes);
    }
    compileNode(childNodes) {
        childNodes.forEach(node => {
            if (node.nodeType === 3) {
                // 获取文本的内容；
                let textContent = node.textContent;
                let reg = /\{\{\s*([^\{\}\s*]+)\s*\}\}/g;
                if (reg.test(textContent)) {
                    let $1 = RegExp.$1;
                    node.textContent = node.textContent.replace(reg, this._data[$1]);
                    // 绑定自定义事件；
                    new Watcher(this._data, $1, (newValue) => {
                        // console.log("update",newValue);
                        let oldValue = this._data[$1];
                        let updateReg = new RegExp(oldValue);
                        node.textContent = node.textContent.replace(updateReg, newValue);
                    });


                }
            } else if (node.nodeType === 1) {
                // console.log("标签");
                let attrs = node.attributes;
                [...attrs].forEach(attr => {
                    let attrName = attr.name;
                    let attrValue = attr.value;
                    if (attrName.indexOf("v-") === 0) {
                        if (attrName === "v-model") {
                            // console.log("有v-model指令")
                            node.value = this._data[attrValue];
                            node.addEventListener("input", e => {
                                // 触发视图更新；
                                this._data[attrValue] = e.target.value;
                            });
                        }
                    }
                });
                // 判断节点内是否有子节点；
                if (node.childNodes.length > 0) {
                    // 有子节点
                    this.compileNode(node.childNodes);
                }
            }
        });
    }
}
// 实现 v-html 指令；

// 收集器；
class Dep {
    constructor() {
        this.subs = [];
    }
    addSub(sub) {
        this.subs.push(sub);
    }
    notify(newValue) {
        this.subs.forEach(sub => {
            sub.update(newValue);
        });
    }
}
// 订阅者；
class Watcher {
    constructor(data, key, cb) {
        Dep.target = this;
        data[key];
        this.cb = cb;
        Dep.target = null;
    }
    update(newValue) {
        this.cb(newValue);
    }
}
斜光
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
那些年 你需要解决的观察者模式/发布-订阅模式(ES6语法)
qq_42755014的博客
09-23 649
这是参考的地址: https://www.jb51.net/article/137419.htm;(看了很多版本觉得这个很不错) 在笔试和一些面试经验交流的帖子中进程出现订阅者模式,想着自己还不是很清楚,所以得解决,但是我们的目的应该不仅仅是对付笔试和面试,应该了解这个模式的思想:松散耦合代码形式!更多的大家看别的描述吧,会比我更清楚,这里也不累述,只是加入自己更加通俗的理解:我们的_event...
ES6发布订阅设计模式实现
目标前端大佬
03-09 502
发布订阅就是将所有事件发到一个池子（数组）中，期间可以增减方法，要使用的时候统一依次执行，参数只能传相同的。期间要解决的问题是数组去重、数组塌陷。 let _subsribe = () => { class sub { constructor() { this.pond = [] } add(func) { ...
Vue的双向数据绑定原理（数据劫持+ 发布订阅）
qq_38969618的博客
11-13 334
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 （在单向绑定的基础上给可输入元素（input、textarea等可以产生数据的html元素）添加了change(input)事件，来动态修改model和 view。...
es6版·观察者模式+发布订阅模式
weixin_33735077的博客
02-22 708
一、原理图 二、观察者模式 1、手动触发的观察者模式 /* * @Author: laifeipeng * @Date: 2019-02-22 15:44:56 * @Last Modified by: laifeipeng * @Last Modified time: 2019-02-22 16:29:36 */ /*************** 观察者模式 **********...
发布订阅者模式以及vue中数据劫持 +结合发布/订阅模式
weixin_33729196的博客
04-17 967
class Event { constructor(){ this.events = {} } on(type, handler) { if(!this.events.hasOwnProperty(type)){ this.events[type] = []; } this.events[type].push(handler) return t...
es6实现发布订阅
sinat_35308384的博客
03-14 626
const _pond = Symbol(); class Subscribe { constructor() { this[_pond] = new Map(); } add(key, fn) { if (typeof key != "string" && typeof fn != "function") { ...
boilerplate-angular-es6-webpack2:带ES6和Webpack 2的样板角1.x
05-02
样板式角度-es6-webpack2 要安装依赖项，请运行： npm i 要运行项目，请使用： npm start 要安装测试依赖项，请执行以下操作： 使用npm通过以下命令全局安装Protractor： npm install -g protractor更新...
ES6新特性五：Set与Map的数据结构实例分析
12-01
本文实例讲述了ES6新特性五之Set与Map的数据结构。分享给大家供大家参考，具体如下： 1. Set ① 定义：它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。 var s ...
es6features-zhCN：es6features中文版
02-05
**ES6（ECMAScript 2015）特性详解** ES6，全称为ECMAScript 2015，是JavaScript语言的一个重要版本更新，引入了许多新的特性和语法改进，极大地提升了开发效率和代码质量。这个“es6features-zhCN”资源是其中文版...
ES6新特性七：数组的扩充详解
08-30
ES6新特性之数组的扩充详解 ES6新特性之数组的扩充详解主要介绍了ES6新特性之数组的扩充，结合实例形式分析了...ES6新特性之数组的扩充详解提供了一些非常有用的数组操作方法，使得开发者可以更加方便地处理数组数据。
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
10-18
主要介绍了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法,结合实例形式分析了JavaScript观察者模式概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
custom-event-polyfill-es6:为IE9 +填充CustomEvent构造函数
05-16
CustomEvent构造函数Polyfill 为IE9 +填充CustomEvent构造函数。 ES6模块化。 用法： import CustomEventPolyfill from './path/to/custom-event-polyfill.js';
es6.io::fire:入门文件供所有人使用ES6学习
04-12
本资源"es6.io::fire:入门文件供所有人使用ES6学习"提供了全面的学习材料，旨在帮助初学者快速掌握ES6的核心概念。** ### 1. **let 和 const 声明** ES6 引入了 `let` 和 `const` 作为新的变量声明方式，替代了传统...
es6 发布-订阅模式
aihe8259的博客
09-20 536
class Event { constructor() { //保存事件列表 this.eventList = []; } on(key,fn){ if ( !this.eventList[ key ] ){ this.eventList[ key ] = []; ...
js发布订阅者模式es6实现及其图解
一袋米要扛几楼_
07-04 2437
直接上代码 //主题 class Dep{ constructor(callback){ this.subs=[]; //每个主题更新数据的方法不一样，所以需要传进来 this.callback=callback; } addSub(sub){ this.subs.push(sub); return this; } notify(){...
ES6——数据劫持Proxy 代理器
cnailili的博客
06-06 357
标题ES6——数据劫持Proxy 今天的学习先从一个简单需求说起： 假设后端传给前端数据XXX，我们必须将数据XXX渲染到页面上，但是由于后端的数据 不停的改变，我们能否实现前端的页面的数据XXX跟着后端数据一起同步改变呢？ 这里我们用input输入框输入的不同结果来模拟后端不停数据的改变； 用一个div模拟前端数据的展示； <input id='input' type="text" name="" > //注意：仅作为模拟后端数据改变使用 <div id='div'></
es6 --- > 使用proxy对数据进行劫持
栗子好好吃的博客
10-24 375
说明: 数据劫持,简单的说就是在对数据进行操作(增删改查)时,触发的函数 下面想通过使用以下的形式来使用: let proxy = reactive({ name:'lz' }); proxy.name; // 获取 proxy.name = '栗子'; // 设置 delete proxy.name; // 删除 解决方案: proxy函数的2个参数 第一个参数: 接收一个对象(...
ES6-Proxy与数据劫持(12)
突维
10-19 466
随着前端界的空前繁荣，各种框架横空出世，包括各类mvvm框架百家争鸣，比如Anglar、Vue、React等等，它们最大的优点就是可以实现数据绑定，再也不需要手动进行DOM操作了，它们实现的原理也基本上是脏检查或数据劫持。我们先以Vue框架出发，探索其中数据劫持的奥秘。 Vue 2.0的版本所使用的数据劫持，说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情，举个栗子： var data = { name:'
ES6高阶（defineProperty，Proxy代理，数据劫持，es6模块化、exports 和 import，AMD /CMD模块化）
黎小小的博客
04-19 531
目录 1.课堂主题及知识点 2.defineProperty 3.proxy 4.es6模块化 4.1导出方式 4.1.1导出 方式一 ： 4.1.2导出方式二 关键字 "as" 4.1.3导出方式三 4.1.4导出方式四 4.2导入方式 4.2.1export导出的,命名要保持一致方式 4.2.2export导出的，命名可以自定义方式； 4.2.3通配符 "*"方式导入...
探索ES6函数式编程：JavaScript实战入门
此外，书中的Monad概念源于函数式编程的范畴理论，虽然对于初学者可能稍显复杂，但它是一种用于管理异步编程、错误处理和数据流控制的模式，如Maybe、Promise和Observable等，这些在处理现代JavaScript应用的复杂...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值