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. 洛谷 P2661 信息传递 Label:并查集||强联通分量

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...

  2. Codeforces Round #203 (Div. 2)

    非常幸运..第三题,有个地方没想清楚,枚举一下就行了..x to n,这个x没考虑好,跪了...傻傻的lock了代码,通过hack进了DIV1,5-2 . 第一次进入DIV1,记录一下. 不知不觉,已 ...

  3. [iOS-UI]点击清空按钮,却会有提交的感觉

    一,问题分析 1.感觉像是点击清空按钮时调用了添加按钮的事件. 2.插入断电后,还真是这样. 3.仔细想想,才发现,原来是我复制了添加按钮,变成为添加按钮,进而点击清空时,不仅清空了所有内容,还把最新 ...

  4. vue.js中v-for的使用及索引获取

    1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  5. poj 3254 状压dp入门题

    1.poj 3254  Corn Fields    状态压缩dp入门题 2.总结:二进制实在巧妙,以前从来没想过可以这样用. 题意:n行m列,1表示肥沃,0表示贫瘠,把牛放在肥沃处,要求所有牛不能相 ...

  6. java&testng中Assert

    用testng中的assert做断言时,如果断言失败,则在当前方法中失败的语句后的语句将不会再执行: 如图: 看控制台输出语句:

  7. github提交失败并报错java.io.IOException: Authentication failed:

    一.概述 我最近在写一个android的项目. 软件:android studio.Android studio VCS integration(插件) Android studio VCS inte ...

  8. userAgent

    我们可以通过userAgent来判断,比如检测某些关键字,例如:AppleWebKit*****Mobile或AppleWebKit,需要注意的是有些浏览器的userAgent中并不包含AppleWe ...

  9. MVC概念性的内容

    MVC:    是一个缩写(model + view + control),      Model:是一些类文件,  功能:负责增删改查, 负责跟数据库打交道 (把数据存入到数据库: 从数据库把数据读 ...

  10. ffmpeg命令行

    ubuntu下简单安装ffmpeg sudo add-apt-repository ppa:kirillshkrogalev/ffmpeg-nextsudo apt-get update sudo a ...