seajs入门教程

n7then 发布于2019-08-21 10:50 / 2500人阅读

摘要：一般也不需要传入，需要用到的模块用加载即可。根据应用场景的不同，提供了三个载入模块的，分别是和。主要用于载入入口模块。入口模块相当于语言的函数，同时也是整个模块依赖树的根。表示下载文件的最大时长，以毫秒为单位。

本文转自张洋，因为SeaJS更新版本很快，所以原文中很多地方不太适用，在这里发布一个更新版。

如何使用SeaJS

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

基本开发原则

一切皆为模块：SeaJS中的模块概念有点类似于面向对象中的类--模块可以拥有数据和方法，数据和方法可以定义为公共或私有，公共数据和方法可以供别的模块调用。

每个模块应该都定义在一个多带带的js文件中，即一个对应一个模块。

模块的定义和编写 模块定义函数define

SeaJS中使用define函数定义一个模块。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…
}

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

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

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

如果有三个参数，则分别赋值

但是，包括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，例如一下写法：

TinyApp

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：





    
    Title



    

    Blog

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 字符串

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86280.html

seajs 模块化编程js代码

摘要：模块初始化时，会调用且仅调用一次该工厂函数。用来向外提供模块的除了给对象增加成员，还可以使用直接向外提供可简化为函数用来访问其他模块提供的异步加载模块，并在加载完成后执行回调函数使用的内部机制来解析并返回模块路径。手册的模块化插件 seajs是我刚入门前端就接触到的一个javaScript模块加载框架。使用seajs后javaScript代码的可读性和清晰度有了很大的提升，插件的使用和...

YJNldm 2019-08-19 17:10 评论0 收藏0
seajs模块化改造实践

摘要：为对象字符串时，表示模块的接口就是该对象字符串。我们来看一个实际的例子支付宝的登陆页面。在网页支付宝收银台中的运用很直观的就能看到插模块的合并，这个合并的工作就是构建工具的功劳了。前言一月份的时候，临近放假，拿到一个需求，新增一个产品，我一个前端对一个java后端，两个星期的开发时间。因为大部分功能在别的产品都已经有了，基本都是简单处理一下拿过来，再添加一下额外需要的功能，比如选...

justjavac 2019-08-20 14:20 评论0 收藏0
require.js构建优化

摘要：未构建之前，全部分开加载。的优化，得再看下的示例，然后再写篇笔记记录下来。想摸透javascript模块化编程是怎么一回事，在seajs和requirejs之间兜兜转转，看了许多相关资料和文章，算是大致理清它们的异同，撇开requirejs加载方式的另类（其实目前我暂时还没去感受），于写法，比较喜欢requirejs的写法，这个比较主观，这也得益于阮一峰大大那篇Javascript模...

yacheng 2019-08-21 12:22 评论0 收藏0
JavaScript模块化发展

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到所有依赖加载完成之后前置依赖，这个回调函数才会运行。如果将前面的代码改写成形式，就是下面这样定义了一个文件，该文件依赖模块，当模块加载完毕之后执行回调函数，这里并没有暴露任何变量。模块化是我们日常开发都要用到的基本技能，使用简单且方便，但是很少人能说出来但是的原因及发展过程。现在通过对比不同时期的js的发展，将JavaScript模...

mengbo 2019-08-22 18:05 评论0 收藏0
前端工程师必备：前端的模块化

摘要：规范则是非同步加载模块，允许指定回调函数，可以实现异步加载依赖模块，并且会提前加载由于主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以规范比较适用。 JS模块化模块化的理解什么是模块？将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起；块的内部数据/实现是私有的, 只是向外部暴露一些接口(...

Render 2019-08-23 16:54 评论0 收藏0