html上手动实现变量绑定

背景

用electron封装网页微信时,出现了下载文件时不容易看到进度的问题.
于是想实现一个模板,然后绑定变量,更新下载进度.
但不想麻烦太多去使用复杂的框架.
因此手动实现.

方案

1. 用Proxy监控变量的变化,并随时调用渲染用的函数
2. 渲染用的函数替换页面上的内容

代码

<div id="app">
  姓名：{{name}}
  <br> 年龄：{{age}}
</div>

const el = document.getElementById('app');
const originalTemplate = el.innerHTML;
let _data = {
    name: '_BuzzLy',
    age: 25
};

let data = new Proxy(_data, {
    // 如今的proxy不仅需要4个参数,还需要返回boolean
    set(obj, name, value, receiver) {
        obj[name] = value;
        render();
        return true             // 返回true表示设置成功
    }
});

render();

function render() {
    el.innerHTML = originalTemplate.replace(/\{\{\w+\}\}/g, str => {
        str = str.substring(2, str.length - 2);
        return _data[str];
    });
}


data.name = '张三'
data.age = 20

参考

1. 数据单向绑定的参考