7

我最近在所有 CommonJS 与 AMD 的战斗中进行了一些挖掘，这是我的发现......（顺便说一句，我不是在这里说教，我分享我的想法以获得一些建设性的见解......） RequireJS 带来了很多复杂性我的 Angular 模块，对我来说感觉不对，因为它是一个模块包装在一个模块中...... Browserify 方式更干净，但要让它正确处理所有事情，你需要正确实现所有依赖项和依赖项依赖项，并且不幸的是，我们并不生活在一个完美的世界中......所以你必须对填充的 Libs 的内部依赖进行填充和填充......我不是额外复杂性的忠实粉丝......

我目前的方式（并受到您所有建设性的批评......）

我有一个 grunt 文件连接和缩小我的所有资源，像 BreezeJS、$、Q、Ladda 等库......在全局范围内泄漏......然后我为这些全局变量声明这个类型模块：

module.value('gLadda', (function(){

    if("Ladda" in window && "Spinner" in window){
        return Ladda;
    }else{
        throw new Error("The Globals Ladda || Spinner are missing");
    }

})());

在我的应用程序中使用“Angularify”依赖项之后，我没有在团队中使用过这种技术，我想知道这是否会为某些人触发一些红灯，他们是否会解释为什么......谢谢你的时间。

4

1 回答 1

1

根据我的功能请求，我要求将 AMD 加载程序作为附加 ng 模块的一部分。

Angular 提供了一项功能，允许用户创建模块定义并稍后通过字符串标识符查找控制器等实体。Angular 不具备加载存储在单独文件中的脚本的能力，这意味着您有四个选择：

  1. 将所有 javascript 存储在一个文件中。
  2. 将您的 javascript 分成单独的文件并为每个文件添加脚本标签。
  3. 使用像requireJS这样的 AMD 文件加载器来管理脚本文件及其依赖项。
  4. 使用 browserify 之类的预编译器将nodejs样式文件合并到单个脚本文件中。

随着项目的增长，文件变得更加难以管理，不仅仅是因为它们的大小，还因为模块之间的依赖关系变得更加复杂。大型项目也可以从 AMD 加载器的延迟加载中受益。

AMD 模块加载器列出了运行此文件之前需要存在的依赖项。问题是 AMD 依赖项与 Angular 使用的注入列表很接近，但并不完全相同。在这段代码中可以看到一个问题：

define(['angular'], function(angular) {
  return angular.module('myApp.controllers', ['myApp.services'])
    .controller('MyController', ['$scope', 'myService',
      function($scope, myService) {
        $scope.data = myService.getData();
      }
    ])
};

顶部的定义语句说要确保angular在运行此函数之前对其进行初始化。该angular.module语句说要查找“$scope”和“myService”并将它们注入变量$scope和myService。问题是 AMD 加载器可能没有初始化定义的文件，myApp.services你可以假设它是定义myService的，因为它没有出现在上面的定义语句中。这在注入列表和 AMD 依赖列表之间造成了巨大的脱节。不仅很难判断 'myApp.services; 已加载，也很难分辨“myApp.services”中有哪些特定组件。IOW 是否“myService”既已加载又可注入？

我目前以 requirejs 的形式使用选项#3，因为我需要能够通过路由动态加载控制器（参见第一个链接）。此外，我现在使用的应用程序的大小使浏览器变得不切实际，因为页面太多。但是，我确实同意这是次优的，但目前我没有看到任何其他选择。
从实际的角度来看，我为每个文件定义了一个可注入对象。我还尝试使所有可注入数组都与 require 数组匹配。这不是必需的，但它使代码更易于维护。

我发现这些文章对写这篇文章很有帮助：

https://github.com/marcoslin/angularAMD

http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx

于 2014-01-02T22:17:54.427 回答