js模块加载框架 sea.js学习笔记

seajs实现了JavaScript 的 模块开发及按模块加载。用来解决繁琐的js命名冲突，文件依赖等问题，其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。

　　官方文档：http://seajs.org/docs/#docs

　　首先看看seajs是怎么进行模块开发的。使用seajs基本上只有一个函数“define”

 

fn.define
 = function(id,
 deps, factory) {

    //code  of function…

}

     使用define函数来进行定义一个模块，根据 CMD （Common Module Definition）模块定义规范。一个文件就是一个模块。所以一个js文件中只有一个define，即一个文件是一个模块，SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法，数据和方法可以定义为公共或私有，公共数据和方法可以供别的模块调用。

　　官方实例中，define只传入一个参数： 一个工厂函数

define(function(require,
 exports, module) {

    //code  of the module...

});

    在看参数之前，我们先看看define是如何处理参数的:

　　fn.define = function(id, deps, factory)

   define可以接收的参数分别是模块ID，依赖模块数组及工厂函数;

    如果只有一个参数，则赋值给factory。

    如果有两个参数，第二个赋值给factory；第一个如果是array则赋值给deps，否则赋值给id。

    如果有三个参数，则分别赋值给id，deps和factory。

　　根据官方实例，建议还是根据官方的来就传递一个参数，即只有factory参数，这样的话模块id默认为js文件路径。

　　在来看看工厂函数的参数：

require,  exports, module

　　require——模块加载函数，用于记载依赖模块。通过这个参数来进行对其他模块的加载。

　　exports——接口点，将数据或方法定义在其上则将其暴露给外部调用。通过这个参数，来将这个模块的方法进行暴露

　　module——模块的元数据。其是一个对象，有属性：

　　　　　　　　module.id——模块的ID。

　　　　　　　　module.dependencies——一个数组，存储了此模块依赖的所有模块的ID列表。

　　　　　　　　module.exports——与exports指向同一个对象。

    使用factory的参数的使用：

define(function(require,
 exports, module) {

    var a  = require('./a');//引入a模块    
   
    exports.fun2= function(){
            alert("fun2");
            a.dosomething();
 　　}    

}

 　　使用require对象来进行加载模块，其实使用正则表达式进行验证加载的，所以其参数必须是特定的字符串，不能是表达式。

　　seajs会自动在require的参数中加入".js"来进行加载，即不需要写上后缀名，但是在某些情况下，seajs不会为其添加“.js”:

　　1.载入css：　　　　

require("./module1-style.css");

　　2.路径中含有“？”：　

require(<a  href="http://example/js/a.json?b=func">http://example/js/a.json?cb=func</a>);

　　3.路径以“#”结尾：

require("http://example/js/a.json#");

 

使用exports来向外部暴露方法，或者属性。暴露属性有几种方式，如上面中的例子是一种方式，另外还有：

使用return：

define(function(require)
 {
    var data1 = 1; //私有数据
    var func1  = function() { //私有方法
        returna.run(data1);
    }

    //暴露
    return{
        data2: 2,
        func2:function() {
            return'hello';
        }
    }; 
});

直接返回json对象：

define({
    data: 1,
    func:function() {
        return'hello';
    }
});

 

页面中调用seajs

前面说了seajs用来解决模块开发，和繁琐的文件依赖问题，所以所有的文件依赖都是通过require对象进行加载，或者可以使用require.async（“./a”）来进行异步加载，即当使用到的时候才进行加载，

　　注：无论是require（）还是require.async（）都可以有第二个参数为回调函数，当文件加载成功时调用：

require.async('/path/to/module/file',function(m) {

    //code of callback...
});

有了这个加载依赖的方式，我们无需再页面上书写大量的<script ></script>标签，而仅仅使用一个

　　

 <script src="./sea.js" data-main="./init"></script>

即可，其中data-main="./init" 为入口模块，表示加载这个模块，在进行迭代加载其所依赖的模块，使用这个属性可以省略seajs.use。这个后面说。

使用seajs.config进行全局配置：

seajs.config({

    base:'path/to/jslib/',

    alias: {
      'app':'path/to/app/'
    },

    charset:'utf-8',

    timeout: 20000,

    debug:false

});

这是对seajs进行全局配置，

base表示基址寻址时的基址路径

alias可以对较长的常用路径设置缩写。

charset表示下载js时script标签的charset属性。

timeout表示下载文件的最大时长，以毫秒为单位。

debug表示是否工作在调试模式下。

 

使用seajs.use 载入入口模块，相当于java的main函数，

//单模块模式
seajs.use('./a');
 

//回调模式

seajs.use('./a',function(a)
 {

  a.dosomething();

});
 

//多模块模式

seajs.use(['./a','./b'],function(a,
 b) {

  a.dosomething();

  b.dosomething();

});

 

下面可以看其官方给的simple例子中的页面怎么写的，基本上就明白了sea.js 是怎么用的了：

<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
<script>

  // Set configuration
  seajs.config({
    base: "../sea-modules/",
    alias: {
      "jquery": "jquery/jquery/1.10.1/jquery.js"
    }
  });

  // For development
  if (location.href.indexOf("?dev") > 0) {
    seajs.use("../static/hello/src/main");
  }
  // For production
  else {
    seajs.use("examples/hello/1.0.0/main");
  }
</script>

//mian.js

//hello/mian.js
define(function(require) {

  var Spinning = require('./spinning');

  var s = new Spinning('#container');
  s.render();

});

 

 

 

　　　　参考资料：seajs使用教程指南

　　　　　　　　API快速参考

　　　　　　　　前端模块化开发的价值