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

来源：互联网发布：docker java api 编辑：程序博客网时间：2024/04/27 22:21

转自：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页面：

<!DOCTYPE html>

<html>

<head>

<title>testD3-20-pie.html</title>

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

var rootPath = "${pageContext.request.contextPath}";

var config = {

"rootPath" : rootPath

};

app.xxxx(config);

});

</script>

</style>

</head>

<body>

</div>

</body>

</html>

注：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);});

阅读全文

0 0