sea.js 学习

开篇：终于学习了sea.js的使用了，由于它是一个模块加载工具，因此首先要了解javascript的模块编程，而后对sea.js的了解和使用

javascript 模块编程

为何要模块化编程，为了让开发人员只须要实现业务逻辑代码，只要加载别人写好的模块化代码便可。
'简单的说，模块化就是实现特定功能的一组方法'

javascript 自己并不支持模块，可是却能够实现“模块”的效果。
从原始写法，将函数和变量写在一块儿的，便可称为模块，可是这样会污染全局变量。

对象写法

var module = new Object({
    _count : 0,
    m1 : function(){
        // 
    },
    m2 : function(){
        //
    }
});

对象写法的缺点是模块的方法和变量可能会被重写。

高级写法

var module = (function(mod){
    mod.m1 = function(){

    }
    return mod;
})(jquery || {});

sea.js 是什么？

sea.js 是一款web开发 模块加载工具
由于sea.js 遵循CMD 模块定义规范，因此有必要了解下

碎言：很早就看到过AMD 和CMD ，可是每次看到都不太明白，由于当时也没有用到，因此就没有认真的去看，估计当时去看，也看不明白，今天终于有机会，把它弄清楚了

AMD 和 CMD

CMD common module definitime 基本模块定义，一个文件就是一个模块
AMD asynchronous module definitime 异步模块定义，它采用异步加载模块方式，模块的加载不影响后面语句的运行

你可能会问，他们之间有什么区别呢？我暂时了解到的就是一CMD是同步的，AMD是异步的，语法不同。

主要用来解决什么问题？

主要用来解决多模块，命名冲突等问题，举例来讲，当一个项目很大时，团队之间的合做可能存在命名冲突的问题，可能有些js文件须要优先加载，可是其余成员不知道，这个时候就须要sea.js 了，简单的从我我的理解来看，它就是一种规范。
能解决什么问题，网上描述的太多了，可自行搜索

sea.js 怎么用？
要了解一个东西的使用，首先要查看它的API 接口,sea.js API接口
在使用seajs 时，首先要加载seajs，为了让seajs 能更快获取自身路径，建议手动添加id属性
下面列出我的常常在前端中使用的代码，之前咱们多是以下加载的

<script type="text/javascript" src="js/lib/zepto-1.1.4.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/index.js"></script>

学习 sea.js 7个API

sea.js 配置 seajs.config

详细的就不介绍了，这里只介绍几个经常使用的，

seajs.config({
    // sea.js 的基础路径
    "base" : "",
    // 路径配置 ,若是目录较深，或跨目录时，使用paths配置
    "paths" : "",
    // 别名配置，方便调用
    "alias" : 
});

seajs.use 加载一个或多个模块

// 加载多个模块，在加载完成时，执行回调
seajs.use(['./a','./b'],function(a,b){
    a.dosomething();
    b.dosomething();
});

seajs 与 DOM 优先加载没有关系，若是确保DOM ready，须要使用jquey 等类库来实现

define 定义模块，seajs 推崇一个模块一个文件

define 是一个全局函数，用来定义模块
define(factory) ,factory 能够是字符串、json对象、函数
factory 为对象、字符串时， 模块的接口就是 对象或字符串
factory 为函数时，表示模块的构造方法，执行构造方法，能够获得函数向外提供的接口，factory 在执行，会默认传入三个参数：require、exports、module

define(function(require,exports,module){
    // 模块代码
});

define(id?, deps?, factory)

define 也能够接受两个以上的参数，id 表示 模块标识，deps 数组表示模块依赖，例如

define("a",['./b.js'],function(require,exports,module){
    // 模块代码
});

前两个参数可省略，能够经过构建工具生成
下面来讲下factory函数中的三个参数
require 是一个方法，用来接受模块标识，用来获取其余模块提供的接口，可使用相对路径和绝对路径
require.async(id, callback?) 用来在模块内部异步加载模块，加载完成后，执行指定回调
exports 是一个对象，用来提供模块接口，还可使用return 直接向外提供接口
module 是一个对象，存储了当前模块相关联的属性和方法
module.uri String 模块绝对路径
module.dependencies Array 当前模块的依赖
module.exports Object 当前模块对外提供的接口

require 用来获取指定模块的接口

require 的参数必须字符串直接量
动态依赖，推荐使用 require,async,异步加载一个或多个模块
require.async(['./a','./b'],function(a,b){
// 执行回调
})

在项目中使用

简单的使用

首先加载sea.js ，而后加载 后面的两个模块，这样写能够，可是就失去了，sea.js 的意义，和我以前引入没有什么区别,下面咱们使用 模块化的写法来加载

<script type="text/javascript" src="js/lib/sea-2.2.1.min.js" id="seajsnode"></script>
<script type="text/javascript">

seajs.config({
    "base" : "./js/",
    "alias" : {
        "zep" : "./js/lib/zepto-1.1.4.min.js"
    }
});

seajs.use(["common","index"]);
</script>

// jquery.js
define(function(require, exports, module){
    // jquery 代码
module.exports = $.noConflict(true);
});

// common.js
define(function(require,exports,module){
    var $ = require("lib/jquery.js");
    exports.doit = function(){
        console.log($("body"));
    }
    
});

// index.js
define("index",["common"],function(require,exports,module){
    var common = require("common");
    console.log($);
    common.doit();

});

总结

之后每个文件都是一个模块，每个文件都要遵循CMD规范去编写，就连咱们的jquery库也是