为何有这种想法？
由于最近做的项目是用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对整个项目文件的合并及压缩等操作。
稍后待续中......