seajs实现JavaScript 的 模块开发及按模块加载
seajs实现了JavaScript 的 模块开发及按模块加载。用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。
官方文档:http://seajs.org/docs/#docs
首先看看seajs是怎么进行模块开发的。使用seajs基本上只有一个函数“define”

fn.define
= function(id,
deps, factory) { //code of function… }

使用define函数来进行定义一个模块,根据 CMD (Common Module Definition)模块定义规范。一个文件就是一个模块。所以一个js文件中只有一个define,即一个文件是一个模块,SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。
官方实例中,define只传入一个参数: 一个工厂函数

define(function(require,
exports, module) { //code of the module... });

在看参数之前,我们先看看define是如何处理参数的:
fn.define = function(id, deps, factory)
define可以接收的参数分别是模块ID,依赖模块数组及工厂函数;
如果只有一个参数,则赋值给factory。
如果有两个参数,第二个赋值给factory;第一个如果是array则赋值给deps,否则赋值给id。
如果有三个参数,则分别赋值给id,deps和factory。
根据官方实例,建议还是根据官方的来就传递一个参数,即只有factory参数,这样的话模块id默认为js文件路径。
在来看看工厂函数的参数:
require, exports, module
require——模块加载函数,用于记载依赖模块。通过这个参数来进行对其他模块的加载。
exports——接口点,将数据或方法定义在其上则将其暴露给外部调用。通过这个参数,来将这个模块的方法进行暴露
module——模块的元数据。其是一个对象,有属性:
module.id——模块的ID。
module.dependencies——一个数组,存储了此模块依赖的所有模块的ID列表。
module.exports——与exports指向同一个对象。
使用factory的参数的使用:

define(function(require,
exports, module) { var a = require('./a');//引入a模块 exports.fun2= function(){
alert("fun2");
a.dosomething();
} }

使用require对象来进行加载模块,其实使用正则表达式进行验证加载的,所以其参数必须是特定的字符串,不能是表达式。
seajs会自动在require的参数中加入".js"来进行加载,即不需要写上后缀名,但是在某些情况下,seajs不会为其添加“.js”:
1.载入css:
require("./module1-style.css");
2.路径中含有“?”:
require(<a href="http://example/js/a.json?b=func">http://example/js/a.json?cb=func</a>);
3.路径以“#”结尾:
require("http://example/js/a.json#");
使用exports来向外部暴露方法,或者属性。暴露属性有几种方式,如上面中的例子是一种方式,另外还有:
使用return:

define(function(require)
{
var data1 = 1; //私有数据
var func1 = function() { //私有方法
returna.run(data1);
} //暴露
return{
data2: 2,
func2:function() {
return'hello';
}
};
});

直接返回json对象:

define({
data: 1,
func:function() {
return'hello';
}
});

页面中调用seajs
前面说了seajs用来解决模块开发,和繁琐的文件依赖问题,所以所有的文件依赖都是通过require对象进行加载,或者可以使用require.async(“./a”)来进行异步加载,即当使用到的时候才进行加载,
注:无论是require()还是require.async()都可以有第二个参数为回调函数,当文件加载成功时调用:
require.async(
'/path/to/module/file'
,
function
(m) {
//code of callback...
});
<script src="./sea.js" data-main="./init"></script>
即可,其中data-main="./init" 为入口模块,表示加载这个模块,在进行迭代加载其所依赖的模块,使用这个属性可以省略seajs.use。这个后面说。
使用seajs.config进行全局配置:

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

这是对seajs进行全局配置,
base表示基址寻址时的基址路径
alias可以对较长的常用路径设置缩写。
charset表示下载js时script标签的charset属性。
timeout表示下载文件的最大时长,以毫秒为单位。
debug表示是否工作在调试模式下。
使用seajs.use 载入入口模块,相当于java的main函数,

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

下面可以看其官方给的simple例子中的页面怎么写的,基本上就明白了sea.js 是怎么用的了:
来自:http://www.cnblogs.com/lic309/p/4136389.html

<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
<script> // Set configuration
seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
}); // For development
if (location.href.indexOf("?dev") > 0) {
seajs.use("../static/hello/src/main");
}
// For production
else {
seajs.use("examples/hello/1.0.0/main");
}
</script>

//mian.js

//hello/mian.js
define(function(require) { var Spinning = require('./spinning'); var s = new Spinning('#container');
s.render(); });
seajs实现JavaScript 的 模块开发及按模块加载的更多相关文章
- Webpack探索【16】--- 懒加载构建原理详解(模块如何被组建&如何加载)&源码解读
本文主要说明Webpack懒加载构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack懒加载构建原理. 本文使用的 ...
- Webpack探索【15】--- 基础构建原理详解(模块如何被组建&如何加载)&源码解读
本文主要说明Webpack模块构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack的基础构建原理. 本文使用的W ...
- iOS开发UI篇—懒加载
iOS开发UI篇—懒加载 1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了, ...
- Android开发中如何解决加载大图片时内存溢出的问题
Android开发中如何解决加载大图片时内存溢出的问题 在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给 ...
- Linux内核启动代码分析二之开发板相关驱动程序加载分析
Linux内核启动代码分析二之开发板相关驱动程序加载分析 1 从linux开始启动的函数start_kernel开始分析,该函数位于linux-2.6.22/init/main.c start_ke ...
- 【Java Web开发学习】Spring加载外部properties配置文件
[Java Web开发学习]Spring加载外部properties配置文件 转载:https://www.cnblogs.com/yangchongxing/p/9136505.html 1.声明属 ...
- 基于JRebel开发的MybatisPlus热加载插件
前言 前天项目中使用了mybatis-plus,但是搭配Jrebel开发项目时,发现修改mapper的xml,或者mapper方法中的注解,Jrebel并没有能够reload mapper.于是就有了 ...
- js 模块开发之一(模块开发价值)
首先引用我们的今天的主角 ----<前端模块化开发的价值> 1,前端开发最常见的两个问题 ---命名冲突和文件依赖 2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间 va ...
- iOS开发UI中懒加载的使用方法
1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其getter方法.说的通俗一点,就是在开发中,当程序中需要利用的资源时.在程序启动的时候不加载 ...
随机推荐
- DbHelper为什么要用Using?
我们分析一下DbHelper做什么事情,大家都知道它用于数据库的连接操作,这里的数据库连接会创建非托管资源,c#的垃圾回收机制不会对它处理,需要实现IDisposable接口手动释放. 手动释放的 ...
- 06OC之内存管理
在高级语言中,例如C#是通过垃圾回收机制(GC)来解决这个问题,但是在OC并没有类似的垃圾回收机制,因此必须由程序员手动去维护.今天就讲讲OC中的内存管理: 一.内存管理原理 在Xcode4.2之后的 ...
- BZOJ2006——[NOI2010]超级钢琴
1.题意:给一个序列,让你取出k个不同的区间,要求长度在之间,问所有区间和的最大值 2.分析:这道题拿过来就能知道是要拿出前k个最大的区间,我们思考最暴力的做法,就是把这个所有的区间枚举出来算,取出前 ...
- JavaScript访问ab页面定时跳转代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python set
set是一个工厂函数(filter也是工厂函数),是一个可变的集合 frozenset 不可变的集合,与set共性,他也在内部自动去重, >>> num5=frozenset([1, ...
- discuz上传图片提示附件文件无法保存
两个可能: 1. 服务器文件夹权限不足 discuz附件保存在./data/attachments下,data文件夹的属性要求必须为777 #cd到data的上一级目录然后执行: data 2. 附件 ...
- 解决selenium2在IE11上出错的问题,如Unable to get browser
官方解决方案: https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver#required-configuration Re ...
- Linux压缩和解压汇总
各种后缀的压缩包压缩方法和解压方法 压缩包 压缩 解压 .tar.gz和.tgz tar -czf jpg.tar.gz *.jpg tar -xzvf filename -C path .tar.b ...
- android so调试时遇到的坑 - arm流水线
直接看下面这段ARM汇编: 此时运行到的代码为ADD R3,PC 此时看一下寄存器窗口的值: 按理来说执行完ADD R3,PC后的效果应该是R3=R3+PC ,R3=40A1D5C8 但是我们可以执行 ...
- poj1988_Cube Stacking
Cube Stacking Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 24130 Accepted: 8468 Ca ...