MVVM双向绑定的实现代码-创新互联

这篇文章主要记录学习 JS 双向绑定过程中的一些概念与具体的实现

MVVM 具体概念

MVVM 中有一些概念是通用的，具体如下

Directive （指令）

自定义的执行函数，例如 Vue 中的 v-click、v-bind 等。这些函数封装了 DOM 的一些基本可复用函数API。

Filter （过滤器）

用户希望对传入的初始数据进行处理，然后将处理结果交给 Directive 或者下一个 Filter。例如：v-bind="time | formatTime"。formatTime 是将 time 转换成指定格式的 Filter 函数。

表达式

类似前端普通的页面模板表达式，作用是控制页面内容安装具体的条件显示。例如：if...else 等

ViewModel

传入的 Model 数据在内存中存放，提供一些基本的操作 API 给开发者，使其能够对数据进行读取与修改

双向绑定（数据变更检测）

View 层的变化改变 Model：通过给元素添加 onchange 事件来触发对 Model 数据进行修改

Model 层的变化改变 View：

1. 手动触发绑定
2. 脏数据检测
3. 对象劫持
4. Proxy

实现方式

手动触发绑定

即 Model 对象改变之后，需要显示的去触发 View 的更新

首先编写 HTML 页面

Two way binding

编写实现 MVVM 的 代码

// Manual trigger
let elems = [document.getElementById('el'), document.getElementById('input')]
// 数据 Model
let data = {
 value: 'hello'
}

// 定义 Directive
let directive = {
 text: function(text) {
  this.innerHTML = text
 },
 value: function(value) {
  this.setAttribute('value', value)
  this.value = value
 }
}

// 扫描所有的元素
function scan() {
 // 扫描带指令的节点属性
 for (let elem of elems) {
  elem.directive = []
  for (let attr of elem.attributes) {
   if (attr.nodeName.indexOf('q-') >= 0) {
    directive[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue])
    elem.directive.push(attr.nodeName.slice(2))
   }
  }
 }
}

// ViewModel 更新函数
function ViewModelSet(key, value) {
 // 修改数据对象后
 data[key] = value
 // 手动地去触发 View 的修改
 scan()
}

// View 绑定监听
elems[1].addEventListener('keyup', function(e) {
 ViewModelSet('value', e.target.value)
}, false)

// -------- 程序执行 -------
scan()
setTimeout(() => {
 ViewModelSet('value', 'hello world')
}, 1000);

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。