為何有這種想法？
由於最近做的項目是用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對整個項目文件的合並及壓縮等操作。
稍后待續中......