前端mvvm框架底层学习(五、json对象+简单css及style处理)

前言

上一篇《前端mvvm框架学习(四、json对象+数组处理)》介绍了我们如何实现一个简单的MVVM处理内含数组对象数据的例子。真实项目中,我们要处理的内容其实不只是数据,还有css及style样式处理,怎么简单怎么来吧,我们还是引用lodash库和还是用传统的方式拼接html字符串的方式来处理View层吧,还是使用模版函数来处理,直接用lodash的template函数,然后我们引入了virtual node虚拟节点的概念,专门用来处理后期样式处理。

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


See the Pen MVVM Object with Style and ClassNames by Nelson Kuang (@nelsonkuang) on CodePen
1

VIEW层代码:

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

MODEL层代码 :

// --------- Model层 ----------
var newPerson = {
  school: {
    name: "XX Middle School",
    classNumber: "18",
    grade: "03",
    vitualNode: {
      selector: "#school"
    }
  }
};

VIEWMODEL层代码:

// --------- viewModel层 ----------
function updateSchool(newVal, oldVal) {
  var el = document.querySelector(newVal.vitualNode.selector || "#school")
  // 传统的拼接html字符串的方式实现更新视图View
  var compiled = _.template(
    "
<h3>${ name }</h3>
<ul>
<li>Class ${ classNumber }</li>
<li>Grade ${ grade }</li>
</ul>

"
  );
  el.innerHTML = compiled(newVal)
  if (newVal.vitualNode.data) {
    newVal.vitualNode.data.classNames &&
      (el.className = newVal.vitualNode.data.classNames) // className处理
    if (newVal.vitualNode.data.style) {
      Object.keys(newVal.vitualNode.data.style).forEach(function(key) { // style处理
        el.style[key] = newVal.vitualNode.data.style[key]
      });
    }
  }
}
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层应该就可以自动更新了。

setTimeout(function() {
  newPerson.school = {
    name: "YY Middle School",
    classNumber: "10",
    grade: "01",
    vitualNode: { // 引入了Virtual Node概念
      selector: "#school",
      data: {
        classNames: "school school--yellow",
        style: {
          textShadow:
            "3px 3px 3px #720005, -3px -3px 3px #720005,3px 0 3px #720005,0 3px 3px #720005,0 -3px 3px #720005, -3px 0 3px #720005",
          borderRadius: "10px"
        }
      }
    }
  };
}, 5000);

结束语

通过上面的demo我们可以知道,处理带css或者style样式的json对象其实在实际项目中也是必然会遇到的,上面我们开始使用在模版函数的字符串里嵌入可执行Js代码的方式处理方式来处理并生成html做出MVVM的风格,然后生成Dom节点后再根据virtual dom的样式来相应添加classNames及style,这种做法感觉还是比较原始,但勉强达到我们要变更节点样式的要求,下一篇我们继续来优化上面的Demo,看看可以玩出什么花样。

 

作者: 博主

Talk is cheap, show me the code!

发表评论

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

Captcha Code