对比requirejs更好的理解seajs
seajs遵循CMD规范,requirejs遵循AMD规范。AMD规范是预加载,CMD规范是赖加载。
下文举例假设有文件 b.js, c.js如下
- //b.js
- define(function(require, exports, module){
- console.log('b is loaded')
- function run(){
- console.log('b run');
- }
- exports.run = run;
- })
- //c.js
- define(function(require, exports, module){
- console.log('c is loaded')
- function run(){
- console.log('c run');
- }
- exports.run = run;
- })
1. seajs对依赖模块只加载不执行,requirejs对依赖模块既加载也执行
运行代码:
- // seajs
- <!DOCTYPE html>
- <html>
- <head>
- <title>seajs</title>
- <script type="text/javascript" src="./sea.min.js"></script>
- </head>
- <body>
<button id="btn">OK</button>
<script type="text/javascript">- seajs.use('./a.js')
- </script>
- </body>
- </html>
- // requirejs
- <!DOCTYPE html>
- <html>
- <head>
- <title>requirejs</title>
- <script type="text/javascript" src="./require.js"></script>
- </head>
- <body>
<button id="btn">OK</button>
<script type="text/javascript">- require(['a'])
- </script>
- </body>
- </html>
- // a.js
- define(['b'], function(){
- })
运行结果:
seajs:
控制台无输出
requirejs:
控制台:
2. seajs ,requirejs在 require文件时既加载也执行
- //a.js
- define(function(require, exports, module){
- var b = require('b')
- })
requirejs:
控制台:b is loaded
seajs:
控制台:b is loaded
3. seajs可以在任意处直接require文件,无需提前写依赖模块;一旦提前写了任意一个依赖模块,下面的所有require的使用必须保证也有其对应的依赖模块
seajs可以直接如下使用,无需写依赖['b']:
- //a.js
define(function(require, exports, module){- var b = require('b')
- })
- 或
- define(['b'], function(require, exports, module){
- var b = require('b')
- })
运行结果:
控制台:b is loaded
假如 a.js 依赖了另一个 c.js,则在 a.js 中使用 require('b') 时必须也写上依赖['b'],否则b.js将因为查找不到而不会加载
- define(['c'], function(require, exports, module){
- var b = require('b')
- })
运行结果:
控制台无输出(不会输出c is loaded, 因为没有require('c') )
如果此时我们执行b.run()
- define(['c'], function(require, exports, module){
- var b = require('b')
- b.run()
- })
控制台将会报错,因为此时b为null:
此时正确写法应该写上依赖 ['b']:
- define(['c', 'b'], function(require, exports, module){
- var b = require('b')
- b.run()
- })
运行结果:
结论:
- 对于seajs,如果不写依赖那就一个都不要写,一旦写了,下面所有require的地方都需要提前在头部写上依赖
- 但对require.ascnc例外,可以如下写法:
//a.js
define(['c'], function(require, exports, module){- var b = require.async('b');
- })
此时c.js, b.js都被加载,只有 b.js 被执行
下一点将会介绍require.async
requirejs的依赖写法如下:
- define(['c', 'b'], function(c, b){
- var b = require('b')
- b.run()
- })
- 或
- define(function(require, exports, module){
- var b = require('b')
- b.run()
- })
- //错误写法
- define(['c'], function(c){
- var b = require('b')
- b.run()
- })
4. seajs的require.async在执行到使用位置的时候才去异步加载
seajs:
如下例:
- // a.js
- define(function(require, exports, module){
- document.getElementById('btn').addEventListener('click', function(){
document.getElementById('btn').innerHTML = 'btn is clicked'- init()
- })
- function init(){
- var b = require('b');
- b.run()
- }
- })
运行结果:
控制台无输出
点击OK按钮, b.js 加载并执行b.js和run方法:
大家注意到,在未点击按钮之前,虽然没有执行init方法,但b.js依然被提前加载了进来,但没有被执行(没有输出b is loaded)。
很多时候我们想在执行init方法的时候再去加载b.js,而不是提前在页面加载的时候就把b,js加载。
这时候就需要用到require.async,如下:
- //a.js
- define(function(require, exports, module){
- document.getElementById('btn').addEventListener('click', function(){
- document.getElementById('btn').innerHTML = 'btn is clicked'
- init()
- })
- function init(){
- require.async('b', function(b){
- b.run()
- });
- }
- })
这时候运行结果:
b.js没有被加载:
控制台无输出:
点击OK按钮:
b.js被加载
控制台输出:
这是因为当执行一个js时,seajs会先去查找匹配require,然后加载相应资源,但不执行。匹配到require.async时不加载。
所以,require.async达到了用到时再去异步加载并执行的目的。
小问题:
如果是requirejs执行下面代码:
- //a.js
- define(function(require, exports, module){
- document.getElementById('btn').addEventListener('click', function(){
- document.getElementById('btn').innerHTML = 'btn is clicked'
- init()
- })
- function init(){
- var b = require('b');
- b.run()
- }
- })
资源如何加载?控制台又会输出什么呢?点击ok按钮又会输出啥?
答:资源加载了a.js, b.js, 控制台输出:b is loaded, 点击OK按钮控制台继续输出:b run
(选择“答”后面的部分查看答案)
- 总结:
- 1. seajs对依赖模块只加载不执行,requirejs对依赖模块加载并执行
- 2. seajs ,requirejs在 require具体文件时既加载也执行
- 3. seajs可以在任意处直接require文件,无需提前写依赖模块;一旦提前写了任意一个依赖模块,下面的所有require的使用必须保证也有其对应的依赖模块
- 4. seajs的require.async在执行到使用位置的时候才去异步加载
本文demo:
https://github.com/saysmy/seajs-requirejs-demo
对比requirejs更好的理解seajs的更多相关文章
- seaJS 简单例子,理解seaJS
学习心得: 记得第一次学underscore的时候,去的官网(不管什么都是官网好),呼啦一长列语法,我就一个个看,看完也不知道underscore是做什么的.就是现在underscore我也用不上,学 ...
- 通过Ruby On Rails 框架来更好的理解MVC框架
通过Ruby On Rails 框架来更好的理解MVC框架 1.背景 因为我在学习软件工程课程的时候,对于 MVC 框架理解不太深入,只是在理论层面上掌握,但是不知道如何在开发中使用 MVC ...
- dimensionality reduction动机---visualization(将数据可视化帮助我们更好地理解数据)
如果我们能更好地理解我们的数据,这样会对我们开发高效的机器学习算法有作用,将数据可视化(将数据画出来能更好地理解数据)出来将会对我们理解我们的数据起到很大的帮助. 高维数据如何进行显示 GDP: gr ...
- 嗯 第二道线段树题目 对左右节点和下标有了更深的理解 hdu1556
Color the ball Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- 帮助你更好的理解Spring循环依赖
网上关于Spring循环依赖的博客太多了,有很多都分析的很深入,写的很用心,甚至还画了时序图.流程图帮助读者理解,我看了后,感觉自己是懂了,但是闭上眼睛,总觉得还没有完全理解,总觉得还有一两个坎过不去 ...
- 技术干货 | 基于MindSpore更好的理解Focal Loss
[本期推荐专题]物联网从业人员必读:华为云专家为你详细解读LiteOS各模块开发及其实现原理. 摘要:Focal Loss的两个性质算是核心,其实就是用一个合适的函数去度量难分类和易分类样本对总的损失 ...
- jquery, jquery-ui, requirejs, bootstrap 的关系理解
jquery 是 基于 javascript 的一个语法衍生,更方便操作dom, 事件,css 整体来说更好用,更简洁. jquery-ui 是基于 jquery 实现的各种更好看,交互更友好的的界面 ...
- Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案
近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...
- 【转】七个例子帮你更好地理解 CPU 缓存
我的大多数读者都知道缓存是一种快速.小型.存储最近已访问的内存的地方.这个描述相当准确,但是深入处理器缓存如何工作的"枯燥"细节,会对尝试理解程序性能有很大帮助. 在这篇博文中,我 ...
随机推荐
- 4_CSRF
CSRF 当你登录某个网站时,通常浏览器与网站都会形成一个会话,在会话没有结束时你可以执行发表文章.发邮件.删除文章等操作,若会话结束,你再操作的话会提示你会话已经结束,请重新登录.CSRF(客户端跨 ...
- WEB前端规范命名
头部 header ----------------用于头部 主要内容 main ------------用于主体内容(中部) 左侧 main-left -------------左侧布局 右侧 ma ...
- python+selenium自动化软件测试(第5章):Selenium Gird
5.1 分布式(Grid) Selenium grid是用来分布式执行测试用例脚本的工具,比如测试人员经常要测试多浏览器的兼容性,那就可以用到grid了.下面就来介绍如何在多个浏览器上运行同一份脚本. ...
- iOS 微信支付流程详解
背景 自微信支付.支付宝支付入世以来,移动端的支付日渐火热.虚拟货币有取代实体货币的趋向(这句纯属扯淡,不用管),支付在app开发中是一项基本的功能,有必要去掌握.从难易程度上讲,不管是微信支付还是支 ...
- python appium 操作app
下面是一些Python脚本中操作app的用法: 检查app安装情况(返回true/false), driver.is_app_installed(package_name) 安装app driver. ...
- HDMI转EDP芯片NCS8803简介
NCS8803 HDMI-to-eDP w/ Scaler Features --Embedded-DisplayPort (eDP) Output 1/2/4-lane eDP @ 1.62/2.7 ...
- Nginx keepalived实现高可用负载均衡详细配置步骤
Keepalived是一个免费开源的,用C编写的类似于layer3, 4 & 7交换机制软件,具备我们平时说的第3层.第4层和第7层交换机的功能.主要提供loadbalancing(负载均衡) ...
- JavaScript 的使用基础总结②DOM
HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HT ...
- 团队作业4——第一次项目冲刺 tHe LaSt dAy
项目冲刺--终点 敏捷冲刺最后一天,没想到前一天就上榜了,我也很无奈啊. 那今天就老老实实写一篇博客好了. Mission 这次敏捷冲刺呢,我们主要做了前端页面,后台的数据库和添加了基本的增删查改的功 ...
- 个人附加作业XD --这门课终于结束了~~
你认为每次项目的评分标准存在哪些问题,你认为的合理评分准则是怎样的(个人/结对/团队算三个) 评分的话我个人觉得是存在一些问题的. 第一,分数差异 问题:一个就是各班的成绩评分有高有低,有的班整体分数 ...