现代前端技术（二）

[plh97]

第四章：现代前端交互框架

常见dom API

• 节点查询：getElementById,getElementByName,,,getElementsByClassName,,,getElementByTagName,,,querySelector,,,querySelectorAll
• 节点创建：createElement，createDocumentFragment，createTextNode，cloneNode
• 节点修改：appendChild。replaceChild，removeChild，insertBefore，innerHTML
• 节点关系：parentNode，previousSibling，childNodes
• 节点属性：innerHTML，attribute，getAttribute，setAttribute，getComputedStyle
• 内容加载：XMLHttpRequest，ActiveX

MVC模式

将Model和View和Controller抽离出来。一般来说就是单页面用用SPA，通过history来push

history.pushState({page: 'A'},'Page a', 'sdfa.html')

一般mvc模式，就是一种开发设计模式，基本思路就是将dom交互内容分为数据模型，视图区，事件控制函数，三部分，并分别对三部分统一管理，Model用来存放请求的数据结果和数据对象，，view用于页面的DOM更新与修改，Controller则用于根据前端路由条件，例如不同hash路由，来调用不同的model来给view渲染不同的数据内容，

<div id="A" onclick="A.event.change"></div>
// 可能有一个公用的Component函数
let compoennt = new Component();

let A = component.extend({
  $el: document.getelementById("A");
  model: {
    text: "View渲染完成"
  },
  view(data) {
    let tpl = '<input id="input" type="text" value="{{ text }}" id="showText">{{text}}</span>';
    
    // 调用模板渲染数据获取HTML片段
    let html = render(tpl, data);
    this.$el.innerHTML = html;
  },
  controller(){
    // 调用model传入到，view中渲染内容，
    this.view(self.model);
    
    // 用户操作一般通过hash触发Controller改变Model和view
    $('window').on('hashchange', ()=>{
      this.model.text = location.hash;
      this.view(self.model);
    });

      // 点击事件可以直接触发Model改变并重新渲染View
      this.event['change'] = () => {
         this.model.text = '最新的View渲染完成';
         this.view(this.model);
      }
   }
})

当model或者view逻辑复杂之后，可以考虑分文件处理，但是用户操作dom主要通过Controller来控制，但是Controlller只做修改指令的分发，数据渲染主要由view完成。

MVP模式

MVP（Model-View-Presenter）可以跟MVC对照起来看，M就是Model，V就是View，而P则是Presenter，他与Controller类似，但是不同的是，MVP是双向绑定，当用户修改了view的input，输入东西的时候，view通知Presenter来进行Model的修改，区别在于，view和Model不发生个交互，view和Presenter是双向绑定的。view会触发presenter的改变，presenter动作也会改变view，视图区和model不会发生交互。

<div id="A" onclick="A.event.change"></div>
// 可能有一个公用的Component函数
let compoennt = new Component();

let A = component.extend({
  $el: document.getelementById("A");
  model: {
    text: "View渲染完成"
  },
  view: '<input id="input" type="text" value="{{ text }}" id="showText">{{text}}</span>',
  presenter(){
    // 调用魔漫函数渲染html片段，
    let html = render(self.view, this.model);
    this.$el.innerHTML = html;
    
     // View 上的改变将通知Presenter改变Model和其他view
     $('input').on('change', ()=>{
        this.model.text = this.value;
        html = render('{{text}}', this.model);
        $('#showText').html(html);
     });

      // Controller 上的操作处理和MVC的方式类似
      this.event['change'] = () => {
         this.model.text = '最新的View渲染完成'
         html = render('{{text}}', this.model);
         $('#showText').html(html);
      }
   }
})

上面代码就知道啦，view和model主要提供视图模板和数据而不做任何逻辑处理，这是有好处的，因为这样我们只需要关注Presenter上面的逻辑操作就好了，他的职责清晰，但同时他的代码量剧增。

前端MVVM模式

MVVM则可以认为是一个自动化的MVP框架，并且使用ViewModel替代了Presenter，即数据绑定不需要我们主动去做了，而是由ViewModel去主动完成它，，代码如下，参照vue代码

<div class="home">
  <input type="text" v-model="msg" name="" id="">
  {{msg}}
</div>
export default {
  store,
  data() {
    return {
      msg:"hihih"
    };
  },
  methods: {
    change: function(val) {
      this.msg = val;
    }
  }
};

是不是简单好多，vue提供了v-model语法糖来便捷做双向绑定，

MVVM数据脏检查机制

比如Angulars通过检查脏数据来进行View层操作更行的，我们不针对某个框架来分析，当某个对象的属性发生变化的时候，通过ViewModel对象的某个属性变化时候，查询变化的相关值，找出它的相关对象，对该元素重新渲染，

前端数据对象劫持（Hijacking）(2种数据代理和数据绑定)

目测我也没懂

• Object.defineProperty的set和get，通过这种，直接通过等号修改变量即可。
• Proxy的set和get，通过这种，直接通过等号修改变量即可。但是他们两个有什么不同呢？

谁知道呢，反正我在网址后面加了discord。

关于Vritual DOM交互模式

MVVM的前端交互大大提高了编程效率，让我们把关注点从view层转移到了Model层，说到虚拟dom，必须得关注的就是按需渲染，只重新渲染你改变的部分，

虚拟dom的核心实现需要以下步骤

• 创建Virtual DOM