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. 【BZOJ】2078: [POI2004]WYS

    题意: 给n个互不相交的多边形(边均平行于坐标轴),问最大深度.深度的定义是,若多边形A被多边形B包含,则\(dep[A]=max(dep[B])+1\).坐标系的深度为0.(n<=40000, ...

  2. USACO 5.5 Hidden Password(搜索+优化)

    水了好几下. 优化1:开始初始化的时候,如果左边那个也是最小值,那么此点就不用进队了. 优化2:如果队列里的位置,已经超过了后面位置的初始位置,那么后面这个位置也没用了. /* ID: cuizhe ...

  3. 获取UILabel宽度的方法

    - (CGFloat)labelLength:(NSString *)str font:(CGFloat)font{ str = ISSTRING(str) ? str : @"" ...

  4. GO语言练习：网络编程 TCP 示例

    1.代码 2.编译及运行 1.网络编程 TCP 示例 simplehttp.go 代码 package main import ( "net" "os" &qu ...

  5. OpenFileDialog获取文件名和文件路径问题

    OpenFileDialog获取文件名和文件路径问题(转) 转自:http://blog.sina.com.cn/s/blog_7511914e0101cbjn.html System.IO.Path ...

  6. Winform 窗体最小化隐藏在桌面右下角：转

    ICO文件要放到 bin\Debug 下 1.给主窗体添加 NotifyIcon 控件 2.窗体加载事件里 private void MainF_Load(object sender, EventAr ...

  7. IE6及以上版本fixed问题解决方案，页面右下角固定页面，可以最大化、最小化、正规显示

    在窗口固定位置显示内容使用fixed,但是 IE 6 不支持,后来我搜了很多方法,都没有作用,后来类比着一个网站的代码,使用absolute .z-index解决了问题. 页面div结构: <d ...

  8. linux下获取本机IP

    转载:http://blog.chinaunix.net/uid-20593763-id-1620213.html 源代码级Unix/Linux 通用网卡IP地址获取方法 在Unix和Linux系统下 ...

  9. [LintCode] Paint Fence 粉刷篱笆

    There is a fence with n posts, each post can be painted with one of the k colors.You have to paint a ...

  10. ArcGIS AddIN开发之COM对象写入注册表

    做一个交互式绘制文字的工具,希望这次设置的Symbol,下次打开ArcMap时自动调用这个Symbol,并支持对其进行修改. 解决方法是将这个Symbol写入注册表中,每次自动读取上一次设置的Symb ...