如何使用seajs+jQuery構建中型項目

 爲什麼有這種想法？

       因爲最近作的項目是用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對整個項目文件的合併及壓縮等操做。

 稍後待續中......