模块化JavaScript - 除了CommonJS和AMD之外还有其他方法可以考虑吗?

时间:2014-11-17 09:19:23

标签: javascript amd commonjs modular modularization

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

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

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

除此之外,goog.provide还有goog.require / Google Closure Library

还有其他方法需要考虑吗?我错过了哪些重要/相关的规范?

我们的要求,简要说明:

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

潜在:

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

答案的新建议:


附注:

  • 问题是关于哪种方法更好。
  • 我不是要求特定的库和工具,而是要求方法和规范。
  • 我并非特别要求提供异地资源。 (如果没有SO标签,我们可能不合理。)
  • 关于等框架的说明。这不适合这个问题的框架。如果项目需要一个框架(无论是AngularJS还是ExtJS),那么大多数都没有模块化问题,因为框架必须提供模块化OOTB。如果项目不需要框架,那么由于模块化而带来框架是一种过度的做法。这是我特别询问库/工具的原因之一。

7 个答案:

答案 0 :(得分:1)

另一种选择:AngularJS模块系统,如here所述。但是,这实际上仅在客户端有用。

答案 1 :(得分:1)

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

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

与您的要求的关系:

  

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

它实现了面向对象的编程范例,因此您可以创建类,子类,对象,混合,插件。它连接class-based programming and prototype-based programming

值得注意的是MVVM架构(View,Controller,ViewModel),数据绑定,数据会话(记录/实体客户端管理)。

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

  

在运行时加载相关模块。

每个类可能具有requiresuses指令,这些指令在将应用程序构建到一个文件时使用。您也可以手动加载文件。

  

...无需将每个文件都包含在脚本标记中。

在dev env文件中动态加载(异步或同步)。

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

  

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

您可以使用Sencha cmd工具构建应用程序(并执行其他一些操作)。

您可以使用三个预定义的env(开发,测试,制作)或创建自己的(基于配置文件和ant)。

  

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

您可以使用workspacespackages

  

支持文档(使用JSDoc?)。

JS Ducktutorial

  

适合测试。

你可以做unit tests(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 and PhoneGap application

  

合理的IDE支持。

我不太了解非常好的IDE,专门支持ExtJS,但我在Webstorm上工作,这很好。图书馆资源来自项目内部,因此自动完成工作(但不是100%完美)。

<强>结论

我不想赞美ExtJS 5.环境非常成熟和稳定,但最新版本的框架(v5)有一些错误,并不是一切都很好。但是,我可以更深入地了解该框架的原则,这些原则是合理的,在良好的方向上推动但有时实施不好;)

答案 2 :(得分:1)

ES Harmony怎么样?

引自这里:http://addyosmani.com/writing-modular-js/

  

注意:虽然Harmony仍处于提案阶段,但您可以   已经尝试了ES.next的(部分)功能,解决了原生的问题   谷歌的Traceur支持编写模块化JavaScript   编译器。要在不到一分钟的时间内启动并运行Traceur,请阅读   这个入门指南。还有一个JSConf演示文稿   如果您有兴趣了解更多信息,那值得一看   该项目。

hopeThatHelps

答案 3 :(得分:1)

RequireJS是一个很好的方法,因为它支持动态javascript模块加载以及保持代码清洁。您还可以缩小整个模块,它实际上执行速度非常快。它还允许称为shimming的东西,你可以在其中指定库或任何js文件的依赖关系,这样每当你尝试加载它时,所有的依赖关系也都遵循

答案 4 :(得分:1)

看看systemJS

  

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

     

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

     

通过自动检测格式加载任何模块格式。   模块还可以使用meta config指定其格式。提供   AMD,CommonJS和ES6循环的全面和精确复制   参考处理。加载编译成的ES6模块   用于生产的System.register表单,维护完整循环   参考支持。支持RequireJS样式的地图,路径,捆绑,垫片   和插件。跟踪包版本,并解决semver兼容问题   请求通过包版本语法 - package@x.y.z,   package^@x.y.z。 Loader插件允许通过模块加载资产   命名系统,如CSS,JSON或图像。旨在与   ES6模块装载器polyfill(9KB),总占地面积为   16KB缩小和压缩。将来,使用本机实现,   不再需要ES6 Module Loader polyfill。作为jQuery   提供了DOM,这个库可以平滑不一致   并且缺少本机系统提供的实用功能   加载器。

     

在IE8 +和NodeJS中运行。

lib的创造者 - Guy Bedford - 也是一位出色的主持人:systemJS presentation

答案 5 :(得分:0)

查看browserify。它实现了有趣的方法。使用browserify,您可以编写使用require的代码,方法与在Node中使用它的方式相同。

答案 6 :(得分:0)

有各种库可用于模块化开发, 从中满足一些标准。

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