[JavaScript] 可扩展性模式

这几年MVVM框架越来越流行，React，Angular，Vue大行其道，
直接操作DOM的机会越来越少了。
IE6~8等浏览器逐渐淡出市场，兼容性问题也不再是重点了。
于是，You-Dont-Need-jQuery的趋势愈演愈烈。

然而，优秀的设计思想，并不会随着潮流涌动而过时的。
不可否认，是高可扩展性，促成了jQuery丰富的插件生态圈。
它们的依赖很少，组织关系很精妙，所有的方法都挂载到$或$.fn对象上。
（这是微内核架构的一种实现。。

具体而言，某个类的所有静态方法和实例方法都是扩展出来的。
jQuery提供的接口是这样的。

// 扩展静态方法
$.extend({
    // ...
});

// 扩展实例方法
$.fn.extend({
    // ...
});

我们能不能设计具有同样性质的类呢？
下面我们采用的是自上而下的设计方法，测试驱动开发，先考虑用例。

Extender.extend({
    staticMethod() { }
});

let extender = new Extender;
extender.extend({
    instanceMethod() { }
});

只写一个这样的类Extender，是简单的，
我们现在想做的事情是，把可扩展性模式提取出来，
让每一个具体的类都能轻易获得这种能力。

---

这个容易办到吗？
我们想到了使用继承，ES6的class让这件事情变得更直接了。
（注：ES6的class实际上也是原型继承的语法糖。。

假设我们已经有了上面的那个Extender类，来看看它的子类。

class HighScalability extends Extender { }

我们发现，静态方法和实例方法都已经被继承了。（ES6干的漂亮。。
但都不是它们自己的属性。（!hasOwnProperty。。

console.assert(HighScalability.extend);
console.assert((new HighScalability).extend);

console.assert(HighScalability.hasOwnProperty('extend') === false);
console.assert((new HighScalability).hasOwnProperty('extend') === false);

这就完成了我们的设计。（设计才是编程中最重要的环节。。
下面就是简单的实现了。（仅11行。。 _(:зゝ∠)_

export default class Extender { }

function extend(material) {
    let repository = this;

    Object.assign(repository, material);
    return this;
}

Object.assign(Extender, { extend });
Object.assign(Extender.prototype, { extend });

---

使用这种方法的时候，请坚持依赖倒置原则，
不要继承一个具体的类，否则你懂得。 _(:зゝ∠)_

赶快用Extender提高可扩展性吧。。