JS模块化库seajs体验
seajs
http://seajs.org/docs/en.html#intro
https://github.com/seajs/seajs/releases
Extremely simple experience of modular development
Why use Sea.js ?
Sea.js's pursuit of a simple, natural coding and organization,has the following key aspects:
- The definition of a module specification is simple and friendly:Sea.js follow the CMD specification,as the Node.js module style.
- Natural and intuitive code organization:Automatically load dependence, configuration is simple and clear,so that we can more enjoy coding.
Sea.js provides common plug-ins,they are very helpful for the development of debugging and performance optimization,and has a rich extensible interface.
模块的声明非常 简单 和 友好。
自然和直觉性的代码组织方式。自动依赖下载 和 配置简单明了。
兼容性:
Compatibility
Sea.js has perfect test cases, compatible with all major browsers:
Chrome 3+ ✔ Firefox 2+ ✔ Safari 3.2+ ✔ Opera 10+ ✔ IE 5.5+ ✔Sea.js can be run in Mobile terminal,including Hybrid Mode App. In theory, Sea.js can be run in any browser.
CMD
http://wiki.commonjs.org/wiki/Modules/1.1.1
CMD规范模块定义格式
//Inside b.js: define(function(require, exports, module) { //If "a" has used exports, then we have a real //object reference here. However, we cannot use //any of "a"'s properties until after "b" returns a value. var a = require("a"); exports.foo = function () { return a.bar(); }; });
AMD规范:
http://www.requirejs.org/docs/api.html#funcmodule
//Inside b.js: define(["require", "a"], function(require, a) { //"a" in this case will be null if "a" also asked for "b", //a circular dependency. return function(title) { return require("a").doSomething(); } } );
实验
https://github.com/fanqingsong/code-snippet/tree/master/web/seajs_demo
one.js
//Inside one.js:
define(function(require, exports, module) {
var two = require('./two.js');exports.sayHello = function() {
console.log('one module called');
};exports.callTwo = function() {
two.sayHello();
};
}
);
two.js
//Inside two.js:
define(function(require, exports, module) {
exports.sayHello = function() {
console.log('two module called');
};
}
);
demo.html
<html>
<head>
<!--This sets the baseUrl to the "scripts" directory, and
loads a script that will have a module ID of 'main'-->
<script src="./sea.js"></script>
<style></style>
<script>
seajs.use('one', function(one) {
one.sayHello();
one.callTwo();
});
</script>
</head>
<body>
<h1>hello world!</h1>
</body>
</html>
相比requirejs,更加直接,使用更加简单。