大型JavaScript应用程序应该如何构造?


12

最近向我展示了一些为OBIEE Mobile App Developer编写的JavaScript插件,以及一些用于各种项目的自定义库。

来自OOP的背景,我对这些项目的结构有些困惑。我看到的文件长数千行。我习惯将事物分解为文件和类,但是我知道这是一个不同的框架 -例如,文件大小是一个问题-但是必须有更好的方法来完成所有这些工作吗?

脚本的长度不仅影响可读性和可维护性,而且还会影响一个人对该程序的工作原理的一般理解。

大型应用程序的结构如何?是否有任何通用的OOP设计模式?


相关(可能是重复的):是否有任何适用于Java的OO原理?
t

为了减少生产中的文件大小,您可以使用工具进行文件最小化和统一。但是其他所有都可以与您经常使用的OOP相同。我使用javascript已有12年了,始终尝试遵守OOP,这会使您的生活更加轻松。了解有关咕unt咕的声音,它们可以为您提供帮助。
genichm '16

同意 您仍然可以根据需要将项目拆分为小模块。然后使用Gulp / Grunt / Webpack之类的东西为客户端合并并最小化文件为一个或几个文件。
neilsimp1 '16

3
是的,有一个通用的OOP设计模式。它称为打字稿。如果愿意,也可以使用ES6。Typescript和ES6是专门为迎合大型Javascript程序而设计的。
罗伯特·哈维

1
NCZ的这段视频非常相关:youtu.be/b5pFv9NB9fs,您可以查找他在许多主要框架中讨论的中介器,组件和模块加载模式
TehShrike

Answers:


8

如果您不熟悉JavaScript模式,我可以告诉您许多大型应用程序和库都在使用Revealing Module Pattern,但是您可以根据需要使用许多其他模式。

揭示模块模式虽然应该为您提供一种拆分大文件并对其进行逻辑组织的好方法;但是,当您使用JavaScript中的任何设计模式时,请注意,会变得非常混乱。尝试使用新的原型.call().apply()明智的。

在处理大型项目时,这些也可能有用:

  • 如果可能,请切换到TypeScript或ES6。
  • 编写模块化代码。第三方库有多种方法,但是它们总比没有好。
  • 使用任务运行器/构建系统自动执行任务。
  • 阅读有关设计模式的信息可能是一个好的开始。就像我在上面说的那样,“显示模块模式”非常有用,特别是在您认为需要时间掌握所有流行模式的情况下。
  • 编写单元测试。使用动态语言可能更具挑战性。测试应用程序的关键部分可以节省大量时间。
  • 使用实际上可以帮助您编写代码和捕获错误的IDE文本编辑器。WebStorm是一个不错的选择。崇高文字。
  • 如果您的IDE不提供调试器,请尝试掌握您喜欢的Web浏览器的调试器。
  • 使用库。根据项目的性质,尝试使用可以找到的最佳第三方代码。如果你正在编写一个Web应用程序,看看角度作出反应和良好的老Backbone.js的。如果要编写Node.js应用程序,请花一些时间在NPM存储库中进行搜索。您会惊讶于有多少个组装工已经在做您打算做的事情。
  • 即使您是唯一从事此项目的人,仍应使用Git之类的版本控制系统,并遵循不太严格和自以为是的编码标准,但仍可为您的队友提供一个很好的指导方针跟随。
  • 即使您选择TypeScript或ES6,但仍然了解JavaScript的无类OOP,原型OOP也会很有用,尤其是在调试时。

1

我是C ++开发人员,最近开始进行Web开发。我正在将大型桌面应用程序移植到Web环境。我使用相同的模式完全像构造C ++代码那样构造JavaScript代码。我总共有25到30个文件,但最终我会通过适当合并将它们减少到3-5个,并将它们全部缩小。

对我来说,只是语言改变了,无论好坏,但范式没有改变。JavaScript尽管有很多缺点和挫折感,但却很好地融合了功能和OOP风格。到目前为止,一切进展顺利。

最后,我很早就意识到,JavaScript允许编写比C ++更简洁的代码,因此有时由于非JS语言而产生大量LOC可能是因为坚持了旧的工作方式。解决此问题后,我看不到任何应该真正不同的东西。设计和算法毕竟与语言无关。


0

当然,项目之间的差异很大,但是,普遍接受的做法是,对于要用作库或模块的事物,将它们放入单个大文件并使用封装来防止其内部(“私有” )接口不会泄漏到外部。这对于希望使用库/模块的开发人员也很有帮助-将一个文件添加到应用程序配置或标头代码段,而不是复制和粘贴文件夹和文件的整个层次结构。它还反映了这样一个事实,即通过最小化和捆绑,在生产站点中,很可能会将其全部合并到一个文件中,以减少HTTP请求的数量。

您自己的应用程序代码不需要遵循这种做法,也可能不需要这样做。由于您的应用程序是唯一使用它的应用程序,因此您只需添加一次文件,并且可以依靠该平台为您处理最小化和捆绑。


0

在处理代码时,通常将不同的组件拆分为模块,每个组件通常实现一个类,每个组件都位于单独的文件中。在生产过程中,然后使用Browserify(http://browserify.org/)或RequireJS 这样的文件将这些文件打包为一个文件(因此,您将看到成千上万的代码行),以减少HTTP请求的数量,还要确保以正确的顺序加载依赖项

至于这些模块的类是如何实现的,与底层机制中的OOP略有不同,但从表面上看并没有什么不同。ES6甚至引入了class关键字,因此看起来应该很熟悉。有关MDN的这篇文章对于入门非常有用:https//developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain


0

我使用(Petri's)的Net Elements和Annotations为我的PDF表单应用程序组织或“组织”软件-使用Acrobat / JavaScript API的JavaScript程序。也许在您的情况下可能有用。

图用于建立网元的输入-输出关系和注释的两种形式视图。基于该图和表单视图,可以系统地创建PDF表单应用程序的JavaScript程序。因此,将“读取”源代码简化为验证其是否符合规范:图表和两个表单视图。

我的软件的实现使用构造函数和原型。如果性能成为问题,则用实例成员替换原型可能会提高性能,但会占用更多内存。也使用数组。如果性能成为问题,则使用直接引用。

一些属性是使用eval创建的;对于具有很多属性的对象,这将减少源文件中的代码量,并减少程序员的键入量。


0

仍然可以并建议以您惯用的OOP方式编写JavaScript。这是一本很好的书,介绍了JavaScript中最重要的设计模式。

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

还有许多JavaScript框架,其主要目标是能够将代码分成不同的文件和模块。如果您正在使用的特定框架要求将所有代码都放在一个文件中,那么绝对应该切换。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.