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. ACM Haffman编码

    Haffman编码 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 哈弗曼编码大家一定很熟悉吧(不熟悉也没关系,自己查去...).现在给你一串字符以及它们所对应的权值 ...

  2. ACM: HDU 2544 最短路-Dijkstra算法

    HDU 2544最短路 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Descrip ...

  3. [Leetcode] Palindrome Partitioning

    Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...

  4. BZOJ4532: [BeiJing2014 WinterCamp] 珠链

    Description Alex喜欢玩网络游戏,认为这是智力和体力的综合锻炼.在一次游戏活动中,他意外获得了一个传说中威力极其强大的法宝:珠链.  珠链,顾名思义,就是由许多小珠子串起来的一条链.珠子 ...

  5. C语言中计算变量占用内存空间

    C语言中计算变量占用内存空间 在C语言中通常用[sizeof]运算符计算变量占内存空间,如下面的例子:

  6. memcached 的安装与使用

    准备条件:下载memcached的服务器端memcached-1.2.1.win32.zip(虽然最新版本已经是1. 4.6了,但win版本的好像还一直未更新,或找不到.) A.windows上的安装 ...

  7. 用Maven生成Eclipse中的Web项目

    转自:http://my.oschina.net/u/939893/blog/170185 进入workspace, 输入以下命令 mvn archetype:generate -DgroupId=  ...

  8. java.lang.String

    1.String 是一个类,广泛应用于 Java 程序中,相当于一系列的字符串.在 Java 语言中 strings are objects.创建一个 strings 最直接的方式是 String g ...

  9. scala case class

    在我们详细介绍Scala的Case class和模式匹配之前,我们可以通过一个简单的例子来说明一些基本概念.我们设计一个函数库,这个函数库可以用来计算算术表达式,为简单起见,我们设计的算术表达式只侧重 ...

  10. HTML5 Input 类型

    浏览器支持 Input type IE Firefox Opera Chrome Safari email No 4.0 9.0 10.0 No url No 4.0 9.0 10.0 No numb ...