对比requirejs更好的理解seajs

Harpsichord1207 发布于2019-08-22 11:12 / 1846人阅读

摘要：遵循规范，遵循规范。很多时候我们想在执行方法的时候再去加载，而不是提前在页面加载的时候就把加载。匹配到时不加载。所以，达到了用到时再去异步加载并执行的目的。

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



    seajs
    







// requirejs



    requirejs
    







// a.js
define(["b"], function(){
})

运行结果：

seajs：

控制台无输出

requirejs：

控制台：

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

//a.js
define(function(require, exports, module){
    var b = require("b")
})

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的地方都需要提前在头部写上依赖

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

总结：

seajs对依赖模块只加载不执行，requirejs对依赖模块加载并执行

seajs ，requirejs在 require具体文件时既加载也执行

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

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

云服务器 GPU云服务器数据如何更好的分析比java更好的语言比更好的深圳服务器 Requirejs

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91983.html

JavaScript模块化发展

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到所有依赖加载完成之后前置依赖，这个回调函数才会运行。如果将前面的代码改写成形式，就是下面这样定义了一个文件，该文件依赖模块，当模块加载完毕之后执行回调函数，这里并没有暴露任何变量。模块化是我们日常开发都要用到的基本技能，使用简单且方便，但是很少人能说出来但是的原因及发展过程。现在通过对比不同时期的js的发展，将JavaScript模...

mengbo 2019-08-22 18:05 评论0 收藏0
seajs和requirejs的那些事儿

摘要：遵循的是异步模块定义规范，遵循的是通用模块定义规范。规范的不同，导致了两者的不同。在尝试让第三方类库修改自身来支持，目前只有少数社区采纳。是没有明显的，是明显没有。无这方面的支持。发布之后发现存在一个显示的问题，大家可以移步到我的简书参考，谢谢大家！！！我的简书《seajs和requirejs技术指导文档》昨天到今天，老衲翻阅数十篇技术文档，为了搞明白seajs（CMD）和 req...

zorpan 2019-08-22 10:44 评论0 收藏0
require.js构建优化

摘要：未构建之前，全部分开加载。的优化，得再看下的示例，然后再写篇笔记记录下来。想摸透javascript模块化编程是怎么一回事，在seajs和requirejs之间兜兜转转，看了许多相关资料和文章，算是大致理清它们的异同，撇开requirejs加载方式的另类（其实目前我暂时还没去感受），于写法，比较喜欢requirejs的写法，这个比较主观，这也得益于阮一峰大大那篇Javascript模...

yacheng 2019-08-21 12:22 评论0 收藏0
Javascript模块全揽

摘要：要求模块编写必须在真正的代码之外套上一层规定的代码包装，样子看起来是这样的模块代码通过传递一个签名为的回调函数给函数，就可以把需要注入的变量和函数注入到模块代码内。之前写的文章急速Js全栈教程得到了不错的阅读量，霸屏掘金头条3天，点赞过千，阅读近万，甚至还有人在评论区打广告，可见也是一个小小的生态了；）。看来和JS全栈有关的内容，还是有人颇有兴趣的。 showImg(https://...

lily_wang 2019-08-23 11:41 评论0 收藏0
seajs 模块化编程js代码

摘要：模块初始化时，会调用且仅调用一次该工厂函数。用来向外提供模块的除了给对象增加成员，还可以使用直接向外提供可简化为函数用来访问其他模块提供的异步加载模块，并在加载完成后执行回调函数使用的内部机制来解析并返回模块路径。手册的模块化插件 seajs是我刚入门前端就接触到的一个javaScript模块加载框架。使用seajs后javaScript代码的可读性和清晰度有了很大的提升，插件的使用和...

YJNldm 2019-08-19 17:10 评论0 收藏0