前端mvvm框架底层学习(一、我们来实现一个最简单的MVVM)

前言

前端mvvm框架好多,这个概念大家都知道是由后端开发那边传过来的。后端开发最开始是比较经典的MVC框架,当然前端也有MVC框架,比如比较经典的backbone.js就是比较经典的前端MVC框架(都好几年没更新了,估计没啥用户了),后面微软在其前端应用上首次提出了mvvm框架,再到后来我们当前最热的前端框架Vue.js。在这系统的文章中,我们不会由复杂的vue.js着手来学习,我们先由简单的概念开始,一步一个demo来学习前端mvvm到底是什么鬼?

传统的前端开发方式

传统的前端开发思路是jQuery一招鲜,使用jQuery可以直接去修改Dom节点内容,Dom节点操作优先。如果需要更新某些节点,直接去使用其强大的选择器修改就是了,如下面的demo:


See the Pen jQuery Dom by Nelson Kuang (@nelsonkuang) on CodePen
1

html代码如下:

<h2>The person below will change in <span id='timer'>5</span> seconds</h2>
<div>Name: <span id="name">Nelson Kuang</span></div>
<div>Age: <span id="age">18</span></div>

js代码如下:

$(function(){
  var newPerson = {
    name: 'Gary Li',
    age: 20
  }
  setTimeout(function(){
    // 传统jQuery方式操作Dom
    $('#name').html(newPerson.name)
    $('#age').html(newPerson.age)
  }, 5000)
})

使用MVVM框架的开发方式

mvvm框架

使用mvvm的方式如何呢?其开发思路与传统的Dom节点优先不一样,mvvm操作是数据驱动,数据操作优先,即繁琐的Dom节点操作早已被封装好到ViewModel里面,我们只需关注于数据层Model的操作层面。如下面Demo – 我们来实现一个最简单的前端mvvm框架:


See the Pen MVVM WAY by Nelson Kuang (@nelsonkuang) on CodePen
1

View层代码如下:

<h2>The person below will change in <span id='timer'>5</span> seconds</h2>
<!-- 下面是 mvvm 中的 View层 -->
<!-- View层 start -->
<div>Name: <span id="name">Nelson Kuang</span></div>
<div>Age: <span id="age">18</span></div>
<!-- View层 end -->

Model层代码如下 :

// --------- Model层 ----------
var newPerson = {
  name: 'Nelson Kuang',
  age: 18
};

ViewModel层代码如下,给数据绑定事件的方式除了Object.defineProperty其实还可以用Es5中的get/set关键字,这里我们先用Object.defineProperty来做Demo:

// --------- viewModel层 ----------
Object.defineProperty(newPerson, 'name', {
    set: function (x) {
        if (x !== this.oldPropValue) {
            document.querySelector('#name').innerHTML = x
            this.oldPropValue = x;
        } else {
            console.log('name的值没变')
        }
    },
    get: function () {
        console.log('in property get accessor');
        return this.oldPropValue;
    },
    enumerable: true,
    configurable: true
});
Object.defineProperty(newPerson, 'age', {
    set: function (x) {
        if (x !== this.oldPropValue) {
            document.querySelector('#age').innerHTML = x
            this.oldPropValue = x;
        } else {
            console.log('age的值没变')
        }
    },
    get: function () {
        console.log('in property get accessor');
        return this.oldPropValue;
    },
    enumerable: true,
    configurable: true
});

如下面代码,现在尝试更新Model层数据,View层应该就可以自动更新了。

  setTimeout(function(){
    // mvvm 数据驱动开发方式
    newPerson.name = 'Gary Li'
    newPerson.age = 20
  }, 5000)

结束语

对比了上面的传统的jQuery的方式来开发与MVVM方式来开发的Demo,相信大家对前端开发方式的转变有了更好的理解,为什么要这样搞呢,因为传统的频繁操作Dom节点的开发方式搞小一点的项目还可以,但当项目复杂度高一点点的话,就会出现一系列的问题,如频繁操作Dom严重影响页面性能,代码管理混乱及难以维护等。下一节我们将更加深入一点点来完善上面的Demo。

作者: 博主

Talk is cheap, show me the code!

发表评论

邮箱地址不会被公开。

Captcha Code