By

seajs初学

a.什么是seaJS

SeaJS是一个遵循 CMD （通用模块定义）规范的JavaScript模块加载框架，可以像 Node.js 一般书写模块代码;

可以实现JavaScript的模块化开发及加载机制。

b.引用-reference

去seajs官网下载http://seajs.org/docs/#downloads,在页面头部head标签内引入seaJS，如下： <script src="js/sea.js" id="seajsnode"></script>，注意，这里加上了id=”seajsnode”，原因如下：

    1. SeaJS加载自身的script标签的其他属性（如data-config、data-main）等来实现不同的功能
    1. SeaJS内部通过document.getElementById(“seajsnode”)来获取这个script标签

入口-eajs.use

seajs.use 用来在页面中加载一个或多个模块。

example,如下文件结构

1
2
3
4
5
6

-helloSeajs
	 index.html
	-js
		seajs
		main.js
		a.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>seajs</title>
	<script src="js/sea.js" id="seajsnode" ></script>
	<script>
		seajs.use("main");
	</script>
</head>
<body>
	hi
</body>
</html>

attention，以上index.html引用main.js的目录是相对于seajs所在的路劲

在调用 seajs.use 之前，需要先引入 sea.js 文件

// 加载一个模块
seajs.use('mian');

// 加载一个模块，在加载完成时，执行回调
seajs.use('a', function(a) {
  a.doSomething();
});

// 加载多个模块，在加载完成时，执行回调
seajs.use(['main', 'a'], function(main, a) {
  main.doSomething();
  a.doSomething();
});

seajs.config 配置

seajs.config({

  // 设置路径，方便跨目录调用
  paths: {
    'arale': 'https://a.alipayobjects.com/arale',
    'jquery': 'https://a.alipayobjects.com/jquery'
  },

  // 设置别名，方便调用
  alias: {
    'class': 'arale/class/1.0.0/class',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  }

});

define 定义模块

Sea.js 推崇一个模块一个文件，遵循统一的写法： define define(factory) define 接受 factory 参数，factory 可以是一个函数，也可以是一个对象或字符串。

//a.js
define({
	"my":"pengyouyi"
})

or

//a.js
define(function(require,exports,module){
 	exports.sayhi = function(){
 		alert("hello world");
 	};
 })

or

//a.js
define(function(require,exports,module){
	var $ = require('jquery');
	var a = {};
	a.sayhi = function(){
		$("#demo").append("hello seajs");
	};
	module.exports = a;
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>seajs</title>
	<script src="js/sea.js" id="seajsnode"></script>
	<script>
		seajs.use(["main","a"],function(main,a){
			//console.log(a)
			a.sayhi();
		});
	</script>
</head>
<body>
	<div id="demo"></div>
</body>
</html>

attention: 上面var $ = require(“jquery”)的使用，需要按照CMD定义封装一次jQuery原文件

define(function(){
    //jquery源代码
    return $.noConflict();
});

define 更多https://github.com/seajs/seajs/issues/242

require

require 用来获取指定模块的接口。

//main.js
define(function(require){
	var a = require('a');
	a.sayhi();
})

attention

1.模块 factory 构造方法的第一个参数 必须 命名为 require , 不能是req等其他的
2.不要重命名 require 函数，或在任何作用域中给 require 重新赋值。 如var req = require; …are error
3.require 的参数值 必须 是字符串直接量。 require(myModule); … are error

require 更多https://github.com/seajs/seajs/issues/259

require.async

用来在模块内部异步加载一个或多个模块。

//other.js
define(function(require) {

  // 异步加载一个模块，在加载完成时，执行回调
  require.async('./b', function(b) {
    b.doSomething();
  });

  // 异步加载多个模块，在加载完成时，执行回调
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });

});

exports

用来在模块内部对外提供接口。

define(function(require,exports){
	exports.foo = "bar";
	exports.add = function(a,b){
		return a + b;
	}
})

module.exports

与 exports 类似，用来在模块内部对外提供接口。

define(function(require, exports, module) {
  module.exports = {
    foo: 'bar',
    doSomething: function() {}
  };
});

更多-more