js模块化之自定义模块（页面模块化加载）

转自：http://blog.novanet.no/4-strategies-for-passing-parameters-to-requirejs-modules/

转自：http://javascript.ruanyifeng.com/tool/requirejs.html

入口：main1.js

require.config({

baseUrl : 'js',

paths : {

'main':'main'

}

});

require([  'main' ], function(main) {

var a = main.add1(1,54);

alert(a);

});

main1.js引用的main.js

require.config({

baseUrl : 'js',

paths : {

'jquery' : 'jquery/jquery-1.10.2',

'd3' : 'd3/d3',

'echarts' : 'echart/echarts.min'

}

});

define([ 'jquery', 'd3', "echarts" ], function(jquery,d3,echart) {

return {

add1 : function(x, y) {

return x + y;

}

};

});

说明：

在requirejs的模块路径解析里，baseUrl是非常基础的概念，离开了它，基本就玩不转了，所以这里简单介绍一下。

简单的说，baseUrl指定了一个目录，然后requirejs基于这个目录来寻找依赖的模块。

如果指定了baseUrl，则按照baseUrl目录为基准目录加载其他依赖的js；

如果没有指定baseUrl，则默认按照data-main文件所在的目录为基准目录加载其他依赖的js；

如果没有通过data-main属性指定baseUrl，也没有通过config的方式显示声明baseUrl，那么baseUrl默认为加载requirejs的那个页面所在的路径

jsp页面：

 

 

 

 注： data-main="${pageContext.request.contextPath}/test/js/main1.js"  的作用是指定js的入口，确定加载的基准目录；

  require(['${pageContext.request.contextPath}/test/js/main1.js'], function(app){})；

的作用是加载模块的过程，将main1.js依赖的包全部加载，然后返回main1.js中defined的函数对象；

之后在回调函数function(app)中写调用方法；

将模块加载到页面中有四种方法：

#1 Passing parameter to method

Starting of slow, we let our require module return a JavaScript object with a method that accepts a parameter. This is pretty basic stuff, and should be sufficient for most scenarios.

index.html

<script src="scripts/require.js">script>
<script>
    require(['scripts/app'], function(app){
        app.greet('World');
    });
script>

app.js

define(function(){
    return {
        greet: function(name){
            alert('Hello ' + name);
        }
    };
});

#2 Passing object to method

While #1 works great when you have one, or only a handful of parameters, it can get quite messy when you're dealing with a lot of parameters. To counter this we can let our module accept an object instead.

index.html

<script src="scripts/require.js">script>
<script>
    require(['scripts/app'], function(app){
        app.greet({
            salutation: 'Dr.',
            name: 'Who'
        });
    });
script>

app.js

define(function(){
    return {
        greet: function(config){
            alert('Hello ' + config.salutation + ' ' + config.name);
        }
    };
});

#3 Using RequireJS configuration

By loading the pre-defined RequireJS module aptly named "module" into your own module, you can define and access configuration data.

Note: The definition must be done before you include the require.js file, and this only works for define and not require modules.

index.html

<script>
    var require = {
        config: {
            'app': { //This must match your module name
                name: 'Sherlock'
            }
        }
    };
script>
<script data-main="scripts/app" src="scripts/require.js">script>

app.js

define(['module'], function(module){
    alert('Hello ' + module.config().name);
});

#4 Using a separate configuration module

Sometimes you'll have multiple modules needing the same input, then you can define a separate configuration module, and load it into your module like any other. I think this gives an nice clean separation between logic and data, but it can be a bit of an overkill i many situations.

index.html

<script>
    var require = {
        config: {
            'config': {
                name: 'Everybody'
            }
        }
    };
script>
<script data-main="scripts/app" src="scripts/require.js">script>

config.js

define(['module'], function(module){
    return {
        name: module.config().name
    }
});

app.js

require(['config'], function(config){
    alert('Hello ' + config.name);
});