Requirejs ----require.config() 全局化

最近项目需要使用 Requirejs ，提前做下技术储备，官网：http://www.requirejs.cn/

在使用 Requirejs 实践中，将require.config()作为全局配置是一个好习惯

假设我们使用 requirejs 在页面中引入 main.js 脚本文件，最基本的配置可能是这样：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

require.config({     paths: {         jquery    : "/js/library/jquery.min",         transition: "/js/bootstrap/transition",         modal     : "/js/bootstrap/modal"     },     shim : {         modal: {             deps   : ["jquery", "transition"],             exports: "modal"         }     } }); require(["jquery","modal"], function ($) {     "use strict";     //功能代码 });

 

然后在另一个页面中引入的 main_2.js 文件中，配置又可能是这样：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

require.config({     paths: {         jquery: "/js/library/jquery.min",         core  : "/js/ui/core",         effect: "/js/ui/effect",         mouse : "/js/ui/mouse",         slider: "/js/ui/slider"     } }); require(     ["jquery","core","effect","mouse","slider"],     function ($) {         "use strict";         //功能代码 });

一个 WebApp 中，每个页面需要的引用都不尽相同，你要重复的在每个脚本文件中申明配置，有些相同，有些不同。达到一定数量级后，维护变得非常痛苦。这时候需要做的就是把配置提取出来，以上面的为例子配置文件的路径与名称为/js/require.config.js，代码内容如下：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

require.config({     paths: {         jquery    : "/js/library/jquery.min",         core      : "/js/ui/core",         effect    : "/js/ui/effect",         mouse     : "/js/ui/mouse",         slider    : "/js/ui/slider",         transition: "/js/bootstrap/transition",         modal     : "/js/bootstrap/modal"     },     shim : {         modal     : {             deps   : ["jquery", "transition"],             exports: "modal"         }     } });

main.js 与 main_2.js 分别修改如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//mian.js require(["/js/require.config.js"],function(){     "use strict";     require(["jquery","modal"], function ($) {         //功能代码     }); }) //main_2.js require(["/js/require.config.js"],function(){     "use strict";     require(     ["jquery","core","effect","mouse","slider"],     function ($) {         //功能代码     }); })