c# mvvm模式获取当前窗口_基于 Vue 实现一个简历 MVVM

"app"><input type="text" value='Hello World' />div>

那么实现以上指令解析的步骤主要如下：

获取对应的#app元素转换成文档碎片(从DOM中移出#app下的所有子元素)识别出文档碎片中的绑定指令并重新修改该指令对应的DOM元素处理完文档碎片后重新渲染#app元素

HTML代码如下：

首先来看示例的使用

// 模型let model = {  message: 'Hello World',    getData(key) {    let val = this    let keys = key.split('.')    for(let i=0, len=keys.length; i      val = val[keys[i]]      if(!val && i !== len - 1) { throw new Error(`Cannot read property ${keys[i]} of undefined'`) }    }    return val  }}// 抽象视图(实现功能将b-value中对应的model.message转换成最终的value="Hello World")new View('#app', model)

在view.js中实现了#app下的元素转化成文档碎片以及对所有子元素进行属性遍历操作(用于binder.js的绑定属性解析)

class View {  constructor(el, model) {    this.model = model    // 获取需要处理的node节点    this.el = el.nodeType === Node.ELEMENT_NODE ? el : document.querySelector(el)    if(!this.el) return    // 将已有的el元素的所有子元素转成文档碎片    this.fragment = this.node2Fragment(this.el)    // 解析和处理绑定指令并修改文档碎片    this.parseFragment(this.fragment)    // 将文档碎片重新添加到dom树    this.el.appendChild(this.fragment)  }  /**    * @Desc:   将node节点转为文档碎片    * @Parm:   {Object} node Node节点    */    node2Fragment(node) {    let fragment = document.createDocumentFragment(),        child;    while(child = node.firstChild) {      // 给文档碎片添加节点时，该节点会自动从dom中删除      fragment.appendChild(child)    }        return fragment  }  /**    * @Desc:   解析文档碎片(在parseFragment中遍历的属性，需要在binder.parse中处理绑定指令的解析处理)    * @Parm:   {Object} fragment 文档碎片    */    parseFragment(fragment) {    // 类数组转化成数组进行遍历    for(let node of [].slice.call(fragment.childNodes)) {      if(node.nodeType !== Node.ELEMENT_NODE) continue      // 绑定视图指令解析      for(let attr of [].slice.call(node.attributes)) {        binder.parse(node, attr, this.model)        // 移除绑定属性        node.removeAttribute(attr.name)      }      // 遍历node节点树      if(node.childNodes && node.childNodes.length) this.parseFragment(node)    }  }}

接下来查看binder.js如何处理绑定指令，这里以b-value的解析为示例

(function(window, browser){  window.binder = {    /**      * @Desc:   判断是否是绑定属性      * @Parm:   {String} attr Node节点的属性      */      is(attr) {      return attr.includes('b-')    },    /**      * @Desc:   解析绑定指令     * @Parm:   {Object} attr html属性对象     *          {Object} node Node节点     *          {Object} model 数据     */      parse(node, attr, model) {   // 判断是否是绑定指令，不是则不对该属性进行处理      if(!this.is(attr.name)) return      // 获取model数据      this.model = model       // b-value = 'message'， 因此attr.value = 'message'      let bindValue = attr.value,       // 'b-value'.substring(2) = value          bindType = attr.name.substring(2)      // 绑定视图指令b-value处理      // 这里采用了命令模式      this[bindType](node, bindValue.trim())    },    /**      * @Desc:   值绑定处理(b-value)     * @Parm:   {Object} node Node节点     *          {String} key model的属性     */      value(node, key) {      this.update(node, key)    },    /**      * @Desc:   值绑定更新(b-value)     * @Parm:   {Object} node Node节点     *          {String} key model的属性     */      update(node, key) {   // this.model.getData是用于获取model对象的属性值   // 例如 model = { a : { b : 111 } }   //    // this.model.getData('a.b') = 111   // 从而可以将input元素更新为   browser.val(node, this.model.getData(key))    }  }})(window, browser)

在browser.js中使用外观模式对浏览器原生的事件以及DOM操作进行了再封装，从而可以做到浏览器的兼容处理等，这里只对b-value需要的DOM操作进行了封装处理，方便阅读

let browser = {  /**    * @Desc:   Node节点的value处理    * @Parm:   {Object} node Node节点      *          {String} val 节点的值   */    val(node, val) { // 将b-value转化成value，需要注意的是解析完后在view.js中会将b-value属性移除    node.value = val || ''    console.info(`[browser][val] -> node: `, node)    console.info(`[browser][val] -> val: `, val)  }}

至此MVVM示例中简化的「Model」 -> 「ViewModel」 (未实现数据监听功能)-> 「View」路走通，可以查看视图绑定指令的解析的demo。

ViewModel的实现

「ViewModel」(内部绑定器「Binder」)的作用不仅仅是实现了「Model」到「View」的自动同步(Sync Logic)逻辑(以上视图绑定指令的解析的实现只是实现了一个视图的绑定指令初始化，一旦「Model」变化，视图要更新的功能并没有实现)，还实现了「View」到「Model」的自动同步逻辑，从而最终实现了数据的双向绑定。

因此只要在视图绑定指令的解析的基础上增加「Model」的数据监听功能(数据变化更新视图)和「View」视图的input事件监听功能(监听视图从而更新相应的「Model」数据，注意「Model」的变化又会因为数据监听从而更新和「Model」相关的视图)就可以实现「View」和「Model」的双向绑定。同时需要注意的是，数据变化更新视图的过程需要使用发布/订阅模式，如果对流程不清晰，可以继续回看MVVM的结构设计。

在「简易视图指令的编译过程实现」的基础上进行修改，首先是HTML代码

mediator.js不再叙述，具体回看「中介者模式的实现」，view.js和browser.js也不再叙述，具体回看「简易视图指令的编译过程实现」。

示例的使用：

// 模型let model = {  message: 'Hello World',  setData(key, newVal) {    let val = this    let keys = key.split('.')    for(let i=0, len=keys.length; i      if(i 1) {        val = val[keys[i]]      } else {        val[keys[i]] = newVal      }    }    // console.log('[mvvm][setData] -> val: ', val)  },  getData(key) {    let val = this    let keys = key.split('.')    for(let i=0, len=keys.length; i      val = val[keys[i]]      if(!val && i !== len - 1) { throw new Error(`Cannot read property ${keys[i]} of undefined'`) }    }    return val  }}// 发布/订阅对象let mediator = new Mediator()// 数据劫持(监听model的变化，并发布model数据变化消息)hijack(model, mediator)// 抽象视图(实现绑定指令的解析，并订阅model数据的变化从而更新视图)new View('#app', model, mediator)// model -> view (会触发数据劫持的set函数，从而发布model变化，在binder中订阅model数据变化后会更新视图)model.message = 'Hello Ziyi233333222'

首先看下数据劫持，在** 数据劫持的实现「的基础上，增加了中介者对象的发布数据变化功能(在抽象视图的」Binder**中会订阅这个数据变化)

var hijack = (function() {  class Hijack {    /**      * @Desc:   数据劫持构造函数     * @Parm:   {Object} model 数据      *          {Object} mediator 发布订阅对象      */      constructor(model, mediator) {      this.model = model      this.mediator = mediator    }      /**      * @Desc:   model数据劫持     * @Parm:        *               */      hijackData() {      let { model, mediator } = this      for(let key of Object.keys(model)) {        let val = model[key]        Object.defineProperty(model, key, {          enumerable: true,          configurable: false,          get() {            return val          },          set(newVal) {            if(newVal === val) return            val = newVal            // 发布数据劫持的数据变化信息            console.log('[mediator][pub] -> key: ', key)            // 重点注意这里的通道，在最后的MVVM示例中和这里的实现不一样            mediator.pub(key)          }        })      }    }  }  return (model, mediator) => {    if(!model || typeof model !== 'object') return    new Hijack(model, mediator).hijackData()  }})()

接着重点来看binder.js中的实现

(function(window, browser){  window.binder = {    /**      * @Desc:   判断是否是绑定属性      * @Parm:   {String} attr Node节点的属性      */      is(attr) {      return attr.includes('b-')    },    /**      * @Desc:   解析绑定指令     * @Parm:   {Object} attr html属性对象     *          {Object} node Node节点     *          {Object} model 数据     *          {Object} mediator 中介者     */      parse(node, attr, model, mediator) {      if(!this.is(attr.name)) return      this.model = model       this.mediator = mediator      let bindValue = attr.value,          bindType = attr.name.substring(2)      // 绑定视图指令处理      this[bindType](node, bindValue.trim())    },        /**      * @Desc:   值绑定处理(b-value)     * @Parm:   {Object} node Node节点     *          {String} key model的属性     */      value(node, key) {      this.update(node, key)      // View -> ViewModel -> Model      // 监听用户的输入事件      browser.event.add(node, 'input', (e) => {        // 更新model        let newVal = browser.event.target(e).value        // 设置对应的model数据(因为进行了hijack(model))        // 因为进行了hijack(model)，对model进行了变化监听，因此会触发hijack中的set，从而触发set中的mediator.pub        this.model.setData(key, newVal)      })   // 一旦model变化，数据劫持会mediator.pub变化的数据        // 订阅数据变化更新视图(闭包)      this.mediator.sub(key, () => {        console.log('[mediator][sub] -> key: ', key)        console.log('[mediator][sub] -> node: ', node)        this.update(node, key)      })    },        /**      * @Desc:   值绑定更新(b-value)     * @Parm:   {Object} node Node节点     *          {String} key model的属性     */      update(node, key) {      browser.val(node, this.model.getData(key))    }  }})(window, browser)

最终实现了具有「viewModel」的MVVM简单实例，具体查看ViewModel的实现的demo。

MVVM的实现

在「ViewModel的实现」的基础上：

新增了b-text、b-html、b-on-*(事件监听)指令的解析代码封装更优雅，新增了MVVM类用于约束管理之前示例中零散的实例对象(建造者模式)hijack.js实现了对「Model」数据的深层次监听hijack.js中的发布和订阅的channel采用HTML属性中绑定的指令对应的值进行处理(例如b-value="a.b.c.d"，那么channel就是'a.b.c.d'，这里是将Vue的观察者模式改成中介者模式后的一种尝试，只是一种实现方式，当然采用观察者模式关联性更强，而采用中介者模式会更解耦)。browser.js中新增了事件监听的兼容处理、b-html和b-text等指令的DOM操作api等

由于篇幅太长了，这里就不过多做说明了，感兴趣的童鞋可以直接查看 https://github.com/ziyi2/mvvm/tree/master/mvvm，需要注意该示例中还存在一定的缺陷，例如「Model」的属性是一个对象，且该对象被重写时，发布和订阅维护的channels中未将旧的属性监听的channel移除处理。

结束语

欢迎关注公众号「前端试炼」，公众号平时会分享一些实用或者有意思的东西，发现代码之美。专注深度和最佳实践，希望打造一个高质量的公众号。偶尔还会分享一些摄影 ~

也可以扫码加我微信，拉你进交流划水聊天群，有看到好文章/代码都会发在群里。