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

SEajs模块化与解耦

最新推荐文章于 2024-07-24 02:06:23 发布

万少博

最新推荐文章于 2024-07-24 02:06:23 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端模块规范

本文链接：https://blog.youkuaiyun.com/wanshaobo888/article/details/81563016

前端模块规范专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在使用SEajs进行模块化编程时遇到的模块间互相引用导致的内存泄露问题。通过分析SEajs的核心特性及CMD规范，提出了有效的解决方案。

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

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

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

问题来源

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

这里写图片描述

图一所示，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');
  };
});