• 前端笔记：使用Proxy实现响应式和双向数据绑定

    文章目录

    目的

    响应式和双向数据绑定功能可以降低数据和页面的耦合，可以简化开发逻辑。这些功能很多框架和JS库中都有，不过有些时候只是简单的页面来说使用框架等就有些复杂了。特别是有些应用场合下存储空间稀缺，框架这种动不动就几十几百K的大小还是有点难以接受的。

    借助于ES6中的Proxy机制可以实现简单的响应式和双向数据绑定功能，这篇文章将对此稍微进行介绍。

    Proxy

    Proxy 对象用于创建一个对象的代理，外界对该对象的访问，都必须先通过这层拦截，在这里可以对外界的操作进行改写。下面是个简单的演示：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        const obj = { 'naisu': 233 };
        const objProxy = new Proxy(obj, {
            // get方法用于拦截对象的属性读取操作
            get: function (target, property, receiver) {
                console.log(target); // 目标对象
                console.log(property); // 属性名
                console.log(receiver); // Proxy或者继承Proxy的对象
                return 'Hello Naisu!'; // 可以返回任何东西
            },
            // set方法用于拦截对象的属性设置操作
            set: function (target, property, value, receiver) {
                console.log(value); // 新属性值
                return true; // 返回true表示设置成功，false表示设置失败
            }
        });
        // 设置代理后就通过代理返回的 objProxy 对象来操作了
    script>
head>
<body>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    在这里插入图片描述

    上面是个Proxy最基础的使用演示了，可以看到不管是读取还是设置代理对象时都会触发相应的方法，我们可以在这个基础上实现响应式功能。

    Proxy更多说明可以参考下面链接：
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

    响应式

    下面是个利用Proxy实现响应式功能的简单演示：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
head>
<body>
    <button>Click Mebutton>
    <script>
        const btn = document.querySelector('button');

        const obj = { 'naisu': 233 };
        const handler = {
            get: function (target, property, receiver) {
                return target[property];
            },
            set: function (target, property, value, receiver) {
                target[property] = value;
                btn.innerText = `Naisu is ${target[property]}.`; // 值在改变的同时更新视图
                return true;
            }
            // 注意target属性操作使用[]
        };
        const objProxy = new Proxy(obj, handler);

        btn.onclick = () => {
            objProxy.naisu = objProxy.naisu + 1; // 在真正操作时只要关系数据就行
        };
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    设置响应式的好处是这之后操作时只要关系数据本身即可，不用再因为数据发生改变而手动去操作视图了。

    双向数据绑定

    双向数据绑定最常用的情况就是指页面中输入框中用户输入变化时其它控件中内容也跟着变化。对于输入框来说只要监听输入事件做出相应操作即可。下面是个简单的演示：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
head>
<body>
    <div>Naisu is 233.div>
    <input type="text">
    <script>
        const div = document.querySelector('div');

        const obj = { 'naisu': 233 };
        const handler = {
            get: function (target, property, receiver) {
                return target[property];
            },
            set: function (target, property, value, receiver) {
                target[property] = value;
                div.innerText = `Naisu is ${target[property]}.`; // 值在改变的同时更新视图
                return true;
            }
        };
        const objProxy = new Proxy(obj, handler);

        const txt = document.querySelector('input[type="text"]');
        txt.oninput = (el) => {
            objProxy.naisu = el.target.value; // 输入事件中改变代理对象属性值
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述

    总结

    总的来说使用Proxy实现响应式和双向数据绑定原理上并不复杂，只是简单用用的话这个还是非常不错的，可以实现程序逻辑上视图和业务的分离。

  • 相关阅读:
    LeetCode·每日一题·1678.设计 Goal 解析器·双指针
    C#冒泡排序算法
    LC-220. 存在重复元素 III（滑动窗口+二分，桶排序）
    unity save load系统 快速搭建
    电脑文档数据恢复？别急，一招教你快速找回丢失数据！
    Kotlin脚本介绍
    k8s集群环境搭建
    49、C++/友元、常成员函数和常对象、运算符重载学习20240314
    Openssl X509 v3 AuthorityKeyIdentifier实验与逻辑分析
    asp毕业设计——基于asp+access的校园新闻发布管理系统设计与实现（毕业论文+程序源码）——新闻发布管理系统
  • 原文地址：https://blog.csdn.net/Naisu_kun/article/details/127754579