支持seaJs和requireJs的前端模块开发方案（三）：加载器全局配置alias.js

前言

前一篇文章已经对业务页面的配置及init.js入口已经做了功能说明，请务必先阅读。

本文将对加载器（seaJs、requireJs）的全局配置alias.js文件进行讲解，同时贴出全部代码，代码不会详细的讲解，有不懂的可以留言提问。

alias.js

alias.js文件主要包含以下几个功能：

在手动模式下，根据是否成功设置入口标识来确认为手动模式，并且判断加载器来获得_LIBSURL、_ASSETSURL这2个资源目录；
加载器顶层配置和shim配置。这是顶层级别的设置，后面一篇文章会针对app内或app下系统单元内的设置（下称：加载器模块配置）做讲解；
实现顶层加载器配置与模块加载器配置的整合；

手动模式下获得资源目录：

if(document.getElementById("ENTRY") === null){
var site_url = document.location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : "") + "/";
var site_static_url = 'undefined' === typeof static_url || '' === static_url ? site_url : static_url + "/";
var static_folder = site_static_url === site_url ? site_static_url + 'static/' : site_static_url;
if(window.seajs){
var _ASSETSURL = static_folder + 'assets/js/cmd/';
var _LIBSURL = static_folder + 'libs/cmd/';
}else if(window.requirejs){
var _ASSETSURL = static_folder + 'assets/js/amd/';
var _LIBSURL = static_folder + 'libs/amd/';
}else{
console.log('没有引入加载器文件，如：seajs、requirejs');
}
}

以上代码中有对seaJs和requireJs的启动做判断，为了避免判断报错，要写成window.seajs或window.requirejs

顶层下的模块别名、shim设置：

var newAlias = {
//seaJs模块别名配置
seaJsAlias: {
"respond": 'gallery/respond/1.4.2/respond', //,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询
'es5-safe': 'gallery/es5-safe/0.9.2/es5-safe',
'json': 'gallery/json/1.0.3/json', //别名json2,用于json的序列化和反序列化：JSON.stringify(jsonObj);JSON.parse(jsonString);
"$": 'jquery/jquery/1.7.2/jquery-CMD', //别名CMD规范的Jquery
"jquery": 'jquery/jquery/1.7.2/jquery-CMD', //别名CMD规范的Jquery
"util": _ASSETSURL + 'util',
"Arr": _ASSETSURL + 'Arr', //数组工具类
"Calc": _ASSETSURL + 'Calc', //计算工具类
"date": _ASSETSURL + 'date' //日期工具类
},
//requireJs模块别名配置
requireJsPaths: {
'$': _LIBSURL + 'jquery/1.7.2/jquery.min',
'jquery': _LIBSURL + 'jquery/1.7.2/jquery.min',
'Jquery': _LIBSURL + 'jquery/1.7.2/jquery.min',
'cs': _LIBSURL + 'require-cs/0.5.0/cs', //https://github.com/requirejs/require-cs
'text': _LIBSURL + 'require-text/2.0.15/text', //http://requirejs.org/docs/api.html#text
'domReady': _LIBSURL + 'require-domReady/2.0.1/domReady', //http://requirejs.org/docs/api.html#pageload
'underscore': _LIBSURL + 'underscore', //http://www.bootcss.com/p/underscore/#values
'backbone': _LIBSURL + 'backbone/1.3.3/backbone', //http://www.css88.com/doc/backbone/
'backboneLocalstorage': _LIBSURL + 'backbone/1.3.3/backbone-localstorage', //https://github.com/robmoorman/backbone-localstorage
'localforage': _LIBSURL + 'localforage/1.4.2/localforage', //https://github.com/mozilla/localForage https://mozilla.github.io/localForage/ 'localforageNopromises': _LIBSURL + 'localforage/1.4.2/localforage.nopromises' //nopromises
},
// requireJs输出常规组件，可以AMD模式调用
requireJsShim: {
'cs': {
exports: 'cs'
},
'domReady': {
exports: 'domReady'
},
'underscore': {
exports: '_'
},
'backbone': {
deps: [
'underscore',
'$'
],
exports: 'backbone'
},
'backboneLocalstorage': {
deps: ['backbone'],
exports: 'Store'
}

}

以上代码即为加载器顶层属性配置，区分了CMD和AMD模式，如代码所示，配置的模块别名通常为“static/assets/js”下的内部公共模块。

有了顶层配置，接下来就要实现加载器顶层配置和加载器模块配置的整合了，方法继续写入到newAlias中：

extend: function(des, src, override) {
if (src instanceof Array) {
for (var i = 0, len = src.length; i < len; i++) this.extend(des, src[i], override);
}
for (var i in src) {
if (override || !(i in des)) des[i] = src[i];
}
delete des[0];
delete des[1];
return des;
},
aliasIntegrate: function(sysAlias, type) {
if (type === 'cmd') {
return this.extend({}, [this.seaJsAlias, sysAlias]);
} else if (type === 'amd') {
return this.extend({}, [this.requireJsPaths, sysAlias]);
} else {
return sysAlias;
}
},
shimIntegrate: function(sysShim, type) { //cmd不使用本方法，直接在alias中设置
if (type === 'amd') {
return this.extend({}, [this.requireJsShim, sysShim]);
} else {
return sysShim;
}
}

以上代码中，aliasIntegrate方法针对别名整合；shimIntegrate方法针对shim整合，extend方法为整合方法