利用 ES6 的字符串模板和 JQuery 简单理解 MVVM

kgbook 发布于2019-08-21 10:39 / 1670人阅读

摘要：把自己对这设计模式的理解整理并记录，仅作自己以后查询之用。是将视图和数据分离之后，通过将数据和视图进行绑定。一般是指模板，例如或者的字符串模板写法如下然后通过插入中对于便是，是此指定的。

把自己对这MVVM设计模式的理解整理并记录，仅作自己以后查询之用。

先说前端为什么需要 MVVM 或者 FLUX。在我看来，是为了保证不那么优秀的前端er在团队中写出不那么垃圾的代码，即使确实十分垃圾，也不会污染到团队中其他同事的代码，其它的设计模式应该也具有这种作用。

通过代码对比理解MVVM

MVVM 是 Model-View-ViewModel （双向数据绑定）的简写。不管是 MVVM 或者是 FLUX，都强调的是视图和数据的分离。MVVM 是将视图和数据分离之后，通过 ViewModel 将数据和视图进行绑定。

View 一般是指模板，例如 Handlerbars ,或者 ES6 的字符串模板,写法如下:

let message = "hello,world!!"
let demo = `

    ${message}

`

然后通过 jQuery 插入 body 中

  $("body").html(demo)

对于 demo 便是 View，message 是此 View 指定的 Model。由于在这个例子中并没有交互，仅仅只是为了说明视图和模型, 所以并没有 VM 部分。

下面的例子是一个完整的用 JQuery 实现的 MVVM 模式写法

//------ Model
let model = {
  value: 1,
  fns: [],
  set: function(v) {
    this.value = v
    this.fns.forEach(fn => fn.call(this, this.value))
  },
  on: function(fn) {
    this.fns.push(fn)
  }
};


//------ View
let demo = `

${model.value}



`

$("body").html(demo)

//------ ViewModel

$("input").on("keyup", function() {
    model.set($(this).val()|0)
})


$("button#button1").on("click", function() {
    model.set(model.value + 1)
})


model.on(function(value) {
  $("p").html(value)
  $("input").val(value)
})

在这个例子中， input输入的内容会实时显示在p标签中，而button被点击之后，也会对p标签的值和input标签的值都做+1处理；如果我们按照通常的 jQuery 来处理的话应该怎么做?

$("input").on("keyup", function() {
  let value = $(this).val()|0;
  $("p").html(value)
  $("input").val(value)
})

$("button").on("click", function() {
    let value = $("input").val()|0 + 1;
    $("p").html(value)
    $("input").val(value)
})

从这两段代码来看，并没有太大区别，甚至下面一段代码看起来更短。然而下面一段代码将视图和模型的处理写到了一起，试想一下，当我们想再增加一个 -1 的button 呢？对于 MVVM的模式，只要再写


$("button#button2").on("click", function() {
    model.set(model.value - 1)
})

即可。

而对于传统的方式，还需要先取得当前input值或p的值，然后再进行-1操作，最后还需要将input和p的innerHTML都修改一次。
随着DOM的增加，处理难度的差距越来越大，越来越不容易理解，修改一次，如履薄冰。

通过这个小例子可以看出 MVVM 相对传统的写法的最大的优势：

视图和模型的分离，视图可以独立模型进行开发；只需约定模型的结构即可。

双向数据绑定，视图和模型可以通过VM互相改变。

基于约定俗成的模式，可以将烂代码控制在最小范围内，也很难写出烂代码。

ps: 按照我的理解 Angular 中对于基础的VM进行了封装，所以在模板中绑定数据之后，数据更新，会自动更新视图。

GPU云服务器云服务器简单的php网站模板 es6字符串扩展云计算和大数据的理解简单理解超融合架构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85937.html

JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...

roadtogeek 2019-08-19 18:25 评论0 收藏0
前端练级攻略(第二部分)

摘要：是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分，你将更好地理解并使用它们。到目前为止，你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。本文是前端练级攻略第二部分，第一部分请看下面：前端练级攻略(第一部分) 在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如...

BWrong 2019-08-23 16:49 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0