為何有這種想法？
由於最近做的專案是用jquery+seajs整合的，所以就突發奇想 如何使用seajs+jquery能更好的構建專案，比如能解決模組化，模組與模組之間的依賴，檔案上線後打包，壓縮等能更好遵守自己的一套規範，這樣的話自己也比較清晰整個前端專案的架構，能更好的維護程式碼！以後自己做新專案時可以遵守這些規範來做，能更好，更高質量的完成任務！
如何用seaJS+jquery來組織前端頁面？
如何來組織前端頁面？從個人經驗來講，需要遵守以下幾點：
1. JS這塊: 在頁面頂部引入seaJS壓縮原始檔，那麼jquery檔案就不引入了，直接用seajs.config 這個配置下Jquery檔案，需要的時候use下或者require下。頁面級的JS 都寫成模組化，比如：define(function(require, exports, module){}),因為seajs一個檔案就是一個模組。
2. CSS這塊： 按道理來說，頁面上只需要2個css檔案即可，一個頁面級的css檔案，另外一個是reset.css和header.css(全站通用的，兩個檔案合併一個請求)。但是頁面上可能要引入一些外部的外掛等。比如bootstrap中的外掛等，那麼個人建議css檔案也直接引入放在頭部。因為css檔案很多的話,可能發多個請求，但是並不會阻塞瀏覽器的載入(因為用link引入是邊渲染變載入的)。
一： 下面來看看CSS在書寫時候要注意哪些規範。
1. 註釋肯定需要的。
2. 統一遵循書寫順序規範：
1. 位置屬性(position, z-index, display, float等)。
2. 大小(width, height, padding, margin等)。
3.文字系列(font, line-height, letter-spacing, color text-align等)。
4.背景(background, border等)。
二： 命名規範：
1. 所有的class(類名)都一律小寫，且多個單詞用橫線-隔開。
2. 和JS有關的操作class類名 使用J_ 開頭。
3. 個人編寫的元件風格如下：
define(function(require, exports, module) { //var $ = require('./jquery'); function XX(){ } XX.prototype = { init: function(){ console.log(2); } }; exports.XX = XX.prototype; });
seajs與檔案專案相關的。
比如我現在專案目錄如下：
根目錄seajsDemo下有
1. app (專門放html靜態檔案)
2. sea-modules檔案 (存放jquery和seajs等原始檔)。
3. static檔案 (存放所有的JS檔案)。
那現在我們有頁面 假如叫index.htm。 JS檔案有2個 一個是index.js檔案 另外一個是test.js檔案。
其中JS檔案所有風格遵循如下風格：這是test.js程式碼。
define(function(require, exports, module){ exports.test = function(){ console.log(1); } });
那麼index.js程式碼如下：
define(function(require, exports, module){ var a = require('total/test'); a.test(); });
那麼我可以直接在index.html配置下就ok 如：
seajs.config({ paths: { 'gallery': '../sea-modules/jquery/jquery.js', 'total': '../static/', } });
呼叫如下：
seajs.use("total/index");
下面來講解下seajs的一些屬性。注：只是講解一些常用的屬性，詳細的可以看seajs官網。
1. 用來對 Sea.js 進行配置
seajs.config({
alias：{},
paths:{},
map: [],
base:'',
charset: 'utf-8'
});
一. alias 別名，方便呼叫，而不需要呼叫很長的名字(可以通過base一起使用更方便)。如上面的檔案配置，我可以這樣設定下他們的別名，不設定paths。如下：
alias: {
"jquery": "sea-modules/jquery/jquery.js",
'test': 'static/test'
}
base: 'http://localhost/demo/seajsDemo/' // 指向根目錄檔案。那麼我們可以直接在頁面上這樣呼叫 seajs.use("static/index");就可以了 就可以訪問到
http://localhost/demo/seajsDemo/static/index.js檔案了。
二. paths： 設定路徑，方便跨目錄呼叫。當我們的專案中的檔案在不同的檔案目錄下，那麼如果我們還是用上面的alias別名的話，直接讓他們指向通用的根目錄的話，那麼use一個檔案的時候 可以檔案id要寫很長很長，但是如果我用paths來解決的話更方便。
比如 seajs.config({
paths: {
'gallery': '../sea-modules/jquery/jquery.js',
'total': '../static/',
}
});
那麼初始化index.js時候 可以這樣呼叫 seajs.use("total/index");因為total用了相對路徑 相對於根目錄下的。
但是index.js程式碼中 要這樣獲取到test.js檔案了 var a = require('total/test');
三：map：[ [ '.js', '-debug.js'] ] 是對檔案的對映。比如頁面上的XX.js 都對映成XX-debug.js,可以方便線上除錯等。
把 x.js 字尾的都轉成 x-debug.js, 當 x-debug.js 中依賴的模組如過有 y-debug.js 時,
會把y-debug.js 也轉成 y-debug-debug.js, 導致沒法獲取到. 再導致 x 模組返回 null.
你應該撇除 已經是 -debug.js 的情況, 例如:可以如下做
map: [ function(uri) { if (!/\-debug\.(js|css)+/g.test(uri)) { uri = uri.replace(/\/(.*)\.(js|css)/g, "/$1-debug.$2") } return uri } ]
四： charset: 'utf-8' 檔案編碼不用介紹。
2. define 用來定義模組。所有頁面上的JS檔案風格都遵循如下風格。
define(function(require, exports, module) { // 模組程式碼 });
3. seajs.use 用來載入一個或者多個模組。如下：
// 載入一個模組 seajs.use('./a'); // 載入一個模組，在載入完成時，執行回撥 seajs.use('./a', function(a) { a.doSomething(); }); // 載入多個模組，在載入完成時，執行回撥 seajs.use(['./a', './b'], function(a, b) { a.doSomething(); b.doSomething(); });
4. exports 是一個物件，用來向外提供模組介面。
define(function(require, exports) { // 對外提供 foo 屬性 exports.foo = 'bar'; // 對外提供 doSomething 方法 exports.doSomething = function() {}; });
5. require 用來獲取指定模組的介面。
define(function(require) { // 獲取模組 a 的介面 var a = require('./a'); // 呼叫模組 a 的方法 a.doSomething(); });
利用grunt對整個專案檔案的合併及壓縮等操作。
稍後待續中......