es6 class替代prototype

好几天没写博客咯，因为在公司忙，宿舍又断网，加上又迷上吴军的《浪潮之巅》，已经看完上册，等看完下册再写一下读后感。

15年1月份刚来到现在这家公司时，才认识到了模块化，即封装好一些功能，可复用，而且一般可在其它项目继续使用。这样易于维护，代码逻辑清晰，而且也便于积累功能模块，防止重复劳动。

现在公司使用的是require.js作为模块化管理工具，基于amd模块化思想，即依赖前置的思想。它易于理解，也便于配置使用，对我这种初学者比较友好。
一般定义一个模块是这样：

define(function (require, exports, module) {
    var MyModule = function () {}; // 构建模块
    ...    
    module.exports = MyModule; // 导出模块
});

define是require.js提供的一个全局变量，可供开发者构建新模块。

配置：

paths {
    myModule: '路径/myModule.js'
}

调用：

require('myModule'， function (MyModule) {
    new MyModule();
});

同时也支持cmd的写法：

var MyModule = require('myModule');

require也是require.js提供的一个全局变量，可供开发者调用模块。

呜呜，差点跑题了，说太多require.js的东西了，这个留着我整理好博客oss的开发总结再拿出来详细说吧。

此时进入正题

在define里，我们需要构建自己的模块，这时，我们用到了prototype，即js的原型继承。具体看代码吧

myModule.js

define(function (require, exports, module) {
    // 构建模块
    var MyModule = function (options) {
        this.init();
    };
    MyModule.prototype.init = function (param) {
        console.log('init'， param);
    };
    MyModule.prototype.onEvents = function () {
        console.log('onEvents');
    };
    ...    
    module.exports = MyModule; // 导出模块
});

page.js

require('myModule'， function (MyModule) {
    var m = new MyModule('kk'); // 控制台输出'init'和'kk'
    m.onEvents(); // 控制台输出'onEvents'
});

变量m作为MyModule的实例，从MyModule的原型对象（即MyModule.prototype）那里继承了属性，故而实现了继承与封装。

主角登场 —— es6 class特性

现在es6来了，js也可以像其它面向对象语言一样使用class来构建模块。如下

myModule.js

class MyModule {
    // 实例化时调用
    constructor(param) {
        console.log('init'， param);
    }
    onEvents() {
        console.log('onEvents');
    }
}
export default MyModule; // webpack的模块化方式

page.js

let MyModule = require('myModule');
let m = new MyModule('kk'); // 控制台输出'init'和'kk'
m.onEvents(); // 控制台输出'onEvents'

虽说原型链的方式不差，但class实现起来比它更简洁一些，而且对于我们这种在大学里就学习面向对象编程思想来说，后者的写法与用法还是更容易被理解与接受的。