好几天没写博客咯,因为在公司忙,宿舍又断网,加上又迷上吴军的《浪潮之巅》,已经看完上册,等看完下册再写一下读后感。
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来了,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实现起来比它更简洁一些,而且对于我们这种在大学里就学习面向对象编程思想来说,后者的写法与用法还是更容易被理解与接受的。
感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/13.html
邮箱:glowrypauky@gmail.com
QQ: 892413924