seajs模块之间互相引用导致加载失败的问题

古城微笑少年丶 2022-05-17 11:06 267阅读 0赞

###### *最近更新时间：2018年8月10日18:44:50* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

[我的关联文章《JavaScript模块化编程》][JavaScript]

#### 问题来源 ####

> 在开发业务模块时，由于业务场景和逻辑较为复杂，开发的过程中，经过seajs将各个模块打包加载后，运行失败(没有任何结果)，也没有任何报错。经查证，模块之间出现了如下图所示的互相引用的问题，导致内存泄露，无法执行。

![这里写图片描述][70]

> 图一所示，A模块是入口模块，A模块调用了B模块，没有任何问题。但B调用C、C调用D、D调用B，出现了模块之间的引用死循环。  
> 图二所示，A模块是入口模块，A模块调用了B模块，没有任何问题。但B调用C、C调用B，出现了模块之间的引用死循环。  
> 这种情况，seajs是无法处理模块之间的关系，导致加载失败。这个就是模块解耦问题，核心原理，切断模块之间的互相引用关系，如图所示，只要切断任何一个红色`×`的引用，就可以解决引用死循环问题。

#### 问题引申 ####

###### seajs ######

> SeaJS 是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS，可以更好地组织 JavaScript 代码。  
> 在 SeaJS 的世界里，一个文件就是一个模块。所有模块都遵循 CMD 规范。  
> SeaJS 具有以下核心特性：简单一致的模块格式；依赖的自动管理；脚本的异步并行加载；丰富的插件；友好的调试。  
> SeaJS 带来的最大好处是：提升代码的可维护性。

//seajs的使用
    seajs.config({ 
      alias: { 
        'jquery': 'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'
      }
    });
    seajs.use(['../src/js/app', 'jquery'], function(app, $) { 
      //some code
    });
    //app.js
    define(function(require, exports, module) { 
      var $ = require('jquery');
    
      exports.sayHello = function() { 
        $('#hello').toggle('slow');
      };
    });

###### CMD 规范 ######

> CMD（Common Module Definition） 模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。

###### seajs-issues汇总 ######

[\#240 模块系统][240]  
[\#242 CMD 模块定义规范][242 CMD]  
[\#258 模块标识][258]  
[\#259 require 书写约定][259 require]  
[\#260 模块的加载启动][260]  
[\#262 Sea.js 配置][262 Sea.js]  
[\#263 Sea.js 的调试接口][263 Sea.js]  
[\#264 插件开发指南][264]  
[\#276 如何参与开发][276]  
[\#426 为什么要有约定和构建工具][426]  
[\#538 构建工具][538]  
[\#971 如何改造现有文件为 CMD 模块][971 _ CMD]

#### 参考 ####

*  [github - seajs][]
 *  [github - seajs - issues][]
 *  [SeaJS - A Module Loader for the Web][]
 *  [SeaJS - A Module Loader for the Web][SeaJS - A Module Loader for the Web 1]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[JavaScript]: https://blog.csdn.net/wanshaobo888/article/details/76576577
[70]: /images/20220517/d3c1bbe2f27b4f05ab6b2d4bcce261fd.png
[240]: https://github.com/seajs/seajs/issues/240
[242 CMD]: https://github.com/seajs/seajs/issues/242
[258]: https://github.com/seajs/seajs/issues/258
[259 require]: https://github.com/seajs/seajs/issues/259
[260]: https://github.com/seajs/seajs/issues/260
[262 Sea.js]: https://github.com/seajs/seajs/issues/262
[263 Sea.js]: https://github.com/seajs/seajs/issues/263
[264]: https://github.com/seajs/seajs/issues/264
[276]: https://github.com/seajs/seajs/issues/276
[426]: https://github.com/seajs/seajs/issues/426
[538]: https://github.com/seajs/seajs/issues/538
[971 _ CMD]: https://github.com/seajs/seajs/issues/971
[github - seajs]: https://github.com/seajs/seajs
[github - seajs - issues]: https://github.com/seajs/seajs/issues
[SeaJS - A Module Loader for the Web]: https://seajs.github.io/seajs/docs/
[SeaJS - A Module Loader for the Web 1]: https://www.zhangxinxu.com/sp/seajs/
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460