jjzjj

javascript - 需要模式 Browserify/Angular

coder 2024-12-26 原文

我正在一个使用 angular 和 browserify 的项目中工作，这是我第一次同时使用这两个工具，所以我想要一些关于 require 的方法的建议带有browserify的文件。

我们可能会以不同的方式导入这些文件，直到现在我都尝试过这种方式:

Angular 应用程序:

app
  _follow
     - followController.js
     - followDirective.js
     - followService.js
     - require.js
- app.js

对于插件文件中的每个文件夹，我创建了一个 require.js文件，在其中我需要该文件夹的所有文件。像这样:
var mnm = require('angular').module('mnm');

mnm.factory('FollowService', ['Restangular',require('./followService')]);
mnm.controller('FollowController',['$scope','FollowService',require('./followController')])
mnm.directive('mnmFollowers', ['FollowService',require('./followDirective')]);

然后要求所有 require.js名为 app.js 的唯一文件中的文件这将生成 bundle.js
问题:

这种要求文件的方式可以是一个很好的结构，或者当我需要测试时会出现一些问题？我想看看你用 angular 和 browserify 实现良好结构的方法

最佳答案

遗憾的是，AngularJS 和 browserify 并不是很好的匹配。当然不像 React 和 browserify，但我离题了。

对我有用的是将每个文件作为 AngularJS 模块(因为每个文件已经是 CommonJS 模块)并让文件导出它们的 AngularJS 模块名称。

所以你的例子看起来像这样:

app/
  app.js
  follow/
    controllers.js
    directives.js
    services.js
    index.js
app.js看起来像这样:
var angular = require('angular');
var app = angular.module('mnm', [
  require('./follow')
]);
// more code here
angular.bootstrap(document.body, ['mnm']);
follow/index.js看起来像这样:
var angular = require('angular');
var app = angular.module('mnm.follow', [
  require('./controllers'),
  require('./directives'),
  require('./services')
]);
module.exports = app.name;
follow/controllers.js看起来像这样:
var angular = require('angular');
var app = angular.module('mnm.follow.controllers', [
  require('./services'), // internal dependency
  'ui.router' // external dependency from earlier require or <script/>
  // more dependencies ...
]);
app.controller('FollowController', ['$scope', 'FollowService', function ...]);
// more code here
module.exports = app.name;

等等。

这种方法的优点是您可以尽可能明确地保持依赖关系(即在实际需要它们的 CommonJS 模块中)，并且 CommonJS 模块路径和 AngularJS 模块名称之间的一对一映射可以防止令人讨厌的意外。

您的方法最明显的问题是您将要注入(inject)的实际依赖项与期望它们的函数分开，因此如果函数的依赖项发生变化，您必须接触两个文件而不是一个。这是一种代码味道(即坏事)。

对于可测试性，任何一种方法都应该起作用，因为 Angular 的模块系统本质上是一个巨大的 blob，并且导入两个定义相同名称的模块将相互覆盖。

编辑(两年后):其他一些人(在这里和其他地方)提出了替代方法，所以我可能应该解决它们以及权衡是什么:
  • 为您的整个应用程序拥有一个全局 AngularJS 模块，并且只需要对副作用进行需求(即，除了操作全局 Angular 对象外，不让子模块导出任何内容)。

    这似乎是最常见的解决方案，但完全没有模块。然而，这似乎是最实用的方法，如果您使用的是 AngularJS，那么您已经污染了全局变量，所以我想拥有纯粹基于副作用的模块是您的架构问题中最少的。
  • 在将 AngularJS 应用程序代码传递给 Browserify 之前连接它。

    这是“让我们结合 AngularJS 和 Browserify”的最直接的解决方案。如果您从 AngularJS 的传统“只是盲目地连接您的应用程序文件”位置开始并且想要为第三方库添加 Browserify，那么这是一种有效的方法，所以我想这使它有效。

    不过，就您的应用程序结构而言，添加 Browserify 并没有真正改善任何东西。
  • 与 1 类似，但每个 index.js 都定义了自己的 AngularJS 子模块。

    这是 Brian Ogden 建议的样板方法。这具有 1 的所有缺点，但在 AngularJS 中创建了一些层次结构，因为至少您有多个 AngularJS 模块，并且 AngularJS 模块名称实际上对应于您的目录结构。

    然而，主要缺点是您现在需要担心两组命名空间(您的实际模块和您的 AngularJS 模块)，但没有强制它们之间的一致性。您不仅要记住导入正确的模块(这又完全依赖于副作用)，而且您还必须记住将它们添加到所有正确的列表中，并将相同的样板添加到每个新文件中。这使得重构非常笨拙，并且在我看来是最糟糕的选择。

    • 如果我必须选择今天，我会选择 2，因为它放弃了 AngularJS 和 Browserify 能够统一的所有伪装，让两者各司其职。另外，如果你已经有一个 AngularJS 构建系统，它实际上只是意味着为 Browserify 添加一个额外的步骤。

    如果您没有继承 AngularJS 代码库并且想知道哪种方法最适合开始一个新项目:不要在 AngularJS 中开始一个新项目。要么选择支持开箱即用的真正模块系统的 Angular2，要么切换到不受此问题困扰的 React 或 Ember。

    关于javascript - 需要模式 Browserify/Angular，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26275888/

    javascriptBrowserifycodeAngularJS39

    有关javascript - 需要模式 Browserify/Angular的更多相关文章

    1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

      当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

    2. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

      我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

    3. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

      我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

    4. ruby - 如何在续集中重新加载表模式？ - 2

      鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

    5. ruby - rspec 需要 .rspec 文件中的 spec_helper - 2

      我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只

    6. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

      我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

    7. ruby - 是否有用于序列化和反序列化各种格式的对象层次结构的模式？ - 2

      给定一个复杂的对象层次结构，幸运的是它不包含循环引用，我如何实现支持各种格式的序列化？我不是来讨论实际实现的。相反，我正在寻找可能会派上用场的设计模式提示。更准确地说:我正在使用Ruby，我想解析XML和JSON数据以构建复杂的对象层次结构。此外，应该可以将该层次结构序列化为JSON、XML和可能的HTML。我可以为此使用Builder模式吗？在任何提到的情况下，我都有某种结构化数据-无论是在内存中还是文本中-我想用它来构建其他东西。我认为将序列化逻辑与实际业务逻辑分开会很好，这样我以后就可以轻松支持多种XML格式。 最佳答案 我最

    8. ruby - 为什么在 ruby​​ 中创建 Rational 不需要新方法 - 2

      这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？

    9. ruby-on-rails - environment.rb 中设置的常量在开发模式中消失 - 2

      了解Rails缓存如何工作的人可以真正帮助我。这是嵌套在Rails::Initializer.runblock中的代码:config.after_initializedoSomeClass.const_set'SOME_CONST','SOME_VAL'end现在，如果我运行script/server并发出请求，一切都很好。然而，在我的Rails应用程序的第二个请求中，一切都因单元化常量错误而变得糟糕。在生产模式下，我可以成功发出第二个请求，这意味着常量仍然存在。我已通过将以上内容更改为以下内容来解决问题:config.after_initializedorequire'some_cl

    10. ruby-on-rails - 需要帮助最大化多个相似对象中的 3 个因素并适当排序 - 2

      我需要用任何语言编写一个算法，根据3个因素对数组进行排序。我以度假村为例(如Hipmunk)。假设我想去度假。我想要最便宜的地方、最好的评论和最多的景点。但是，显然我找不到在所有3个中都排名第一的方法。Example(assumingthereare20importantattractions):ResortA:$150/night...98/100infavorablereviews...18of20attractionsResortB:$99/night...85/100infavorablereviews...12of20attractionsResortC:$120/night

    随机推荐