前端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,看看可以玩出什么花样。

 

作者: 博主

Talk is cheap, show me the code!

发表评论

邮箱地址不会被公开。

Captcha Code