码迷,mamicode.com
首页 > 其他好文 > 详细

使用 Proxy | Reflect 做数据劫持 | 全局数据监听

时间:2020-04-27 13:23:53      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:func   lda   ast   this   使用   validator   传参数   oba   efault   

使用demo

import globalData from ./globalData

const {userInfo} = globalData
userInfo.watch(name,str=>{
    console.log(My name is:,str)
})
userInfo.name = liujinyu

 

globalData.js

import _event from "./event";

const validator = {
  set: function (target, prop, value) {
    target.emit(prop, value);
    return Reflect.set(...arguments);
  },
  get: function () {
    return Reflect.get(...arguments);
  },
};
const creat = (defaultData = {}) => {
  return new Proxy(
    Object.assign(Object.create(_event), defaultData),
    validator
  );
};

const globalData = {
  userInfo: creat({}),
};

export default globalData;

 

event.js

function Events() {
    // 放置所有添加的 监听事件
    this._events = {};
}
Events.prototype = {
    on: function (name, fn, ...argOrg) {
        // 必传参数验证
        if (!name || !fn) {
            throw new Error(`[Events TypeError] Failed to execute Events on ${name} : 2 arguments required`);
        }
        // 阻止重复添加相同的监听
        let fns = this._events[name] || [];
        if (fns.find((item) => item.fnOrg === fn)) {
            return;
        }
        this._events[name] = fns.concat({
            fn: (arg) => fn.apply(null, [...argOrg, ...arg]),
            fnOrg: fn
        });
    },
    watch() {
        this.on(...arguments);
    },
    once: function (name, fn, ...argOrg) {
        const onFn = (...arg) => {
            fn.apply(null, arg);
            this.off(name, onFn);
        };
        this.on(name, onFn, ...argOrg);
    },
    emit: function (name, ...arg) {
        (this._events[name] || []).forEach((item) => {
            item.fn(arg);
        });
    },
    off: function (name, fn) {
        // 无参数 : 清掉所有监听
        if (!arguments.length) {
            this._events = Object.create(null);
        }
        // 一个参数 : 清掉该事件名下所有监听
        if (arguments.length == 1) {
            delete this._events[name];
        }
        let fns = this._events[name];
        if (!fns || !fns.length) return;
        this._events[name] = (fns || []).filter((item) => {
            return item.fnOrg !== fn;
        });
    }
};
export default new Events();

源代码地址:https://github.com/liujinyu1029/util-bar/blob/master/importType/globalData.js

demo地址:https://github.com/liujinyu1029/util-bar/blob/master/demo/globalData.html

使用 Proxy | Reflect 做数据劫持 | 全局数据监听

标签:func   lda   ast   this   使用   validator   传参数   oba   efault   

原文地址:https://www.cnblogs.com/liujinyu/p/12785869.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!