SeaJS主页 – http://seajs.org
为什么用seaJs？
-
命名冲突
-
文件依赖
-
解决需要index.html引入一堆js的问题
-
前端性能优化（异步加载模块）
-
提高可维护性（模块化可以让每个文件的职责单一）
seaJs示例
目录结构
seaJs
|-sea-debug.js
|-sea.js
|-seajs-css.js
static
|-css
|-style.css
|-js
|-data.js
|-init.js
|-jquery.js
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<p class="hello"></p>
<script src="./seajs/sea.js"></script>
<script src="./seajs/seajs-css.js"></script>
<script src="./seajs/sea-debug.js"></script>
<script>
seajs.use('./static/js/init');
</script>
</body>
</html>
没错，只需要seaJs，其他文件由seaJs负责加载！
init.js
define(function(require, exports, module) {
var jquery = require('./jquery');
var data = require('./data');
var css = require('../css/style.css');
console.log(data)
$(".hello").html(data.hello);
});
data.js
define({
hello: 'hello seaJs',
});
style.css
.hello {
color: red;
font-size: 14px;
}
测试
hello seaJs