码迷,mamicode.com
首页 > Web开发 > 详细

JS模块化库seajs体验

时间:2016-06-13 23:21:50      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:

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,更加直接,使用更加简单。

JS模块化库seajs体验

标签:

原文地址:http://www.cnblogs.com/lightsong/p/5582366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!