前端mvvm框架底层学习（四、json对象+数组处理）

前言

上一篇《前端mvvm框架学习（三、json对象处理）》介绍了我们如何实现一个最简单的MVVM处理对象数据的例子。但如果要处理的数据是json对象里面包含数组呢？这一篇我们尝试来处理json对象里面包含数组的情况，怎么简单怎么来吧，我们还是引用lodash库和还是用传统的方式拼接html字符串的方式来处理View层吧，还是使用模版函数来处理，直接用lodash的template函数，但这次我们跟上次有点不一样，需要在模版里面执行javascript来循环生成html。

接着上一篇的代码，添加对json对象中的数组的处理，使用lodash模版函数生成html串

See the Pen MVVM Object with Array inside by Nelson Kuang (@nelsonkuang) on CodePen
1

VIEW层代码：

XX Middle School

 	
Class 18
 	
Grade 03

Courses



时间
周一
周二
周三
周四
周五

MODEL层代码 ：

var newPerson = {
// 其他定义...
  school: {
    name: 'XX Middle School',
    classNumber: '18',
    grade: '03',
    courses: [
       // {time: 'xx:xx-xx:xx',activity: '第一节',type: 'regular', Monday: '语文', Tuesday: '数学', Wednesday: '英语', Thursday: '化学', Friday: '物理'}
      ]
  }
};

VIEWMODEL层代码：

// －－－－－－－－－ viewModel层 －－－－－－－－－－
function updateSchool(newVal, oldVal) { // 传统的拼接html字符串的方式实现更新视图View
  console.log(newVal)
  var compiled = _.template('<h3><% name %></h3><ul><li>Class <% classNumber %></li><li>Grade <% grade %></li></ul><h3>Courses</h3><table><thead><tr><th>时间</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr></thead><tbody><% _.forEach(courses, function(course) { %><tr><th><%- course.activity %><br><%- course.time %></th><td><%- course.Monday %></td><td><%- course.Tuesday %></td><td><%- course.Wednesday %></td><td><%- course.Thursday %></td><td><%- course.Friday %></td></tr><% }); %></tbody></table>')
  document.querySelector('#school').innerHTML = compiled(newVal)
}
Object.defineProperty(newPerson, 'school', {
    set: function (x) {
        if (!_.isEqual(x, this.oldPropValue)) { // 数组或者对象的比较与普通的数值的比较不一样，要深度遍历进行比较
          console.log(x)
          updateSchool(x, this.oldPropValue)
          this.oldPropValue = x
        } else {
            console.log('school的值没变')
        }
    },
    get: function () {
        console.log('in property get accessor');
        return this.oldPropValue;
    },
    enumerable: true,
    configurable: true
});

现在尝试更新MODEL层数据，VIEW层应该就可以自动更新了。

    newPerson.school = {
      name: 'YY Middle School',
      classNumber: '10',
      grade: '01',
      courses: [
         {time: '8:00-8:45',activity: '第一节',type: 'regular', Monday: '语文', Tuesday: '数学', Wednesday: '英语', Thursday: '化学', Friday: '物理'},
         {time: '8:55-9:45',activity: '第二节',type: 'regular', Monday: '物理', Tuesday: '数学', Wednesday: '数学', Thursday: '数学', Friday: '数学'},
         {time: '10:00-10:45',activity: '第三节',type: 'regular', Monday: '化学', Tuesday: '英语', Wednesday: '英语', Thursday: '英语', Friday: '英语'},
         {time: '11:05-11:50',activity: '第四节',type: 'regular', Monday: '数学', Tuesday: '语文', Wednesday: '语文', Thursday: '语文', Friday: '语文'},
         {time: '14:00-14:45',activity: '第五节',type: 'regular', Monday: '英语', Tuesday: '英语', Wednesday: '英语', Thursday: '物理', Friday: '数学'},
         {time: '14:55-15:40',activity: '第六节',type: 'regular', Monday: '化学', Tuesday: '物理', Wednesday: '物理', Thursday: '英语', Friday: '物理'},
         {time: '15:50-16:35',activity: '第七节',type: 'regular', Monday: '物理', Tuesday: '英语', Wednesday: '语文', Thursday: '物理', Friday: '数学'}
        ]
    }

结束语

通过上面的demo我们可以知道，处理带数组的json对象其实在实际项目中也是会经常会遇到的，上面我们开始使用在模版函数的字符串里嵌入可执行Js代码的方式处理方式来处理并生成html做出MVVM的风格，这样实现其实还会有很多的问题的，因为每次修改一两个小的数据，整个Dom结构都要重新被生成及替换，性能大打折扣（哈哈，有些人第一时间会想起传说中的virtual dom及diff算法）；还有，如果我们想在页面渲染过程中加一些事件呢（哈哈，有些人第一时间会想到，我要挂载一些传说中的生命周期期的函数）？好吧，慢慢来，我不会先入为主，那些高级的东西现在还用不上，这里准备随意玩，下一篇我们继续来优化上面的Demo，看看可以玩出什么花样。