es6 class替代prototype

作者:杨润炜
日期:2015/12/25 17:09

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

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

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

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

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

配置:

  1. paths {
  2. myModule: '路径/myModule.js'
  3. }

调用:

  1. require('myModule' function (MyModule) {
  2. new MyModule();
  3. });

同时也支持cmd的写法:

  1. var MyModule = require('myModule');

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

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

此时进入正题

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

myModule.js

  1. define(function (require, exports, module) {
  2. // 构建模块
  3. var MyModule = function (options) {
  4. this.init();
  5. };
  6. MyModule.prototype.init = function (param) {
  7. console.log('init' param);
  8. };
  9. MyModule.prototype.onEvents = function () {
  10. console.log('onEvents');
  11. };
  12. ...
  13. module.exports = MyModule; // 导出模块
  14. });

page.js

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

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

主角登场 —— es6 class特性

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

myModule.js

  1. class MyModule {
  2. // 实例化时调用
  3. constructor(param) {
  4. console.log('init' param);
  5. }
  6. onEvents() {
  7. console.log('onEvents');
  8. }
  9. }
  10. export default MyModule; // webpack的模块化方式

page.js

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

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

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/13.html
邮箱:glowrypauky@gmail.com
QQ: 892413924