JavaScript模块化模型
今天看了一篇文章主要是讲javascript模块化模型的,大家经常都会用到,但是有些细节还是要深入的学习下。
1 独立作用域方式 - 创建一个匿名的方法并且立刻执行它,这样做可以提供一个封闭的js运行环境
(function () {
// ... all vars and functions are in this scope only
// still maintains access to all globals
}());
2 全局引入方式 - 通过参数达到在匿名函数中起作用
(function ($, YAHOO) {
// now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));
3 模块导出方式 - 如果你不想引入全局变量就可以使用该模式
var MODULE = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// ...
}
my.moduleProperty = 1;
my.moduleMethod = function () {
// ...
};
return my;
}());
4 扩充模块 - 我们导入模块并为模块添加属性,然后在导出模块。如果你需要多人协作开发脚本可以使用该模式
var MODULE = (function (my) {
my.anotherMethod = function () {
// added method...
};
return my;
}(MODULE));
5 松扩充模块 - 创建方法的参数可选的时候可以使用该模式,不支持内部方法和属性被其他作用域覆盖重置。
var MODULE = (function (my) {
// add capabilities...
return my;
}(MODULE || {"name":"wx"}));
6 紧扩充模块- 允许覆盖内部的方法和属性,可以使用该模式
var MODULE = (function (my) {
var old_moduleMethod = my.moduleMethod;
my.moduleMethod = function () {
// method override, has access to old through old_moduleMethod...
};
return my;
}(MODULE));
7 克隆模块 - 可以复制其他模块的属性和方法
var MODULE_TWO = (function (old) {
var my = {},
key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
}
var super_moduleMethod = old.moduleMethod;
my.moduleMethod = function () {
// override method on the clone, access to super through super_moduleMethod
};
return my;
}(MODULE));
8 跨文件私有模块 - 在多个文件中拆分一个模块的一个严重限制是每个文件都维护自己的私有状态,并且不访问其他文件的私有状态。
var MODULE = (function (my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my._private;
delete my._seal;
delete my._unseal;
},
_unseal = my._unseal = my._unseal || function () {
my._private = _private;
my._seal = _seal;
my._unseal = _unseal;
};
// permanent access to _private, _seal, and _unseal
return my;
}(MODULE || {}));
9 子模块模式
MODULE.sub = (function () {
var my = {};
// ...
return my;
}());
总结:
使用模块化的模型可以提升代码阅读性和代码的性能,使得下载代码速度更快。使用模块话的模型更容易非阻塞并行下载,这也加快了下载速度。初始化时间可能比其他方法慢一些,但值得应用。运行时性能应限制,只要全局正确的导入,并可能通过缩短与局部变量的引用链提高javascript运行速度。
出处:http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
每天一点点积累

浙公网安备 33010602011771号