如何用JS代理对象Proxy实现长尾词的数据驱动视图？

本文共计928个文字，预计阅读时间需要4分钟。

目录+引言+Proxy对象是什么+使用Proxy写一个简单的数据驱动视图+引言+Proxy对象是一种特殊的对象，可以拦截对目标对象的操作。使用Proxy可以写一个简单的数据驱动视图。

目录

• 引言
• Proxy对象是什么
• 使用Proxy写一个简单的数据驱动视图

引言

上大学的时候，最流行的框架是JQuery，它是事件驱动类型的，也就是说，当一个数据与DOM的某个内容相关联的时候，我需要在这个数据改变之后，去操作DOM来进行同步：

<div id="data">数据</div>

var data = "数据" // 通过某种事件数据发生了变化 data = "新数据" $("#data").text = data

简单的交互中，这个方式看起来还是方便，但是一旦交互庞大起来，代码就臃肿得不行。

而在我快毕业的时候Angular,Vue,React兴起，我们发现了一种新的方式——数据驱动，也就是说，通过DOM与数据的“绑定”我们可以直接修改数据，DOM内容直接就出现了变化。

<div>{{data}}</div>

var data = "数据" // ...某种方式进行了绑定 data = "新数据"

DOM中的内容直接就变成了新数据。使用起来非常方便，代码也比较简洁，在当时看来感觉很神奇。

不同的数据驱动的框架，其绑定原理和过程都各有不同，并且都比较复杂。