对比requirejs更好的理解seajs

对比requirejs更好的理解seajs

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

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

代码语言:javascript代码运行次数:0运行复制//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对依赖模块既加载也执行运行代码:

代码语言:javascript代码运行次数:0运行复制// seajs

seajs

// requirejs

requirejs

// a.js

define(['b'], function(){

})运行结果:

seajs:

控制台无输出

requirejs:

控制台:

2. seajs ,requirejs在 require文件时既加载也执行代码语言:javascript代码运行次数:0运行复制//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']:

代码语言:javascript代码运行次数:0运行复制//a.js

define(function(require, exports, module){

var b = require('b')

})

运行结果:

控制台:b is loaded

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

代码语言:javascript代码运行次数:0运行复制define(['c'], function(require, exports, module){

var b = require('b')

})运行结果:

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

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

代码语言:javascript代码运行次数:0运行复制define(['c'], function(require, exports, module){

var b = require('b')

b.run()

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

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

代码语言:javascript代码运行次数:0运行复制define(['c', 'b'], function(require, exports, module){

var b = require('b')

b.run()

}) 运行结果:

结论:

代码语言:javascript代码运行次数:0运行复制对于seajs,如果不写依赖那就一个都不要写,一旦写了,下面所有require的地方都需要提前在头部写上依赖requirejs的依赖写法如下:

代码语言:javascript代码运行次数:0运行复制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:

如下例:

代码语言:javascript代码运行次数:0运行复制// 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,如下:

代码语言:javascript代码运行次数:0运行复制//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执行下面代码:

代码语言:javascript代码运行次数:0运行复制//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

(选择“答”后面的部分查看答案)

代码语言:javascript代码运行次数:0运行复制总结:

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

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

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

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

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

💎 相关推荐

3Dmax编辑多边形如何在一个面上加线的
365bet体育在线网站

3Dmax编辑多边形如何在一个面上加线的

📅 08-11 👁️ 808
华硕 K53XI263SV-SL
bet36365首页

华硕 K53XI263SV-SL

📅 08-24 👁️ 8927
如何用电脑制作ppt
365bet怎么样

如何用电脑制作ppt

📅 07-08 👁️ 2406