seajs遵循CMD规范,requirejs遵循AMD规范。AMD规范是预加载,CMD规范是赖加载。

下文举例假设有文件 b.js, c.js如下

  1. //b.js
  2. define(function(require, exports, module){
  3. console.log('b is loaded')
  4.  
  5. function run(){
  6. console.log('b run');
  7. }
  8. exports.run = run;
  9. })
  10.  
  11. //c.js
  12. define(function(require, exports, module){
  13. console.log('c is loaded')
  14.  
  15. function run(){
  16. console.log('c run');
  17. }
  18. exports.run = run;
  19. })

1. seajs对依赖模块只加载不执行,requirejs对依赖模块既加载也执行

运行代码:

  1. // seajs
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>seajs</title>
  6. <script type="text/javascript" src="./sea.min.js"></script>
  7. </head>
  8. <body>
    <button id="btn">OK</button>
    <script type="text/javascript">
  9. seajs.use('./a.js')
  10. </script>
  11. </body>
  12. </html>
  13. // requirejs
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17. <title>requirejs</title>
  18. <script type="text/javascript" src="./require.js"></script>
  19. </head>
  20. <body>
    <button id="btn">OK</button>
    <script type="text/javascript">
  21. require(['a'])
  22. </script>
  23. </body>
  24. </html>
  25. // a.js
  26. define(['b'], function(){
  27. })

运行结果:

seajs:

控制台无输出

requirejs:

控制台:

2. seajs ,requirejs在 require文件时既加载也执行

  1. //a.js
  2. define(function(require, exports, module){
  3. var b = require('b')
  4. })

requirejs:

控制台:b is loaded

seajs:

控制台:b is loaded

3. seajs可以在任意处直接require文件,无需提前写依赖模块;一旦提前写了任意一个依赖模块,下面的所有require的使用必须保证也有其对应的依赖模块

seajs可以直接如下使用,无需写依赖['b']:

  1. //a.js
    define(function(require, exports, module){
  2. var b = require('b')
  3. })
  4.  
  1. define(['b'], function(require, exports, module){
  2. var b = require('b')
  3. })

 运行结果:

控制台:b is loaded

假如 a.js 依赖了另一个 c.js,则在 a.js 中使用 require('b') 时必须也写上依赖['b'],否则b.js将因为查找不到而不会加载

  1. define(['c'], function(require, exports, module){
  2. var b = require('b')
  3. })

运行结果:

控制台无输出(不会输出c is loaded, 因为没有require('c') )

如果此时我们执行b.run()

  1. define(['c'], function(require, exports, module){
  2. var b = require('b')
  3. b.run()
  4. })

控制台将会报错,因为此时b为null:

此时正确写法应该写上依赖 ['b']:

  1. define(['c', 'b'], function(require, exports, module){
  2. var b = require('b')
  3. b.run()
  4. }) 

运行结果:

结论:

  1. 对于seajs,如果不写依赖那就一个都不要写,一旦写了,下面所有require的地方都需要提前在头部写上依赖
  1. 但对require.ascnc例外,可以如下写法:
    //a.js
    define(['c'], function(require, exports, module){
  2. var b = require.async('b');
  3. })
    此时c.js, b.js都被加载,只有 b.js 被执行
    下一点将会介绍require.async

requirejs的依赖写法如下:

  1. define(['c', 'b'], function(c, b){
  2. var b = require('b')
  3. b.run()
  4. })
  5.  
  6.  
  7. define(function(require, exports, module){
  8. var b = require('b')
  9. b.run()
  10. })
  11.  
  12. //错误写法
  13. define(['c'], function(c){
  14. var b = require('b')
  15. b.run()
  16. })

4. seajs的require.async在执行到使用位置的时候才去异步加载

seajs:

如下例:

  1. // a.js
  2. define(function(require, exports, module){
  3. document.getElementById('btn').addEventListener('click', function(){
         document.getElementById('btn').innerHTML = 'btn is clicked'
  4. init()
  5. })
  6.  
  7. function init(){
  8. var b = require('b');
  9. b.run()
  10. }
  11. })

运行结果:

控制台无输出

点击OK按钮, b.js 加载并执行b.js和run方法:

大家注意到,在未点击按钮之前,虽然没有执行init方法,但b.js依然被提前加载了进来,但没有被执行(没有输出b is loaded)。

很多时候我们想在执行init方法的时候再去加载b.js,而不是提前在页面加载的时候就把b,js加载。

这时候就需要用到require.async,如下:

  1. //a.js
  2. define(function(require, exports, module){
  3. document.getElementById('btn').addEventListener('click', function(){
  4. document.getElementById('btn').innerHTML = 'btn is clicked'
  5. init()
  6. })
  7.  
  8. function init(){
  9. require.async('b', function(b){
  10. b.run()
  11. });
  12. }
  13. })

这时候运行结果:

b.js没有被加载:

控制台无输出:

点击OK按钮:

b.js被加载

控制台输出:

这是因为当执行一个js时,seajs会先去查找匹配require,然后加载相应资源,但不执行。匹配到require.async时不加载。

所以,require.async达到了用到时再去异步加载并执行的目的。

小问题:

如果是requirejs执行下面代码:

  1. //a.js
  2. define(function(require, exports, module){
  3. document.getElementById('btn').addEventListener('click', function(){
  4. document.getElementById('btn').innerHTML = 'btn is clicked'
  5. init()
  6. })
  7.  
  8. function init(){
  9. var b = require('b');
  10. b.run()
  11. }
  12. })

资源如何加载?控制台又会输出什么呢?点击ok按钮又会输出啥?
答:资源加载了a.js, b.js, 控制台输出:b is loaded, 点击OK按钮控制台继续输出:b run
(选择“答”后面的部分查看答案)

  1. 总结:
  2.  
  3. 1. seajs对依赖模块只加载不执行,requirejs对依赖模块加载并执行
  4.  
  5. 2. seajs requirejs require具体文件时既加载也执行
  6.  
  7. 3. seajs可以在任意处直接require文件,无需提前写依赖模块;一旦提前写了任意一个依赖模块,下面的所有require的使用必须保证也有其对应的依赖模块
  8.  
  9. 4. seajsrequire.async在执行到使用位置的时候才去异步加载

本文demo:

https://github.com/saysmy/seajs-requirejs-demo

对比requirejs更好的理解seajs的更多相关文章

  1. seaJS 简单例子,理解seaJS

    学习心得: 记得第一次学underscore的时候,去的官网(不管什么都是官网好),呼啦一长列语法,我就一个个看,看完也不知道underscore是做什么的.就是现在underscore我也用不上,学 ...

  2. 通过Ruby On Rails 框架来更好的理解MVC框架

    通过Ruby On Rails 框架来更好的理解MVC框架   1.背景    因为我在学习软件工程课程的时候,对于 MVC 框架理解不太深入,只是在理论层面上掌握,但是不知道如何在开发中使用 MVC ...

  3. dimensionality reduction动机---visualization(将数据可视化帮助我们更好地理解数据)

    如果我们能更好地理解我们的数据,这样会对我们开发高效的机器学习算法有作用,将数据可视化(将数据画出来能更好地理解数据)出来将会对我们理解我们的数据起到很大的帮助. 高维数据如何进行显示 GDP: gr ...

  4. 嗯 第二道线段树题目 对左右节点和下标有了更深的理解 hdu1556

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  5. 帮助你更好的理解Spring循环依赖

    网上关于Spring循环依赖的博客太多了,有很多都分析的很深入,写的很用心,甚至还画了时序图.流程图帮助读者理解,我看了后,感觉自己是懂了,但是闭上眼睛,总觉得还没有完全理解,总觉得还有一两个坎过不去 ...

  6. 技术干货 | 基于MindSpore更好的理解Focal Loss

    [本期推荐专题]物联网从业人员必读:华为云专家为你详细解读LiteOS各模块开发及其实现原理. 摘要:Focal Loss的两个性质算是核心,其实就是用一个合适的函数去度量难分类和易分类样本对总的损失 ...

  7. jquery, jquery-ui, requirejs, bootstrap 的关系理解

    jquery 是 基于 javascript 的一个语法衍生,更方便操作dom, 事件,css 整体来说更好用,更简洁. jquery-ui 是基于 jquery 实现的各种更好看,交互更友好的的界面 ...

  8. Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案

    近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...

  9. 【转】七个例子帮你更好地理解 CPU 缓存

    我的大多数读者都知道缓存是一种快速.小型.存储最近已访问的内存的地方.这个描述相当准确,但是深入处理器缓存如何工作的"枯燥"细节,会对尝试理解程序性能有很大帮助. 在这篇博文中,我 ...

随机推荐

  1. 4_CSRF

    CSRF 当你登录某个网站时,通常浏览器与网站都会形成一个会话,在会话没有结束时你可以执行发表文章.发邮件.删除文章等操作,若会话结束,你再操作的话会提示你会话已经结束,请重新登录.CSRF(客户端跨 ...

  2. WEB前端规范命名

    头部 header ----------------用于头部 主要内容 main ------------用于主体内容(中部) 左侧 main-left -------------左侧布局 右侧 ma ...

  3. python+selenium自动化软件测试(第5章):Selenium Gird

    5.1 分布式(Grid) Selenium grid是用来分布式执行测试用例脚本的工具,比如测试人员经常要测试多浏览器的兼容性,那就可以用到grid了.下面就来介绍如何在多个浏览器上运行同一份脚本. ...

  4. iOS 微信支付流程详解

    背景 自微信支付.支付宝支付入世以来,移动端的支付日渐火热.虚拟货币有取代实体货币的趋向(这句纯属扯淡,不用管),支付在app开发中是一项基本的功能,有必要去掌握.从难易程度上讲,不管是微信支付还是支 ...

  5. python appium 操作app

    下面是一些Python脚本中操作app的用法: 检查app安装情况(返回true/false), driver.is_app_installed(package_name) 安装app driver. ...

  6. HDMI转EDP芯片NCS8803简介

    NCS8803 HDMI-to-eDP w/ Scaler Features --Embedded-DisplayPort (eDP) Output 1/2/4-lane eDP @ 1.62/2.7 ...

  7. Nginx keepalived实现高可用负载均衡详细配置步骤

    Keepalived是一个免费开源的,用C编写的类似于layer3, 4 & 7交换机制软件,具备我们平时说的第3层.第4层和第7层交换机的功能.主要提供loadbalancing(负载均衡) ...

  8. JavaScript 的使用基础总结②DOM

    HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HT ...

  9. 团队作业4——第一次项目冲刺 tHe LaSt dAy

    项目冲刺--终点 敏捷冲刺最后一天,没想到前一天就上榜了,我也很无奈啊. 那今天就老老实实写一篇博客好了. Mission 这次敏捷冲刺呢,我们主要做了前端页面,后台的数据库和添加了基本的增删查改的功 ...

  10. 个人附加作业XD --这门课终于结束了~~

    你认为每次项目的评分标准存在哪些问题,你认为的合理评分准则是怎样的(个人/结对/团队算三个) 评分的话我个人觉得是存在一些问题的. 第一,分数差异 问题:一个就是各班的成绩评分有高有低,有的班整体分数 ...