如何使用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对整个项目文件的合并及压缩等操做。

 稍后待续中......