Sea.js 是一个模块加载器

1 模块定义define

define(function(require,exports,module){

//require 引入需要的模块如jquery等

//var $ = require(‘./jquery‘);

//exports可以把方法或属性暴露给外部

exports.name = ‘hi‘;

exports.hi = function(){

alert(‘hello‘);

}

//module提供了模块信息

});

2 使用定义好的模块seajs.use

<!doctype html>

<html>

<head>

<title>SeaJs Test</title>

<meta charset="UTF-8">

<script type="text/javascript" src="seajs/sea.js"></script>

</head>

<body>

<script type="text/javascript">

//第一个参数是模块标识,即要使用模块的路径,这里是t1.js

//第二个参数是一个回调函数

seajs.use(‘./js/t1‘,function(t){

t.hi();

});

</script>

</body>

</html>

3 加载依赖项require

//名称必须是require,可以理解为一个关键词一样,接收一个参数

var $ = require(‘./jquery‘);

4 向外部提供接口exports

define(function(require,exports,module){

//exports可以把方法或属性暴露给外部

exports.name = ‘hi‘;

exports.hi = function(){

alert(‘hello‘);

}

});

5 当前模块信息module

 1) module.id 模块标识

  2)module.uri 根据模块系统的路径解析规则得到的模块绝对路径

  3) module.dependencies 表示当前模块的依赖列表,是一个数组

  4) module.status 当前模块的状态,是一个数值

6    Sea.js 是一个模块加载器,模块加载器需要实现两个基本功能:

文档: https://github.com/seajs/seajs/issues/260

1) 模块定义规范的实现

这就是 define,require,exports,module 的实现

2)模块系统的启动

有了 define 等模块定义规范的实现,我们可以开发出很多模块。但光有一堆模块不管用,我们还得让它们能跑起来

在 Sea.js 里,要启动模块系统很简单

<script src="path/to/sea.js"></script>

<script>

seajs.use(‘./main‘);

</script>

seajs.use用来在页面中加载模块。

// 加载模块 main,并在加载完成时,执行指定回调

seajs.use(‘./main‘, function(main) {

main.init();

});

use 方法还可以一次加载多个模块:

// 并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调

//callback 参数可选,省略时,表示无需回调。

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

a.init();

b.init();

});

3)  与 DOM ready 的关系

注意:seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证,比如:

seajs.use([‘jquery‘, ‘./main‘], function($, main) {

$(document).ready(function() {

main.init();

});

});

4) sea.js 的引入

在调用 seajs.use 之前,需要先引入 sea.js 文件,推荐直接使用 script 标签同步引入

<script src="path/to/sea.js"></script>

7   最佳实践

1)seajs.use 理论上只用于加载启动,不应该出现在 define 中的模块代码里。在模块代码里需要异步加载其他模块时,推荐使用 require.async 方法。

2)引入 sea.js 时,可以把 sea.js 与其他文件打包在一起,可提前合并好,或利用 combo 服务动态合并。无论哪一种方式,为了让 sea.js 内部能快速

获取到自身路径,推荐手动加上 id 属性:

<script src="path/to/sea.js" id="seajsnode"></script

加上 seajsnode 值,可以让 sea.js 直接获取到自身路径,而不需要通过其他机制去自动获取。这对性能和稳定性会有一定提升,推荐默认都加上

时间: 2024-10-23 01:06:41

Sea.js 是一个模块加载器的相关文章

实现简单的 JS 模块加载器

实现简单的 JS 模块加载器 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块的定义,如果您之前有去思考过按需加载的原理,那你可能已经知道按需加载需要依赖一个模块加载器.它可以加载所有的静态资源文件,比如: JS 脚本 CSS? 脚本 图片 资源 如果你了解 webpack,那您可以发现在 webpack 内部,它实现了一个模块加载器.模块加载器本身需要遵循一个规范,当然您可以自定义规范,大

JavaScript AMD 模块加载器原理与实现

关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者遵循 CMD规范.前者的规范产出比较适合于浏览器异步环境的习惯,后者的规范产出对于写过 nodejs 的同学来说是比较爽的.关于两者的比较,有兴趣的同学请参看玉伯在知乎的回答 AMD和CMD的区别有哪些.本文希望能按照 AMD 规范来简单实现自己的一个模块加载器,以此来搞清楚模块加载器的工作原理.

模块加载器

模块加载器 最近在做新项目的时候自己利用一点业余时间写了一个简单的js模块加载器.后来因为用了webpack就没有考虑把它放到项目里面去,也没有继续更新它了.模块加载器开源的有很多,一般来说seaJS和reqiureJS都能满足基本需求.本篇博文主要分享一下卤煮写这个加载器的一些想法和思路,作为学习的记录. js模块化加载已经不是一个新鲜概念了,很多人都一再强调,大型项目要使用模块化开发,因为一旦随着项目的增大,管理和组织代码的难度会越来越难,使得我们对代码的管理变得重要起来.当然,在后端模块化

js与AMD模块加载

目的: 了解AMD规范与CMD规范,写一个模块加载器雏形. 基本概念: AMD是异步模块定义规范,而CMD是通用模块定义规范.其他的还有CommonJS Modules规范. 对于具体的规范,可以参考: https://github.com/amdjs/amdjs-api/wiki/AMD AMD规范 https://github.com/seajs/seajs/issues/242 CMD规范 http://www.zhihu.com/question/20351507/answer/1485

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

之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7628(大神的文章写的很详细,建议先看完大神的文章) 一.js模块化 什么是js模块化,我们从历史说起. 1.一开始我们怎么写脚本?就是在html文件中用<script></script>写代码 这种方式的缺点:代码复用靠复制,基本是全局变量. 2.后来我们用js文件写代码,用<

SeaJS:一个适用于 Web 浏览器端的模块加载器

什么是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

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

在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ...... 为了深入了解加载器,中间阅读过一点requireJS的源码,但对于很多同学来说,对加载器的实现依旧不太清楚 事实上不通过代码实现,单单凭阅读想理解一个库或者框架只能达到一知半解的地步,所以今天便来实现一个简单的加载器 加载器原理分析 分与合 事实上,一个程序运行需要完整的模块,以下代码为例: 1

JS模块加载器加载原理是怎么样的?

路人一: 原理一:id即路径 原则.通常我们的入口是这样的: require( [ 'a', 'b' ], callback ) .这里的 'a'.'b' 都是 ModuleId.通过 id 和路径的对应原则,加载器才能知道需要加载的 js 的路径.在这个例子里,就是 baseUrl + 'a.js' 和 baseUrl + 'b.js'. 但 id 和 path 的对应关系并不是永远那么简单,比如在 AMD 规范里就可以通过配置 Paths 来给特定的 id 指配 path. 原理二:crea

关于前端JS模块加载器实现的一些细节

最近工作需要,实现一个特定环境的模块加载方案,实现过程中有一些技术细节不解,便参考 了一些项目的api设计约定与实现,记录下来备忘. 本文不探讨为什么实现模块化,以及模块化相关的规范,直接考虑一些技术实现原理. 1.简单实现模块化 一开始我想如果我的代码只有一个文件,那几行不就实现了吗 main.js var modules = {} var define = function(id,factory){ moudles[id] = factory } var require = function