如何使用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對整個項目文件的合並及壓縮等操作。

 稍后待續中......


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM