非常简单的js双向数据绑定框架（三）：js model黑科技

最新推荐文章于 2024-08-02 16:22:31 发布

VictorIsildur

最新推荐文章于 2024-08-02 16:22:31 发布

阅读量1.4w

点赞数 2

分类专栏： javascript 前端文章标签： model javascript mvvm 双向数据绑定 avalon

本文链接：https://blog.csdn.net/vctisildur/article/details/46454755

版权

本文探讨了一种实现js双向数据绑定的简单框架，通过劫持getter和setter实现。目标是模仿angularjs的便捷性，使html和js能够轻松交互。文章详细介绍了框架的两个主要部分：vModel对象的创建和DOM遍历。第一版实现中存在无事件支持的问题，第二版引入了事件注册。最后，作者计划重构代码并上传到github。

摘要由CSDN通过智能技术生成

初衷

之前我们要在js域更新model，需要这样：

model.set('name', 'sub');

这实在太土了。。。
我们希望像angularjs一样，直接：

$scope.name = 'sub';

然后bong, 视图就会更新！这样的黑科技必定是极好的。

目标

完成model更新黑科技
200行以内完成
我们希望html长成这样：

<head>
    <title>avalon like mvvm framework</title>
    <script src="frame.js"></script>
    <script src="app.js"></script>
  </head>
  <body isi-controller="