seajs
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 specification,as the 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 , 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
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规范:
//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(); } });
实验
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,更加直接,使用更加简单。