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体验的更多相关文章

  1. Js模块化开发--seajs和gruntJs

    1.Seajs库 解决开发中的冲突依赖等问题,提供代码可维护性. SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css ...

  2. JS模块化规范CMD之SeaJS

    1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(w ...

  3. JS模块化开发：使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  4. JS模块化开发（三）——seaJs+grunt

    1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd ...

  5. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  6. js模块化AMD、CMD、ES6

    AMD CMD ES6模块化 各个模块化规范对比理解 一.AMD 在上一篇js模块化入门与commonjs解析与应用中详细的解析了关于commonjs模块化规范,commonjs采用的用同步加载方式, ...

  7. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  8. js模块化历程

    这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出 ...

  9. AMD and CMD are dead之js模块化黑魔法

    var define, require, define2, require2; typeof JSON != "object" && (JSON = {}), fu ...

随机推荐

  1. How to crack gbooks

    Damn cnblogs, no auto saving set by default, even worse than csdn, can't believe it, lost half an ho ...

  2. ACM: 继续畅通工程-并查集-最小生成树-解题报告

    继续畅通工程 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status Descri ...

  3. [BZOJ2788][Poi2012]Festival

    2788: [Poi2012]Festival Time Limit: 30 Sec  Memory Limit: 64 MBSubmit: 187  Solved: 91[Submit][Statu ...

  4. Linux的磁盘分区（1）

    分区命名: 1.Linux下的分区命名不同于windows下的命名,对硬盘如IDE硬盘采用类似/dev/hdxy的方式来命名,其中hd表示分区所在的设备类型,如IDE硬盘,x表示硬盘盘号(a为基本主盘 ...

  5. 李洪强iOS经典面试题137-内存管理

      内存管理 ARC处理原理 ARC是Objective-C编译器的特性,而不是运行时特性或者垃圾回收机制,ARC所做的只不过是在代码编译时为你自动在合适的位置插入release或autoreleas ...

  6. HDU 4006 优先队列

    The kth great number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Oth ...

  7. hdu Virtual Friends

    这题是一个很简单额并查集的题目,首先第一步是要用map将字符串映射为整型,这样方便后面的处理,然后就是用一个rank[]数组来记录每个朋友圈的人数.之后就是简单的并查集操作了. 这里给出一组测试案例: ...

  8. 微信APP支付（Java后台生成签名具体步骤）

    public class PayCommonUtil { //定义签名,微信根据参数字段的ASCII码值进行排序 加密签名,故使用SortMap进行参数排序 public static String ...

  9. Greenplum获取表结构

    最近在折腾greenplum,遇到一个蛋疼的问题,那就是获取表结构,也就是建表语句.大家都知道在MySQL里面是非常easy的,show create table table_name 就搞定了,在g ...

  10. php for循环嵌套

    <?php     //2.打印一个50*50的 'o' 的正方形方整, 使用for的嵌套     // oooooo     // oooooo     // oooooo //for循环嵌套 ...