具有任意顺序的 Javascript 依赖解决方案包括答案

【问题标题】：Javascript dependency solution with arbitrary ordered includes具有任意顺序的 Javascript 依赖解决方案包括
【发布时间】：2011-08-16 18:32:30
【问题描述】：

问题是这样的，我包含一个脚本，它使用另一个脚本，但是如果该依赖项还需要另一个脚本准备好怎么办？这意味着加载它是不够的，但我还需要确保在执行之前已经调用了它的初始化回调。如果允许依赖项需要更多的依赖项并在加载后显示出来，则DOM中脚本标签的顺序不能正确。

当脚本和依赖项需要多个依赖项或文件满足多个组件时，问题会变得更加复杂。

Using.js 似乎对此有一个很好的方法，但首先，在加载之前应该知道依赖关系，其次作者声明某些测试不再在 Firefox 上运行。我怀疑是阻塞执行的东西，看起来有点神奇。

我已经编写了一个加载器来处理这个，完全异步的，这实际上似乎是可行的。但是我无法动摇做某事之前已经解决的直觉，或者不可能那么复杂。

【问题讨论】：

标签： javascript dependencies

【解决方案1】：

如果允许依赖项需要更多的依赖项并在加载后显示出来，则DOM中脚本标签的顺序不能正确。

那么，这些试图加载自己的依赖项的脚本到底是什么？这不是 JavaScript 的标准特性，所以没有一个答案；您如何处理它取决于尝试包含依赖项的脚本。

对于同步加载的脚本（通过 document.write 包含或在加载时向 DOM 添加脚本元素），您至少可以确保您可以继续加载。对于异步加载（延迟脚本、AJAX 包含或超时触发的就绪回调），必须有一个回调机制。如果您要混合具有不同依赖项和就绪回调系统的各种脚本，那将会很痛苦。

我已经编写了一个加载器来处理这个，完全异步的，这实际上似乎是可行的。但我无法动摇做某事之前已经解决的直觉，或者不可能那么复杂。

不，不是真的。依赖处理和动态脚本插入总是会有点复杂。唯一“解决”的标准方法是完全静态的脚本，手动按依赖顺序编写它们。

【讨论】：

它们是 GUI 组件。有些是抽象的，有些是非常类似于应用程序的，对话框等。我的目标是使它们尽可能隔离并缩短页面加载时间。但是在阅读了您的答案后，我认为即使不让脚本添加依赖项也不会使它变得更简单，因为我将需要用于跟踪包含组件状态的机制，即使包含后列表没有更新。

【解决方案2】：

有几种方法可以解决您的问题，几乎所有方法都在此Javascript Dependency Management 演示文稿中。

更好地解决您的问题的是使用jingo库。

基本上使用 jingo¹，您可以执行以下操作来声明具有依赖项的模块：

  jingo.declare({
    require: [
      'hallmart.Greeter'
    ],
    name: 'hallmart.Store',
    as: function() {
      hallmart.Store = function() {
        var greeter = new hallmart.Greeter();
        this.admit = function(customer) {
          greeter.welcome(customer.name);
        };
      };
   }
 });

有关参考，请参阅 code.google.com/p/jingo/wiki/GettingStarted。

¹ code.google.com/p/jingo/

【讨论】：

【解决方案3】：

我有偏见，但我最近创建了一个名为 Pyramid 的 javascript 依赖项管理器。除了一些关键特性之外，它似乎与其他依赖项管理器相似（并且可能与您创建的那个相似）。

它可以加载任何文件，而不仅仅是 javascript，让您定义文件如何包含在您的网页中。在开发过程中，我不仅使用它来加载我的 javascript 和 css 文件，而且还将 html 插入到我的主页中。这让我可以单独存储我的 html 视图（这对于像淘汰赛这样的库来说非常有用）
在发布时合并您的文件。
完全用 javascript 编写，因此设置很简单。您无需担心外部工具。
您只需为所有 html 文件设置一次包含脚本。之后，所有文件都可以在单个依赖加载器文件中更新（而不必在重命名、删除或添加脚本时不断更新所有头文件中的包含文件）

Pyramid Dependency Manager documentation

一些示例代码来展示它在开发过程中是如何工作的。

文件：dependencyLoader.js

//Set up file dependencies
Pyramid.createOrUpdate({
    name: 'standard',
    files: [
    'standardResources/jquery.1.6.1.min.js'
    ]
});

Pyramid.createOrUpdate({
name:'lookAndFeel',
files: [
    'styles.css',
    'customStyles.css'
    ]
});

Pyramid.createOrUpdate({
name:'main',
files: [
    'createNamespace.js',
    'views/buttonView.view', //contains just html code for a jquery.tmpl template
    'models/person.js',
    'init.js'
    ],
    dependencies: ['standard','lookAndFeel']
});

HTML 文件

<head>
    <script src="standardResources/pyramid-1.0.1.js"></script>
    <script src="dependencyLoader.js"></script>
    <script type="text/javascript">
        Pyramid.load('main');
    </script>
</head>

【讨论】：