支持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方法为整合方法