现在JavaScript运行的环境越来越复杂,除了支持浏览器段,也可以运行在服务器段。同时,针对JavaScript提出的模块化标准也是百花齐放,常见的模块化规范有玉伯提出的CMD和几乎称为模块标准的AMD规范,这是,问题就来了,怎样写出支持多模块多运行环境的脚本呢?
虽然,在项目中,我们可能会支持特定的模块标准或者,然后针对特定的标准和环境进行封装,比如,我的脚本是写在浏览器端并且支持requirejs(实现AMD标准的一个通用库)。那么我们的脚本,基本类型下面的代码封装。
define(['jquery'],function($){
//todo
});
可是这样的话,如果这代码要求在node环境中也能运行,或者,您的技术经理突然换人,然后他喜欢seajs,那么你的脚本就要重新封装了,如果是个大项目,包含的脚本又很多,到时候,你就会觉得坑爹了,所以写出一种通杀的脚本,不管你运行在哪个环境,也不管你支持那种模块标准,我的脚本都可以正常运行,那是多么幸福的事情呀。
那么,我们今天的目的就是解决这个问题,我们可以把我们要写的脚本封装成以下类似的代码:
;(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD 支持
define(['jquery'],factory);
} else if (typeof exports === 'object') {
// Node/CommonJS 支持
module.exports = factory;
} else {
// 浏览器支持
factory(jQuery);
}
}(function ($) {
/*您的代码在这里*/
//todo
}));
以上的代码是将您的代码封装到一个匿名的函数里,然后传递给factory函数,获得factory句柄后,你就可以选择性的封装了,以上的代码是封装符合AMD规范、node运行环境和浏览器运行的通用模版,如果要支持seajs或者未来出现新的环境和规范,只要在上面的代码中添加一个分支就可以了。
总结:前端越来越复杂,在完成任务之于,我们应该多想想怎样写的更好,更简洁。