1.项目结构
- project-directory/
- project.html
- scripts/
- main.js
- require.js
- helper/
- util.js
2. 项目代码
project.html代码：
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js" defer async="true"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js" defer async="true"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
main.js代码
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
require(["jquery","helper/util"], function($,util) {
//This function is called when scripts/helper/util.js is loaded.
//If util.js calls define(), then this function is not fired until
//util's dependencies have loaded, and the util argument will hold
//the module value for "helper/util".
console.log($('h1').text());
util.fun2();
util.test();
});
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
require(["jquery","helper/util"], function($,util) {
//This function is called when scripts/helper/util.js is loaded.
//If util.js calls define(), then this function is not fired until
//util's dependencies have loaded, and the util argument will hold
//the module value for "helper/util".
console.log($('h1').text());
util.fun2();
util.test();
});
util.js代码：
define( ['jquery'], function( $ ) {
function someFunc1() {
console.log('someFunc1');
}
function someFunc2() {
console.log('someFunc2');
}
//Let the test, fun1, fun2 metohod be public
return {
test : function() { console.log($('h1').text());},
fun1 : someFunc1,
fun2 : someFunc2
};
});
function someFunc1() {
console.log('someFunc1');
}
function someFunc2() {
console.log('someFunc2');
}
//Let the test, fun1, fun2 metohod be public
return {
test : function() { console.log($('h1').text());},
fun1 : someFunc1,
fun2 : someFunc2
};
});
3. 运行
控制台输出：
推荐文章：
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
