CMD-SeaJs
seajs新的官網：https://seajs.github.io/seajs/docs/
前端模塊化開發那點歷史
sea.js簡單使用教程
- 下載sea.js, 并引入
- 創建項目結構
|-js
|-libs
|-sea.js
|-modules
|-module1.js
|-module2.js
|-module3.js
|-module4.js
|-main.js
|-index.html
- 定義sea.js的模塊代碼
- module1.js
define(function (require, exports, module) {
//內部變量數據
var data = 'atguigu.com'
//內部函數
function show() {
console.log('module1 show() ' + data)
}
//向外暴露
exports.show = show
})
- module2.js
define(function (require, exports, module) {
module.exports = {
msg: 'I Will Back'
}
})
- module3.js
define(function (require, exports, module) {
const API_KEY = 'abc123'
exports.API_KEY = API_KEY
})
- module4.js
define(function (require, exports, module) {
//引入依賴模塊(同步)
var module2 = require('./module2')
function show() {
console.log('module4 show() ' + module2.msg)
}
exports.show = show
//引入依賴模塊(異步)
require.async('./module3', function (m3) {
console.log('異步引入依賴模塊3 ' + m3.API_KEY)
})
})
- main.js : 主(入口)模塊
define(function (require) {
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
- index.html:
<!--
使用seajs:
1. 引入sea.js庫
2. 如何定義導出模塊 :
define()
exports
module.exports
3. 如何依賴模塊:
require()
4. 如何使用模塊:
seajs.use()
-->
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
seajs.use('./js/modules/main')
</script>
