導入Seajs庫
<script src="/site/script/sea.js"></script>
然后在它下面寫模塊的配置和入口。
// seajs 的簡單配置
seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});
// 加載入口模塊
seajs.use("../static/hello/src/main");
所有源碼都存放在 GitHub 上:seajs/examples,目錄結(jié)構(gòu)為:
examples/ |-- sea-modules 存放 seajs、jquery 等文件,這也是模塊的部署目錄 |-- static 存放各個項目的 js、css 文件 | |-- hello | |-- lucky | `-- todo `-- app 存放 html 等文件 |-- hello.html |-- lucky.html `-- todo.html
我們從 hello.html
入手,來瞧瞧使用 Sea.js 如何組織代碼。
在 hello.html
頁尾,通過 script
引入 sea.js
后,有一段配置代碼:
// seajs 的簡單配置seajs.config({ base: "../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" }})// 加載入口模塊seajs.use("../static/hello/src/main")
sea.js
在下載完成后,會自動加載入口模塊。頁面中的代碼就這么簡單。
這個小游戲有兩個模塊 spinning.js
和 main.js
,遵循統(tǒng)一的寫法:
// 所有模塊都通過 define 來定義define(function(require, exports, module) { // 通過 require 引入依賴 var $ = require('jquery'); var Spinning = require('./spinning'); // 通過 exports 對外提供接口 exports.doSomething = ... // 或者通過 module.exports 提供整個接口 module.exports = ...});
上面就是 Sea.js 推薦的 CMD 模塊書寫格式。如果你有使用過 Node.js,一切都很自然。
對于正式項目,在發(fā)布上線前,還需要對源碼進行壓縮、合并等操作。
這可以通過 spm 或 Grunt 等工具來實現(xiàn)。簡明教程請參考:構(gòu)建工具
怎么樣,Sea.js 入門真的只需 5 分鐘吧:)
使用 Sea.js,可以規(guī)范模塊的書寫格式、能自動處理模塊的依賴,還非常有助于代碼組織、開發(fā)調(diào)試和性能優(yōu)化。Sea.js 期待能給你提供簡單、極致的模塊化開發(fā)體驗。我相信,你會愛上她的。
若喜歡,可查看更多例子:seajs/examples
若已愛上,請繼續(xù)閱讀:使用文檔
<script>
標簽加個id,可以快速訪問到這個標簽(我是在模塊合并時用到它的)seajs.use()
在.html頁面上寫js時如果有多個模塊依賴,需要使用暴露出來的接口就要讓參數(shù)與它一一對應。
更多建議: