前端mvvm框架底层学习（三、json对象处理）

前言

上一篇《前端mvvm框架学习（二、数组处理）》介绍了我们如何实现一个最简单的MVVM处理数组数据的例子。但如果要处理的数据是一个json对象呢？这一篇我们尝试来处理json对象，怎么简单怎么来吧，我们还是引用lodash库和还是用传统的方式拼接html字符串的方式来处理View层吧，但本次我们直接高级一点，使用模版处理直接用lodash的template函数。

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

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

VIEW层代码：

<div id="school">
  <h3>XX Middle School</h3>
  <ul>
    <li>Class 18</li>
    <li>Grade 03</li>
  </ul>
</div>

MODEL层代码 ：

var newPerson = {
  // ...其实属性
  school: {
    name: 'XX Middle School',
    classNumber: '18',
    grade: '03'
  }
};

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>')
  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'
    }

结束语

通过上面的demo我们可以知道，处理json对象其实在实际项目中是会经常会遇到的，上面我们开始使用比较高级的模版函数的处理方式来做出MVVM的风格，这样实现肯定还会有很多的问题的，比较我的json对象里面是包含数组的，这样该如何处理呢？其实模版函数其实可以处理对象中的数组的，下一篇我们继续来优化上面的Demo，看看可以玩成怎么样。