手写侦听器

ManongChen0821

已于 2022-12-07 16:33:34 修改

阅读量149

点赞数

文章标签： javascript 前端开发语言 vue.js

于 2022-05-02 17:20:51 首次发布

本文链接：https://blog.csdn.net/weixin_46306370/article/details/124543445

版权

export class Observer { // 侦听器
    constructor(value) {
        this.value = value;
        if(Array.isArray(value)){//数组的操作
            console.log(value.toString());
        }else {//对象的操作
            this.walk(value);
        }
    }
    walk(obj) {
        let keys = Object.keys(obj);
        for (let index = 0; index < keys.length; index++) {
            const key = keys[index];
            defineReactive(obj,key);
        }
    }
}
// 循环 让对象的每一个属性都变成可检测的
function defineReactive(obj,key,val) {
    if(arguments.length === 2) {
        val = obj[key];
    }
    if(typeof val === 'object'){
        new Observer(val)
    }
    Object.defineProperty(obj,key,{
        get(){
            console.log(`${key}属性被读取了`);
            return val;
        },
        set(newVal) {
        	if(val === newVal)return;
            console.log(`${key}属性被修改了,新的值为${newVal}`);
            val = newVal;
        }
    })
}

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document11</title>
</head>
<body>
    <script type="module">
        import { Observer } from './observer.js';
        let obj = {
            name: 'chen',
            age: 18,
            demo: {
                name: 'zhang',
                age: 20
            }
        };
        let obs = new Observer(obj);
        // console.log(obs.value.name);
        // obs.value.age = 19;

        console.log(obs.value.demo.name);
        obs.value.demo.age = 21;
    </script>
</body>
</html>

如果启动报错Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension，本地jsp没有通过服务器直接ajax中用jsonp访问本地js，使用file协议，ajax跨域只支持这些协议框架：http,https,data,chrome（Chrome浏览器）,chrome-extension（Chrome扩展插件），chrome-extension-resource（Chrome扩展资源）

解决办法：VsCode安装插件 live server，安装完毕后重启vscode，点击右下角go live启动服务器，会自动运行系统默认的浏览器
在这里插入图片描述