前端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,看看可以玩成怎么样。

 

作者: 博主

Talk is cheap, show me the code!

发表评论

电子邮件地址不会被公开。

Captcha Code