Sea.js

时间:2021-12-14 16:50:57

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对模块的态度是预执行

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

Sea.js
 

如下模块通过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');
        }
    };
});

猜猜看?

Sea.js
 

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

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

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

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

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文件)模块.
模块的加载都是并行的, 没有区别, 区别在于执行模块的时机, 或者说是解析.

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

Sea.js
SeaJS的懒执行
Sea.js
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. grails 优缺点分析

    Grails是一套用于快速Web应用开发的开源框架,它基于Groovy编程语言,并构建于Spring.Hibernate等开源框架之上,是一个高生产力一站式框架. 易于使用的基于Hibernate的对 ...

  2. BZOJ 2038 小z的袜子 & 莫队算法(不就是个暴力么..)

    题意: 给一段序列,询问一个区间,求出区间中.....woc! 贴原题! 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过 ...

  3. checkbox 删除

    先创建del.php文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  4. lua中的require机制

    lua中的require机制 为了方便代码管理,通常会把lua代码分成不同的模块,然后在通过require函数把它们加载进来.现在看看lua的require的处理流程.1.require机制相关的数据 ...

  5. UEFI模式 Thinkpad t470p Ubuntu 16&period;04 LTS

    准备阶段 使用官方推荐的Rufus制作U盘启动盘 在Windows 10系统下压缩出来一些空间(60G),不要分配盘符 系统设置 在Bios中关闭secure boot (设置为Disenabled) ...

  6. C&plus;&plus;中:&lpar;&ast;p&rpar;&plus;&plus;和&ast;(p&plus;&plus;)和&ast;p&plus;&plus;的区别

    1. 理解自增自减运算符      (1)后置自增自减运算符优先级>前置自增自减运算符. (2)前置自增自减运算符“变量先自增自减再使用”. (3)后置自增自减运算符“变量先使用再自增自减”. ...

  7. windows7安装svn客户端

    全部选择默认的即可, 上面的这种检出方式会报错,要使用下面这种检出方式

  8. redis分布式锁redisson

    原文:https://blog.csdn.net/Kincym/article/details/78697472 关于redisson的源代码请参考官网:https://github.com/redi ...

  9. Redis(二):Redis入门介绍

    Redis入门介绍目录导航: 入门概述 VMWare + VMTools千里之行始于足下 Redis的安装 Redis启动后杂项基础知识讲解 入门概述 是什么 Redis:REmote DIction ...

  10. am335xSD卡启动--文件系统制作

    1.网上下载busybox工具https://busybox.net/downloads/ 2.根据此文章提示制作自己的跟文件系统 链接: https://pan.baidu.com/s/1bp6GK ...