js实现简易watch功能(项目实战)

   最近笔者在写项目的时候遇到一些问题,因为项目需求要写一个h5嵌入到小程序里面,h5主要用到了leaflet和uni的sdk，那有没有办法让这两部分实现通信呢？

 首先是uni的部分

document.addEventListener('UniAppJSBridgeReady', function () {
   ... // 此处是执行的uni代码部分,可以执行部分uni的方法,可以监听dom事件
})

然后是地图部分

                                label.on('click', function (e) {
                                    // 这里执行地图标注点击事件
              
                                });

那有没有方法在点击标注的时候执行uni的方法呢?

  我首先想到的是通过函数执行，好家伙根本定义不了函数。然后就只能通过监听来执行。好开始行动

// 目标对象，我们希望监视它的变化
 let userData = { name: "Alice", age: 30 };

对象里面的内容随便定义就行，我们的目标是获得一个变化来执行事件，现在大的要来了

        // 执行uniapp的操作
        document.addEventListener('UniAppJSBridgeReady', function () {
            // 使用Proxy包装目标对象
            userData = new Proxy(userData, {
                set(target, prop, value) {
                    // 在值改变时执行的逻辑
                    console.log(`属性 '${prop}' 正在更改为 ${value}`);
                    target[prop] = value;
                    uni.navigateTo({
                       url:'' //这里放路由地址或者其他的uni操作
                    })
                }
            });
        });

这里我们通过Proxy来监听目标对象的变化来监听。

好又回到我们之前的地图操作

                                label.on('click', function (e) {
                                        userData.name = "test";
                                    }
                                });

这里随便设置新值就能执行到uni的操作了,可以加上自己的业务来加值