11

我目前正在为我的公司准备评估 JavaScript 模块化方法。我们正在为我们的项目定义“JavaScript 最佳实践”，模块化是核心问题之一。

到目前为止，我的研究揭示了两种主要方法：

周围有大量的加载器、插件、库等。

除此之外，还有goog.provide/goog.require来自Google Closure Library。

是否有进一步的方法需要考虑？我错过了任何重要/相关的规格吗？

我们的要求，简单地说：

  • 在单独的文件中构造 JavaScript 代码。
  • 在运行时加载相关模块。
  • ...无需将每个文件都包含为脚本标签。
  • 不必维护 JavaScript 文件的索引。
  • 支持聚合和缩小 - 能够构建和使用单个缩小/优化的 JavaScript 文件。
  • 能够以不同的组合使用模块——通常有不同的网页/客户端需要不同的模块子集。
  • 支持文档（使用 JSDoc？）。
  • 适合测试。
  • 适用于网页，跨浏览器。
  • 合理的IDE支持。

潜在地：

  • 与 ES6 模块对齐。
  • 适用于 Node.js 和移动平台（如 PhoneGap/Cordova）。

来自答案的新建议：

旁注：

  • 问题不在于哪种方法更好。
  • 我不是要特定的库和工具，而是要方法和规范。
  • 我并不是专门要求场外资源。（如果没有 SO 标签，我们可能不合理考虑它。）
  • 或等框架的注释。这在这个问题的框架中并不适合。如果项目需要一个框架（无论是 AngularJS 还是 ExtJS），那么几乎没有模块化问题，因为框架必须提供模块化 OOTB。如果项目不需要框架，由于模块化，带框架就大材小用了。这是我特别不询问库/工具的原因之一。
4

7 回答 7

1

ES和谐怎么样？

从这里引用： http: //addyosmani.com/writing-modular-js/

注意：虽然 Harmony 仍处于提案阶段，但您已经可以尝试 ES.next 的（部分）功能，这些功能通过 Google 的Traceur 编译器解决了对编写模块化 JavaScript 的原生支持。要在一分钟内启动并运行 Traceur，请阅读此入门指南。如果您有兴趣了解有关该项目的更多信息，还有一个关于它的 JSConf 演示文稿值得一看。

希望有帮助

于 2014-11-25T17:30:04.797 回答
1

另一种选择：AngularJS 模块系统，如此处所述。然而，这实际上只在客户端有用。

于 2014-11-22T16:52:20.800 回答
1

看看systemJS：

符合规范的通用模块加载器 - 加载 ES6 模块、AMD、CommonJS 和全局脚本。

设计为 ES6 规范系统加载器的小扩展集合，也可以单独应用。

通过自动检测格式加载任何模块格式。模块还可以使用元配置指定它们的格式。提供 AMD、CommonJS 和 ES6 循环引用处理的全面而准确的复制。将编译到 System.register 表单中的 ES6 模块加载到生产环境中，保持完整的循环引用支持。支持 RequireJS 风格的地图、路径、包、垫片和插件。跟踪包版本，并通过包版本语法解析 semver 兼容请求 - package@xyz、package^@xyz 加载器插件允许通过模块命名系统（如 CSS、JSON 或图像）加载资产。旨在与 ES6 Module Loader polyfill (9KB) 一起使用，压缩和压缩后的总占用空间为 16KB。将来，通过本机实现，不再需要 ES6 模块加载器 polyfill。由于 jQuery 为 DOM 提供，这个库可以平滑本地系统加载器提供的不一致和缺少的实用功能。

在 IE8+ 和 NodeJS 中运行。

lib 的创建者——Guy Bedford——也是一位出色的演示者：systemJS 演示。

于 2014-11-26T11:43:40.903 回答
1

您写道“我不是要求特定的库和工具，而是要求方法和规范。” 但是，您可以更接近ExtJS 5环境来满足您的所有要求。

如果您对此类商业产品不感兴趣，您可以了解其中的模式和解决方案。

与您的要求相关：

在单独的文件中构造 JavaScript 代码。

它实现了面向对象的编程范式，因此您可以创建类、子类、对象、mixin、插件。它连接了基于类的编程和基于原型的编程。

值得注意的是 MVVM 架构（视图、控制器、视图模型）、数据绑定、数据会话（记录/实体客户端管理）。

配置系统也很有趣。它非常方便。该config属性从父类合并到子类，并且在对象创建期间您可以传递也将合并的配置。当我们想要拥有可定制和灵活的组件时，它非常有用。

在运行时加载相关模块。

每个类都可能具有requires或uses指令，它们在将应用程序构建到一个文件时使用。您也可以手动加载文件。

...无需将每个文件都包含为脚本标签。

在开发环境文件中动态加载（异步或同步）。

在 prod env 中，必要的文件已构建为一个缩小文件。

支持聚合和缩小 - 能够构建和使用单个缩小/优化的 JavaScript 文件。

您可以使用工具构建应用程序Sencha cmd（并做一些其他事情）。

您可以使用三个预定义的环境（开发、测试、生产）或创建自己的环境（基于配置文件和 ant）。

能够以不同的组合使用模块——通常有不同的网页/客户端需要不同的模块子集。

您可以使用工作区和包。

支持文档（使用 JSDoc？）。

JS 鸭，教程

适合测试。

您可以进行单元测试（PhantomJS、JSLint、PhantomLint、Jasmine）。

您可以使用Siesta等专用框架或 Selenium 等其他流行的测试框架。

适用于网页，跨浏览器。

来自官网：

使用单一代码库在最广泛的浏览器和操作系统上交付应用程序。Ext JS 5 在现代浏览器上利用 HTML5 功能，同时保持旧浏览器的兼容性和功能。无论他们使用什么浏览器，都可以自信地向最终用户交付应用程序。

支持：Safari 6+、Firefox、IE 8+、Chrome、Opera 12+、Safari/iOS、Safari/iOS 6+、Chrome/Android、Chrome/Android 4.1+、IE 10+/Win 8

支持Cordova 和 PhoneGap 应用程序。

合理的IDE支持。

我不知道对 ExtJS 有专门支持的非常好的 IDE，但我在 Webstorm 上工作，这很好。库源在项目内部，因此自动完成功能有效（但不是 100% 完美）。

结论

我不想赞美 ExtJS 5。环境非常成熟和稳定，但最新版本的框架 (v5) 有几个错误，并不是一切都很好。但是，我可以更深入地了解该框架的原则，这些原则是合理的，朝着好的方向发展，但有时实施得不好；）

于 2014-11-22T17:03:45.273 回答
1

RequireJS 是一个很好的方法，因为它支持动态 javascript 模块加载以及保持代码干净。您还可以缩小整个模块，它实际上执行得非常快。它还允许称为 shimming 的东西，您可以在其中指定库或任何 js 文件的依赖项，这样每当您尝试加载它时，所有依赖项也会随之而来

于 2014-11-26T05:45:23.227 回答
0

看看browserify。它实现了有趣的方法。使用 browserify，您可以编写使用 require 的代码，就像在 Node.js 中使用它一样。

于 2014-11-22T17:54:25.807 回答
0

有各种可用于模块化开发的库，其中一些完全符合您的标准。

  • System.js System.js 是模块化开发库，具有一些与 IE8+ 和 nodejs 配合使用的基本功能。它还提供开发模块的功能，您可以将其包含在主文件中。有关 System.js 的更多信息，请遵循https://github.com/systemjs/systemjs
  • Require.js 模块化开发的最佳库。提供各种有用的功能并支持旧版浏览器。它支持 IE 6+。require.js 的另一个有用特性是它可以与 Rhinojs 和 nodejs 一起使用。实现很简单，就像您在 nodejs 中包含模块一样。
于 2014-11-27T03:41:26.403 回答