seajs入门教程

时间 2019-12-04

标签 seajs 入门教程繁體版

原文原文链接

本文转自张洋，由于SeaJS更新版本很快，因此原文中不少地方不太适用，在这里发布一个更新版。javascript

如何使用SeaJS

下载及安装在这里不赘述了，不了解的请查询官网。css

基本开发原则

一切皆为模块：SeaJS中的模块概念有点相似于面向对象中的类--模块能够拥有数据和方法，数据和方法能够定义为公共或私有，公共数据和方法能够供别的模块调用。html
每一个模块应该都定义在一个单独的js文件中，即一个对应一个模块。java

模块的定义和编写

模块定义函数define

SeaJS中使用define函数定义一个模块。define能够接收三个参数：jquery

/**
* 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…
}

define能够接收的参数分别是模块ID，依赖模块数组及工厂函数。json

若是只有一个参数，则赋值给factory数组
若是有两个参数，第二个赋值给factory，第一个若是是数组则赋值给deps，不然赋值给idapp
若是有三个参数，则分别赋值async

可是，包括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解析

工厂函数是模块的主体和重点。它的三个参数分别是：

require：模块加载函数，用于记载依赖模块
exports：接口点，将数据或方法定义在其上则将其暴露给外部调用
module：模块的元数据
这三个参数能够根据须要选择是否须要显示指定。

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

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

三种编写模块的模式

第一种是基于exports的模式：

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

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

define(function(require){
    var a=require('a');
    var b=require('b'); //引入模块
    
    var data1=1;
    
    var fun1=function(){
        return a.run(data1);
    }
    
    return{
        data2:2,
        fun2:function(){
            return 'hello';
        }
    }
})

若是模块定义没有其余代码，只返回一个对象，还能够有以下简化写法：

define({
    data2:2,
        fun2:function(){
            return 'hello';
        }
    })

第三种写法对于定义纯JSON数据的模块很是合适。

根据应用场景的不一样，SeaJS提供了三个载入模块的API，分别是：seajs.use,require和require.async。

seajs.use

seajs.use主要用于载入入口模块。入口模块至关于C语言的main函数，同时也是整个模块依赖树的根。seajs.use
的用法以下：

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

其中多模块的用法和KISSY中的模块加载方法相似，不亏是一我的写的啊！
通常seajs.use只用在页面载入入口模块，SeaJS会顺着入口模块解析全部依赖模块并将它们加载。若是入口模块只有一个，也能够经过给引入seajs的script标签加入“data-main”属性来省略seajs.use，例如一下写法：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
</head>
<body>
    <p class="content"></p>
    <script src="./sea.js" data-main="./init"></script>
</body>
</html>

require

require是seajs主要的模块加载方法，当在一个模块中须要用到其余模块时通常用require加载：

var m=require('./a');

require.async

上文说过seajs会在html页面打开时经过静态分析一次性记载全部须要的js文件，若是想要某个js文件在用时才加载，可使用require.async。
这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。

SeaJS的全局配置

seajs提供了一个seaj.configd的方法能够设置全局配置，接收一个表示全局配置的配置对象，具体方法以下：

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

其中，

base表示基址路径
alias能够对较长的经常使用路径设置缩写
charset表示下载js时script标签的charset属性。
timeout表示下载文件的最大时长，以毫秒为单位。

Seajs如何与现有的JS库配合使用

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

define(function(){
    /*
    此处为jquery源码
    */

    })

一个完整的例子：
上文说了那么多，知识点比较分散，因此最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们概括回顾。这个例子包含以下文件：

index.html 主页面
sea.js
jquery.js
init.js init模块，入口模块，依赖data、jquery、style三个模块，又主页面载入
data.js data模块，纯json数据模块
style.css css样式表

html：

<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <p class="author"></p>

    <p class="blog"><a href="#">Blog</a></p>
</div>
<script src="sea.js"></script>
<script>
        seajs.use('init');
</script>
</body>
</html>

javascript:

//init.js
define(function(require, exports, module) {
    var $ = require('./jquery');
    var data = require('./data');
    var css = require('./style.css');
 
    $('.author').html(data.author);
    $('.blog').attr('href', data.blog);
});
 
//data.js
define({
    author: 'ZhangYang',
    blog: 'http://blog.codinglabs.org'
});

css:

.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}

请注意：
1.请讲jquery.js源码文件包含在seajs模块加载代码中；

2.在Sea.js < 2.3.0版本以前是能够加载css文件的，新版本中此功能移除，为了兼容考虑，加载css功能将做为一个插件存在。

使用方法

能够在sea.js标签后引入这个插件使用
也能够将插件代码混入sea.js当中
和seajs-style的区别
- seajs-css是使 Sea.js 可以加载一个css文件，和link标签同样
- seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串