SeaJS与RequireJS最大的区别

 
执行模块的机制大不一样
-----------------------------------
由于 RequireJS 是执行的 AMD 规范, 因此所有的依赖模块都是先执行.
使用 RequireJS 默认定义模块的方式, 在理解上会更清楚一些, 但个人还是偏爱 require('./mod1') 这样的方式
define(['dep1', 'dep2'], function (dep1, dep2) {
    //Define the module value by returning a value.
    return function () {};
});

希望文章没有误人子弟, 谢谢 @Jaward华仔 的意见, 请大家多看评论, 评论更有料...

---------------------------------------------------------------------------

SeaJS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行

不明白? 让我们来举个例子

 

如下模块通过SeaJS/RequireJS来加载, 执行结果会是怎样?
define(function(require, exports, module) {
    console.log('require module: main');

var mod1 = require('./mod1');
    mod1.hello();
    var mod2 = require('./mod2');
    mod2.hello();

return {
        hello: function() {
            console.log('hello main');
        }
    };
});

猜猜看?

 

先试试SeaJS的执行结果
    require module: main
    require module: mod1
    hello mod1
    require module: mod2
    hello mod2
    hello main

很正常嘛, 我也是这么想的...

再来是RequireJS的执行结果
    require module: mod1
    require module: mod2
    require module: main
    hello mod1
    hello mod2
    hello main

神马情况? 你他么是在逗我吗?

RequireJS你坑的我一滚啊, 这也就是为什么我不喜欢RequireJS的原因, 坑隐藏得太深了.
终于明白玉伯说的那句: "RequireJS 是没有明显的 bug,SeaJS 是明显没有 bug"是什么意思了

因此我们得出结论(分别使用SeaJS 2.0.0和RequireJS 2.1.6进行测试)
-------------------------
SeaJS只会在真正需要使用(依赖)模块时才执行该模块
SeaJS是异步加载模块的没错, 但执行模块的顺序也是严格按照模块在代码中出现(require)的顺序, 这样才更符合逻辑吧! 你说呢, RequireJS?

而RequireJS会先尽早地执行(依赖)模块, 相当于所有的require都被提前了, 而且模块执行的顺序也不一定100%就是先mod1再mod2
因此你看到执行顺序和你预想的完全不一样! 颤抖吧~ RequireJS!

详细的代码请参考
-------------------------
SeaJS测试加载/执行模块
RequireJS测试加载/执行模块

后记
-------
注意我这里说的是执行(真正运行define中的代码)模块, 而非加载(load文件)模块.
模块的加载都是并行的, 没有区别, 区别在于执行模块的时机, 或者说是解析.

为了说明阻塞的问题, 翠花上图

SeaJS的懒执行
RequireJS的预执行

注意图中巨大的pinyin-dict.js模块, 取自pinyin.js, 复制了N次后以增加它的"重量", 增强演示效果, 大家有兴趣的话可以亲手试试.

可以很明显的看出RequireJS的做法是并行加载所有依赖的模块, 并完成解析后, 再开始执行其他代码, 因此执行结果只会"停顿"1次, 完成整个过程是会比SeaJS要快.

而SeaJS一样是并行加载所有依赖的模块, 但不会立即执行模块, 等到真正需要(require)的时候才开始解析, 这里耗费了时间, 因为这个特例中的模块巨大, 因此造成"停顿"2次的现象, 这就是我所说的SeaJS中的"懒执行".

最后感谢大家的各种意见建议, 我这里并没有说SeaJS与RequireJS哪个更好一些, 仅仅是为了说明下他们的区别, 各种取舍请大家根据实际情况来定, 希望能帮到大家.

Sea.js的更多相关文章

  1. sea.js模块化编程

    * 为什么要模块化? 解决文件依赖 解决命名冲突 ; var var2 = 2; function fn1(){ } function fn2(){ } return { fn1: fn1, fn2: ...

  2. 解决sea.js引用jQuery提示$ is not a function的问题

    在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...

  3. 模块化开发--sea.js

    当你的网站开发越来越复杂的时候,会经常遇到一下问题吗?1.冲突2.性能3.依赖如果在多人开发或者是复杂的开发过程中会经常遇到这些问 题,就可以用模块化开发来解决.以上问题是如何产生的?1.冲突:如果你 ...

  4. sea.js 入门

    上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...

  5. 第三课:sea.js模块加载原理

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...

  6. Seajs是什么及sea.js 由来,特点以及优势

    Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享   1 ...

  7. Sea.js学习4——Sea.js的配置

    可以对 Sea.js 进行配置,让模块编写.开发调试更方便. seajs.config seajs.config(options) 用来进行配置的方法. seajs.config({ // 别名配置 ...

  8. Sea.js学习3——Sea.js的CMD 模块定义规范

    在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范 ...

  9. Sea.js学习2——Sea.js的API 快速参考

    (7 个接口是最常用的) 一.seajs.config:用来对 Sea.js 进行配置. seajs.config({ // 设置路径,方便跨目录调用 paths: { 'arale': 'https ...

  10. Sea.js学习1——初识Sea.js

    Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单.极致的模块化开发体验. 使用 Sea.js,在书写文件时,需要遵守 CMD (Common Module Definition)模块定 ...

随机推荐

  1. NYOJ 1091 超大01背包(折半枚举)

    这道题乍一看是普通的01背包,最最基础的,但是仔细一看数据,发现普通的根本没法做,仔细观察数组发现n比较小,利用这个特点将它划分为前半部分和后半部分这样就好了,当时在网上找题解,找不到,后来在挑战程序 ...

  2. MyEclipse修改servlet模版

    找到myeclipse安装目录中的 然后把这个jar包复制到桌面 以压缩包的方式打开 之后保存, 然后把修改的这个jar包放到刚开的路径,替换已经存在的! 完成!

  3. MyEclipse设置默认的文档注释

  4. 安装 vs2005, vs2008 报错

    最近重新装了系统之后,在安装 vs2005, vs2008 到如下类似的错误,苦苦两天没有解决.不要问为什么是 vs2005,vs2008, 因为原有的项目就是老版本. 无意间在网上看到一句话,大意是 ...

  5. spring aop原理分析

    持续更新... aop跟java代理模式有关. java.lang.reflect.Proxy java.lang.reflect.InvocationHandler 工厂模式用到java反射. ao ...

  6. 底层restful接口修改分析

    记录接口调用次数,接口调用时间需求. 需要修改公共的类,就是restful接口,可以认为是底层的代码,具体的实现有哪些?插入数据库肯定不能影响性能.

  7. [php基础]Mysql日期函数:日期时间格式转换函数详解

    在PHP网站开发中,Mysql数据库设计中日期时间字段必不可少,由于Mysql日期函数输出的日期格式与PHP日期函数之间的日期格式兼容性不够,这就需要根据网站实际情况使用Mysql或PHP日期转换函数 ...

  8. 星座物语APP

    效果图: 这里的后台管理用的是duducat,大家可以去百度看说明.图片,文字都在duducat后台服务器上,可以自己修改的.(PS:图片这里是随便找的) http://www.duducat.com ...

  9. 搭建maven项目简介

    http://jingyan.baidu.com/album/9f7e7ec0b714ae6f29155465.html?picindex=1 Maven学习 (一) 搭建Maven环境 http:/ ...

  10. 武汉科技大学ACM :1001: 华科版C语言程序设计教程(第二版)课后习题3.12

    Problem Description 输入n,输出对应的边长为n的空心正六边形. 为方便看图,样例中点 '.' 表示空格,打印图形时请打印空格而非小圆点. Input 边长n.(n<=20) ...