requireJs 使用

来源：互联网发布：java web开发技术详解编辑：程序博客网时间：2024/05/22 09:52

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>

<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();
});

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

3. 运行

控制台输出：

My Sample Projectscripts/main.js:12

someFunc2util.js:1

My Sample Project