什么是SeaJS?
SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容。在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definition)规范。SeaJS本身遵循(Keep it Simple, Stupid)理念开发,API仅有几个。

为什么用SeaJS?
假如我们要开发一个web应用App,在这个应用中需要使用jquery框架。App的首页index.html会用到module1.js,module1.js依赖module2.js和module3.js,同时module3.js依赖module4.js。传统方式,index.html需要引入module1.js及其所有下层依赖(顺序不能错)。随着项目的进行,js文件会越来越多,依赖关系会越来越复杂,使得js代码和html里的script列表变的难以维护。
而使用SeaJS,index.html不再需要引入所有依赖的js文件,只需要引入一个sea.js,sea.js会处理所有依赖,加载相应的js文件。

SeaJS特性
1、html页面不用再维护冗长的script标签列表,只要引入一个sea.js即可。
2、js代码以模块进行组织,各个模块通过require引入自己依赖的模块,代码清晰明了。

基本原则
1、在sea.js里,使用define(工厂函数factory)函数定义模块,模块就是一个函数,在CMD(Common Module Definition)模块定义规范中,一个模块就是一个JS文件。
2、模块的执行,必须要其依赖的模块准备就绪才能顺利执行。
3、在Sea.js里,模块的概念类似于面向对象中的类,模块有自己的数据和方法,数据和方法可以是公共的也可以是私有的,公共的可以供别的模块调用。

三种载入模块的API
seajs.use 主要用于载入入口模块,同时也是整个模块依赖树的根。一般只用在页面载入入口模块,用来在页面中加载一个或多个模块。如果入口模块只有一个,也可以使用sea.js的script标签加入"data-main"="./main"属性来省略seajs.use.
require 主要的模块加载方法,引入依赖,指定模块的接口,当一个模块需要另一个模块时用require加载。require只接受字符串直接量作为参数。
require.async 用来在模块内部异步加载一个或多个模块。seajs会在html页面打开时通过静态分析一次性加载所需要的js文件,如果想某个js文件在用到时才加载,则使用该方法。
分别:require是同步向下执行,require.async则是异步回调执行,且一般用来加载可延迟异步加载的模块。

前台JS应尽可能使用缓存,将config.js中的map:[]中代码去掉。可以在firebug里查看效果,去掉后请求的连接后没有了?d=……,即去掉了时间戳,下次访问将使用缓存。

如何使用?
Step1:
在页面引入sea.js。为了让sea.js内部能快速获取到自身路径,推荐手动加上id属性:
<script src="http://path/to/seajs/1.2.0/sea.js" id="seajsnode"></script>
Step2: 使用seajs.use加载模块文件:

<script>
seajs.use('./hello')// 可以带 callbackseajs.use('./hello',function(hello){hello.api()})// 也可同时(依次)加载多个模块 seajs.use(['./hello','./world'],function(hello,world){hello.api()world.api()})
</script>

你应该已经注意到,被加载的模块文件都没带后缀,那是因为 SeaJS 默认会给没有指定后缀的自动补上.js后缀。但有两种情况是不会自动添加的,一是路径以井号#结尾,二是路径中含有问号?。

SeaJS全局配置参数

static/my/js/sea/config.js

base:表示基址寻址时的基址路径,若设置base: www.baidu.com/,当var model = require("jquery");,会载入www.baidu.com/jquery.js;

alias:可以让文件的真实路径与调用标识分开,对较长的常用路径设置缩写,有利于统一维护;

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

timeout:表示加载文件的最大时长,单位为毫秒;

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

seajs.config({
paths: {
'gallery':'https://a.alipayobjects.com/gallery',
'app':'path/to/app',
}
});
define(function(require, exports, module) {
var underscore =require('gallery/underscore');
//=> 加载的是 https://a.alipayobjects.com/gallery/underscore.jsvar biz =require('app/biz');
//=> 加载的是 path/to/app/biz.js });

paths:当目录比较深,或需要跨目录调用模块时,可以使用paths来简化书写;也可以结合alias配置一起使用,让模块引用更方便。

seajs.config({
vars: {
'locale':'zh-cn'
}
});
define(function(require, exports, module) { var lang =require('./i18n/{locale}.js');
//=> 加载的是 path/to/i18n/zh-cn.js });

SeaJS示例演示

在页面中引用main.js文件:

main.js文件依赖view.js文件:

view.js文件的架构,依赖model.js和rm.js:

三个参数

工厂函数factory解析:

工厂函数是模块的主体和重点,在只传递一个参数给define时,这个参数就是工厂函数,此时工厂函数有三个参数。

require:用来指定模块的接口,引入依赖,获取其他模块提供的接口;注意:require只接受字符串直接作为参数。
exports:用来在模块内部对外提供接口,将数据或方法定义在其上则将其暴露给外部调用。
module:模块的元数据,该对象存储了与当前模块关联的一些属性和方法。

SeaJS:一个适用于 Web 浏览器端的模块加载器的更多相关文章

  1. 构建服务端的AMD/CMD模块加载器

    本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言:  在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...

  2. 实现简单的 JS 模块加载器

    实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...

  3. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  4. 【模块化编程】理解requireJS-实现一个简单的模块加载器

    在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...

  5. 一个简单的AMD模块加载器

    一个简单的AMD模块加载器 参考 https://github.com/JsAaron/NodeJs-Demo/tree/master/require PS Aaron大大的比我的完整 PS 这不是一 ...

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

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

  7. 实现一个类 RequireJS 的模块加载器 (二)

    2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...

  8. 使用RequireJS并实现一个自己的模块加载器 (二)

    2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...

  9. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

随机推荐

  1. js和jQuery中的事件绑定与普通事件

    普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...

  2. THE DEFINITIVE GUIDE TO DEBUGGING JAVASCRIPT

    FIGURING OUT WHERE THE ERROR COULD BE READ THE CODE USING THE CONSOLE THE CHROME DEV TOOLS THE DEBUG ...

  3. 【1】【leetcode-115】 不同的子序列 distinct-subsequences

    不同的子序列 distinct-subsequences(hard) (忘了,典型) 给定一个字符串 S 和一个字符串 T,计算在 S 的子序列中 T 出现的个数. 一个字符串的一个子序列是指,通过删 ...

  4. GCC编译器原理(一)04------GCC 工具:nlmconv、nm、objcopy、objdump和 ranlib

    1.3.13 nlmconv nlmconv 将可重定位的对象文件(Infile)转换为 NetWare 可加载模块(outfile),并可选择读取头文件信息获取 NLM 头信息. 选项,描述 -I ...

  5. 【bzoj 3524】[Poi2014]Couriers

    Description 给一个长度为n的序列a.1≤a[i]≤n.m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. ...

  6. springboot项目怎么部署到外部tomcat

    spring-boot项目中,默认提供内嵌的tomcat,所以打包直接生成jar包,用Java -jar命令就可以启动. 但是也有一定的需求,会使用外部tomcat来部署项目.下面来看: 1.新建项目 ...

  7. 如何修改Jupyter Notebook的主题

    1.windows系统 (1)下载到本地(使用git bash命令行界面) git clone https://github.com/dunovank/jupyter-themes (2)Instal ...

  8. intptr_t 指针

    对于64为系统: typedef  signed char  int8_t; typedef short int int16_t; typedef int int32_t; # if __WORDSI ...

  9. 前端面试(二):N轮面试

    一面 在一面中要掌握什么技巧,主要考察前端开发的基础知识 1.面试技巧.页面布局类 页面布局小结: 语义化掌握到位 页面布局理解深刻 CSS基础知识扎实 思维灵活且积极上进 代码书写规范 2.CSS盒 ...

  10. Python Django 实用小案例2

    动态导入模块 Django返回序列化数据  动态导入模块 在Django里面,经常会看到一些方法或者类是动态导入,尤其是以settings文件为代表,经常把一些类放在里面动态调配,比如随便拿Djang ...