实现一个小型的watcher

梦里梦外; 2023-02-13 14:52 13阅读 0赞

*  watch.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script src="watch.js"></script>
        <script> let vm = new Watcher({ data:{ a: 1, b: 3 }, watch:{ a(val, oldVal){ this.b = val; console.log(val, oldVal) } } }) vm.a = 2; </script>
    </body>
    </html>

class Watcher{ 
        constructor(opts) { 
            this.$data = this.getBaseType(opts.data) == 'Object' ? opts.data : { }
            this.$watch = this.getBaseType(opts.watch) == 'Object' ? opts.watch : { }
            for(let key in opts.data){ 
                this.setData(key)
            }
        }
        getBaseType(target){ 
            return Object.prototype.toString.call(target).slice(8,-1)
        }
        setData(_key){ 
            Object.defineProperty(this, _key, { 
                get:function () { 
                    return this.$data[_key]
                },
                set:function (newVal) { 
                    const oldVal = this.$data[_key];
                    if(oldVal == newVal){ 
                        return oldVal
                    }
                    else{ 
                        this.$data[_key] = newVal;
                        this.$watch[_key] && typeof this.$watch[_key] == 'function' && (
                            this.$watch[_key].call(this, newVal, oldVal)
                        )
                    }
                    return newVal;
                }
            })
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关一个小型的无线路由器 Linux 系统OpenWRT

*OpenWRT** \- ( [http://www.openwrt.org][http_www.openwrt.org]) 开发板: 十几种市面上很...

爱被打了一巴掌/ 2024年04月19日 13:57/ 0 赞/ 76 阅读

相关基于C语言实现的一个小型编译程序

基于 C 语言实现一个小型编译程序本次课程设计任务实现一个小型编译程序输入:高级语言源程序输出:四元式程序(必做

朱雀/ 2024年04月07日 13:18/ 0 赞/ 82 阅读

相关实现一个小型的watcher

watch.html <!DOCTYPE html> <html lang="en"> <head> <meta charset

梦里梦外;/ 2023年02月13日 14:52/ 0 赞/ 14 阅读

相关 webpack-如何写一个小型插件？

主要记录一下加载的过程 markdown-loader,可以在代码中直接导入md文件，一般md文件被解析为html文件后呈现页面上， ![在这里插入图片描述][20201

灰太狼/ 2022年12月26日 13:26/ 0 赞/ 164 阅读

相关 python制作一个小型翻译软件

from urllib import parse,request import requests,re,execjs,json,time 英语

矫情吗；*/ 2022年12月03日 12:53/ 0 赞/ 191 阅读

相关 watcher事件

zookeeper主要是为了统一分布式系统中各个节点的工作状态，在资源冲突的情况下协调提供节点资源抢占，提供给每个节点了解整个集群所处状态的途径。这一切的实现都依赖于zooke

r囧r小猫/ 2022年09月05日 14:55/ 0 赞/ 177 阅读

相关如何胜任一个小型公司的技术总监？

技术总监应该做哪些事情？一个人精力有限，开发、带人、培训、管理如何权衡？怎么才能做到最好？本文作者韩伟，他将会和我们分享他的个人经验，韩伟就职于腾讯互动娱乐研发部，本文授权转载

布满荆棘的人生/ 2022年07月14日 09:56/ 0 赞/ 252 阅读

相关小型多任务操作系统miniOS的实现

关于miniOS的介绍 [http://blog.csdn.net/mr\_raptor/article/details/7338051][http_blog.csdn.ne

桃扇骨/ 2022年06月10日 00:38/ 0 赞/ 274 阅读

相关搭建一个小型的证券知识图谱

本项目主要实现逻辑如下： 1. 数据获取 2. 数据处理 3. 导入neo4j 本项目需要用到两种数据源：一种是公司董事的信息，另一种是股票的行业以及概念信息。

客官°小女子只卖身不卖艺/ 2022年05月15日 13:56/ 0 赞/ 227 阅读

相关 zk的watcher机制的实现

[zk的watcher机制的实现][zk_watcher] 目录 [ZooKeeper Watcher 机制][ZooKeeper Watcher]

﹏ヽ暗。殇╰゛Y/ 2022年04月24日 09:56/ 0 赞/ 202 阅读