javascript模块加载框架seajs详解

SeaJS是一个遵循commonJS规范的javascript模块加载框架，可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载)。

SeaJS可以和jQuery完美集成，使用SeaJS可提高javascript的可读性和清晰度，解决javascript编程中繁杂的依赖关系(大项目中js的数量众多和依赖关系复杂比较明显)
SeaJS的作者是淘宝前端工程师玉伯。

SeaJS本身遵循KISS（Keep It Simple, Stupid）理念进行开发，其本身仅有个位数的API，因此学习起来毫无压力。在学习SeaJS的过程中，处处能感受到KISS原则的精髓——仅做一件事，做好一件事。

seajs使用示例

本文首先通过一个例子直观对比传统JavaScript编程和使用SeaJS的模块化JavaScript编程，然后详细讨论SeaJS的使用方法，最后给出一些与SeaJS相关的资料。

假设我们现在正在开发一个Web应用TinyApp，我们决定在TinyApp中使用jQuery框架。TinyApp的首页会用到 module1.js，module1.js依赖module2.js和module3.js，同时module3.js依赖module4.js。

传统开发

使用传统的开发方法，各个js文件代码如下：

//> module1.js:
var module1 = {
    run: function(){
        return $.merge(['module1'], module2.run(), module3.run());
    }
}

//> module2.js:
var module2 = {
    run : function(){
        return ['module2'];
    }
}

//> module3.js:
var module3 = {
    run: function(){
        return $.merge(['module3'], module4.run() );
    }
}

//> module4.js:
var module4 = {
    run: function(){
        return ['module4'];
    }
}

//> index.html  此时index.html需要引用module1.js及其所有下层依赖（注意顺序）：
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>my tinyapp</title>
</head>
<body>
    <p class="content"></p>
    <script type="text/javascript" src="./js/jquery-min.js"></script>
    <script type="text/javascript" src="./js/module4.js"></script>
    <script type="text/javascript" src="./js/module2.js"></script>
    <script type="text/javascript" src="./js/module3.js"></script>
    <script type="text/javascript" src="./js/module1.js"></script>
    <script>
        $('.content').html(module1.run().join());
    </script>
</body>
</html>

随着项目的进行，js文件会越来越多，依赖关系也会越来越复杂，使得js代码和html里的script列表往往变得难以维护。

SeaJS模块化开发

下面看看如何使用SeaJS实现相同的功能。

//> index.html：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>my tinyapp</title>
</head>
<body>
    <p class="content"></p>
    <script type="text/javascript" src="./sea.js" ></script>
    <script>
        seajs.use('./init', function(init){
            //'./init'=='./init.js'后缀可省略; 参数init为 init.js的外部接口 即: exports属性
            init.initPage();
        });
    </script>
</body>
</html>

可以看到html页面不再需要引入所有依赖的js文件，而只是引入一个sea.js，sea.js会处理所有依赖，加载相应的js文件，加载策略可以选择在渲染页面时一次性加载所有js文件，也可以按需加载（用到时才加载响应js），具体加载策略使用方法下文讨论。

index.html加载了init模块，并使用此模块的initPage方法初始化页面数据，这里先不讨论代码细节。
下面看一下模块化后JavaScript的写法：

//> init.js:
define(function (require, exports, module) {
    var $ = require('jquery'); // jquery.js 可省略后缀
    var m1 = require('m1.js');

    //jquery1.6 $.merge只支持2个参数的情况，这里扩展一下
    __merge = $.merge;
    $.merge = function (first, second) { // param: array or fake array
        var argArr = Array.prototype.slice.call(arguments);
        var r = myreduce(argArr, __merge);
        console.log(r);
        return r;
    };
    // $.merge(['dd'],['ee'],['ff'],['gg']);
    function myreduce(arr, fn) {
        var e1, e2, i = 0,
            rest;
        for (var i = 0; i < arr.length - 1; i++) {
            if (i == 0) {
                e1 = arr[0];
            } else {
                e1 = rest
            }
            e2 = arr[i + 1];
            rest = fn(e1, e2);
        }
        return rest;
    }

    exports.initPage = function () {
        $('.content').html(m1.run().join());
    };
});

//>m1.js:
define(function (require, exports, module) {
    var $ = require('jquery');
    var m2 = require('m2');
    var m3 = require('m3');

    exports.run = function () {
        return $.merge(['module1'], m2.run(), m3.run());
    };

});

//>m2.js:
define(function (require, exports, module) {
    exports.run = function () {
        return ['module2'];
    }
});

//>m3.js:
define(function (require, exports, module) {
    var $ = require('jquery');
    var m4 = require('m4');

    exports.run = function () {
        return $.merge(['module3'], m4.run());
    };
});

//>m4.js:
define(function (require, exports, module) {
    exports.run = function () {
        return ['module4'];
    };
});

乍看之下代码似乎变多变复杂了，这是因为这个例子太简单，如果是大型项目，SeaJS代码的优势就会显现出来。不过从这里我们还是能窥探到一些SeaJS的特性：

  • html页面不用再维护冗长的script标签列表，只要引入一个sea.js即可。

  • js代码以模块进行组织，各个模块通过require引入自己依赖的模块，代码清晰明了。

通过这个例子朋友们应该对SeaJS有了一个直观的印象，下面本文具体讨论SeaJS的使用。

使用SeaJS

下载及安装

要在项目中使用SeaJS，你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置。

SeaJS项目目前托管在GitHub上，主页为https://github.com/seajs/seajs/。可以到其git库的build目录下（https://github.com/seajs/seajs/tree/master/build）下载sea.js（已压缩）或sea-debug.js（未压缩）。

下载完成后放到项目的相应位置，然后在页面中通过<script>标签引入，你就可以使用SeaJS了。

SeaJS基本开发原则

在讨论SeaJS的具体使用前，先介绍一下SeaJS的模块化理念和开发原则。

使用SeaJS开发JavaScript的基本原则就是：一切皆为模块。引入SeaJS后，编写JavaScript代码就变成了编写一个又一个模块，SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法，数据和方法可以定义为公共或私有，公共数据和方法可以供别的模块调用。

另外，每个模块应该都定义在一个单独js文件中，即一个js文件对应一个模块。

模块定义(函数define)

SeaJS中使用“define”函数定义一个模块。因为SeaJS的文档并没有关于define的完整参考，所以我阅读了SeaJS源代码，发现define可以接收三个参数：

/**
- Defines a module.
- @param {string=} id The module id.
- @param {Array.|string=} deps The module dependencies.
- @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
    //code of function…
}

上面是我从SeaJS源码中摘录出来的，define可以接收的参数分别是模块ID，依赖模块数组及工厂函数。我阅读源代码后发现define对于不同参数个数的解析规则如下：

  • 如果只有一个参数，则赋值给factory。
  • 如果有两个参数，第二个赋值给factory；第一个如果是array则赋值给deps，否则赋值给id。
  • 如果有三个参数，则分别赋值给id，deps和factory。 最后一个参数始终当做 工厂函数，倒数第2个参数根据是否数组，确定是id 还是 deps

但是，包括SeaJS的官方示例在内几乎所有用到define的地方都只传递一个工厂函数进去，类似与如下代码：

//使用最多的模块定义方式 只传工厂函数
define(function(require, exports, module) {
    //code of the module...
});

个人建议遵循SeaJS官方示例的标准，用一个参数的define定义模块。那么id和deps会怎么处理呢？

id是一个模块的标识字符串，define只有一个参数时，id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用 define定义模块，则这个模块的ID会赋值为“http://example.com/a.js”，没有特别的必要建议不要传入id。deps一般也不需要传入，需要用到的模块用require加载即可。

工厂函数factory解析

工厂函数是模块的主体和重点。在只传递一个参数给define时（推荐写法），这个参数就是工厂函数，此时工厂函数的三个参数分别是：

  • require——模块加载函数，用于记载依赖模块。
  • exports——接口点，将数据或方法定义在其上则将其暴露给外部调用。
  • module——模块的元数据。

这三个参数可以根据需要选择是否需要显示指定。

下面说一下module。module是一个对象，存储了模块的元信息，具体如下：

  • module.id——模块的ID。
  • module.dependencies——一个数组，存储了此模块依赖的所有模块的ID列表。
  • module.exports——与exports指向同一个对象。

三种编写模块的模式

第一种定义模块的模式是基于exports的模式：

define(function (require, exports, module) {
    var a = require('a'); //引入a模块
    var b = require('b'); //引入b模块
    var data1 = 1; //私有数据
    var func1 = function () { //私有方法
        returna.run(data1);
    }
    exports.data2 = 2; //公共数据
    exports.func2 = function () { //公共方法
        return 'hello';
    }
});

上面是一种比较“正宗”的模块定义模式。除了将公共数据和方法附加在exports上，也可以直接返回一个对象表示模块，如下面的代码与上面的代码功能相同：

define(function (require) { //工厂函数返回的对象会赋值给 module.exports
    var a = require('a'); //引入a模块
    var b = require('b'); //引入b模块
    var data1 = 1; //私有数据
    var func1 = function () { //私有方法
        returna.run(data1);
    }
    return {
        data2: 2,
        func2: function () {
            return 'hello';
        }
    };
});

如果模块定义没有其它代码，只返回一个对象，还可以有如下简化写法：(第三种方法对于定义纯JSON数据的模块非常合适。)

//直接传入一个json，则json会被赋值给 module.exports
define({
    data: 1,
    func:function() {
        return'hello';
    }
});

模块的载入和引用

模块的寻址算法

上文说过一个模块对应一个js文件，而载入模块时一般都是提供一个字符串参数告诉载入函数需要的模块，所以就需要有一套从字符串标识到实际模块所在文件路径的解析算法。SeaJS支持如下标识：

  • 绝对地址 —— 给出js文件的绝对路径。
    如: require("http://example/js/a"); //就代表载入“http://example/js/a.js”。

  • 相对地址 —— 用相对require('./c')语句所在js文件的地址
    例如在“http://example/js/b.js”中载入 require("./c"); //则载入“http://example/js/c.js”。 require('../foo/bar')

  • 基址地址 —— 如果载入字符串标识既不是绝对路径也不是以”./”开头，则相对SeaJS全局配置中的“base”来寻址，这种方法稍后讨论。

注意上面在载入模块时都不用传递后缀名“.js”，SeaJS会自动添加“.js”。但是下面三种情况下不会添加：

根据应用场景的不同，SeaJS提供了三个载入模块的API，分别是seajs.use，require('moduleName')和require.async(moduleName)，下面分别介绍。

seajs.use

seajs.use主要用于载入入口模块。

入口模块相当于C程序的main函数，同时也是整个模块依赖树的根。上面在TinyApp小例子中，init就是入口模块。seajs.use用法如下：

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

# 回调模式
seajs.use('./a', function(a) {
    a.run();
});

# 多模块模式
seajs.use(['./a','./b'], function(a, b) {
    a.run();
    b.run();
});

一般seajs.use只用在页面载入入口模块，SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个，也可以通过给引入sea.js的script标签加入”data-main”属性来省略seajs.use，例如，上面TinyApp的index.html也可以改为如下写法：

# data-main ~~~当入口模块只有1个时，可用<script>标签的data-main属性定义入口
<scriptsrc="./sea.js" data-main="./init" ></script>
//这种写法会令html更加简洁。 貌似不行，seajs版本低的原因。

require

require是SeaJS主要的模块加载方法，当在一个模块中需要用到其它模块时一般用require加载：

var m = require('/path/to/module/file');

这里简要介绍一下SeaJS的自动加载机制。上文说过，使用SeaJS后html只要包含sea.js即可，那么其它js文件是如何加载进来的呢？SeaJS会首先下载入口模块，然后顺着入口模块使用正则表达式匹配代码中所有的require，再根据require中的文件路径标识下载相应的js文件，对下载来的js文件再迭代进行类似操作。整个过程类似图的遍历操作（因为可能存在交叉循环依赖所以整个依赖数据结构是一个图而不是树）。

明白了上面这一点，下面的规则就很好理解了：

传给require的路径标识必须是字符串字面量，不能是表达式，如下面使用require的方法是错误的：

//require(moduleName) moduleName只能为字符串字面量
require('module'+'1'); // error
require('Module'.toLowerCase()); //error

require.async

上文说过SeaJS会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用到时才下载，可以使用require.async：

require.async('/path/to/module/file',function(m) {
    //code of callback...
});

这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。

// 比如:
define(function(require, exports, module){
    var $ = require('jquery');
    if(needSayhi){
        require.async('sayhi', function(){
                console.log('in callback');
                //dosth..
        });
    }
    return {foo:'bar'};
});

SeaJS的全局配置

SeaJS提供了一个 seajs.config 方法可以设置全局配置，接收一个表示全局配置的配置对象。具体使用方法如下：

seajs.config({
    base: 'path/to/jslib/',
    alias: {
        'app': 'path/to/app/'
    },
    charset: 'utf-8',
    timeout: 20000,
    debug: false
});

  • base:表示基址寻址时的基址路径。
    例如base设置为”http://example.com/js/3-party/”，则 var $ = require('jquery'); 会载入”http://example.com/js/3-party/jquery.js”。

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

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

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

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

SeaJS如何与现有JS库配合使用

要将现有JS库如jQuery与SeaJS一起使用，只需根据SeaJS的的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：

define(function () {
   /*jQuery原有代码*/
    return $.noConflict();
});

SeaJS项目的打包部署

SeaJS本来集成了一个打包部署工具 spm ，后来作者为了更KISS一点，将spm拆出了SeaJS而成为了一个单独的项目。 spm的核心思想是将所有模块的代码都合并压缩后并入入口模块，由于SeaJS本身的特性，html不需要做任何改动就可以很方便的在开发环境和生产环境 间切换。但是由于spm目前并没有发布正式版本，所以本文不打算详细介绍，有兴趣的朋友可以参看其github项目主页https://github.com/seajs/spm/。

其实，由于每个项目所用的JS合并和压缩工具不尽相同，所以spm可能并不是完全适合每个项目。在了解了SeaJS原理后，完全可以自己写一个符合自己项目特征的合并打包脚本。

这里是不是说每个页面打包后最终只有1个js文件?? 那如果一个模块为多个页面共用，这种情况seajs内部会怎么处理?

转: javascript模块加载框架seajs详解的更多相关文章

  1. javascript模块加载框架seajs详解

    SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载).SeaJS可以和jQuery完美集成,使用 ...

  2. jquery.lazyload （JS懒加载框架使用详解）

    /** 本地加载方式加载JS*/        NSString *path = [[NSBundle mainBundle] pathForResource:@"jquery.js&quo ...

  3. 关于javascript模块加载技术的一些思考

    前不久有个网友问我在前端使用requireJs和seajs的问题,我当时问他你们公司以前有没有自己编写的javascript库,或者javascript框架,他的回答是什么都没有,他只是听说像requ ...

  4. 小矮人Javascript模块加载器

    https://github.com/miniflycn/webkit-dwarf 短小精悍的webkit浏览器Javascript模块加载器 Why 我们有许多仅基于webkit浏览器开发的应用 无 ...

  5. RequireJS 是一个JavaScript模块加载器

    RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...

  6. seo网页加速技术，预加载 DNS Prefetching 详解

    seo网页加速技术,预加载 DNS Prefetching 详解 DNS Prefetching 是什么 : DNS 是什么-- Domain Name System,域名系统,作为域名和IP地址相互 ...

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

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

  8. Webpack探索【16】--- 懒加载构建原理详解（模块如何被组建&如何加载）&源码解读

    本文主要说明Webpack懒加载构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack懒加载构建原理. 本文使用的 ...

  9. 构建自己的PHP框架之自动加载类中详解spl_autoload_register()函数

    在了解这个函数之前先来看另一个函数:__autoload. 一.__autoload 这是一个自动加载函数,在PHP5中,当我们实例化一个未定义的类时,就会触发此函数.看下面例子: printit.c ...

随机推荐

  1. 20151113--JSTL

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. scanf 和cin 的区别

    笔试的时候经常遇到突然string s;cin>>s; 有的时候编译会错误,不知道为什么. 今天在练习枚举类型的时候,也遇到这样一个问题. enum weekday{Monday,Tues ...

  3. Python核心编程读笔 12：OOP

    第13章 面向对象编程 一.基本概念 1.object类是所有类的基类,如果你的类没有继承任何其他父类,object 将作为默认的父类. 2.python创建实例时无需new: myFirstObje ...

  4. Java 初始化字段方式和顺序

    Java 初始化字段方式和顺序: 类加载时直接初始化静态字段; 类加载时调用静态方法初始化静态字段; 实例化对象时,在调用构造函数之前代码块中初始化字段; 实例化对象时,在调用构造函数之时初始化字段; ...

  5. C++中指针和引用的选择

    何时使用引用和指针      1. 尽可能使用引用传递参数      2. 尽可能的使用const来保护引用和指针      3. 在可以使用引用的时候不要使用指针      4. 不要试图给引用重新 ...

  6. 刷爆github小绿点

    转载请注明出处:https://ahangchen.gitbooks.io/windy-afternoon/content/kit/git/green_blush.html 工程地址,欢迎star!! ...

  7. 使用gSoap做一个简单的CS系统

    首先介绍一下gSoap,这是一个非常厉害的网络库,封装程度非常高而且跨平台. 支持SSL链接,数据格式为XML. 介绍地址: http://sourceforge.net/projects/gsoap ...

  8. mysql长连接和短连接的问题

    什么是长连接? 其实长连接是相对于通常的短连接而说的,也就是长时间保持客户端与服务端的连接状态. 通常的短连接操作步骤是: 连接->数据传输->关闭连接: 而长连接通常就是: 连接-> ...

  9. css学习笔记二

    下面来总结一下盒子模型,流式布局,浮动布局,层布局(定位布局). 1.盒子模型 有二种:IE盒子模型 和 标准w3c盒子模型 1)IE的盒子模型的content包含了padding和border 2) ...

  10. JSP、JSTL、EL

    Jsp Jsp内置对象: Response.Request.Page.pageContext.session.out.application.exception.config Out->jspW ...