Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Model 层不是单纯的 data source

  Model 层既然能称为一层那就肯定不仅仅是一个 data source 的概念那么简单。我觉得所有直接影响 Model 的操作都应该直接在 Model 层定义。从服务器加载到的数据不应该直接使用,而是应该先做一次对象化后再丢给 VM 之类的地方层使用。
  觉得 OOP 是屎的同学可以无视本文(我有时也觉得 OOP 是屎)。
  无论是何种 MVVM 框架,经常看到这样的代码:
vm.list = data;
vm.removItem = index => {
  vm.list.splice(index, 1);
};
  把删除列表中某一项的方法直接定义到了 vm 上。这种做法就像是写了一个不通用的函数丢到了全局变量上一样的感觉。对于某个业务而言,vm 上的东西就相当于这个业务的全局变量了,把一坨奇奇怪怪的东西都往上丢真的不觉得恶心么?
  首先,对 Model 的操作不该在 VM 层上定义。因为 MVVM 框架的优势之一就是 Model 可复用,如果把 Model 的操作定义到 vm 上,那么如果以后在其它 vm 中需要用到同样的操作就复制代码么?这么玩 MVVM 简直就是暴殄天物。
  如果我们的 Model 层不是将原始数据直接使用,而是包裹一层对象的话,那就完全不同了。比如将服务器加载到的 data 对象化 class List extends Array {
  constructor(raw) {
    super();
    this.push(...raw.map(item => new Item(item, this)));
  }
}

class Item {
  static parentSymbol = Symbol();
  constructor(raw, parent) {
    this[Item.parentSymbol] = parent;
    Object.assign(this, raw);
  }
  remove() {
    let parent = this[Item.parentSymbol]
    let index = parent.indexOf(this);
    if(index < 0) return;
    parent.splice(index, 1);
  }
}
  这么做虽然会增加代码量,而且性能也不如从前,但逻辑会比原来清晰得多。无论从服务器加载到多么复杂的数据都可以很容易地在 VM 层中使用。
  也许我的例子没什么说服力?那是因为这个例子太简单了,它只是一个列表而已。可以试试当数据结构是三层或更多层的数组嵌套并涉及一系列操作时,这么做的优势就变得非常明显。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^