是否存在组织Javascript代码的最佳方法?

Is there a best way to organize Javascript code?

本文关键字：最佳 方法 代码 Javascript 存在 是否      更新时间：2023-09-26

我一直在做一个小的web应用程序，使用jQuery在Javascript中添加行为和追加DOM对象。问题是，代码开始增长非常快，我不知道在哪里存储它(无论是在同一页，它正在使用，或在一个大的js文件)。现在，我有:

  • 1 js文件与一个对象存储一些从服务器，与最重要的方法(应该跨应用程序)。其中之一方法包含一个DOM元素生成器(然后我从
  • 1 js文件中有一个大方法当窗口时调用。准备好了吗?行为到一堆DOM对象(只与一个网页相关)。
  • 一些标签已填满而页面上的代码却没有使用第二个js文件。此代码也是网页相关的。

现在，你的眼睛可能会杀了我，我知道。这绝对不是一个好的(或者至少是不一致的)存储Javascript的方式。所以，我的问题是:

是否有组织Javascript代码的最佳方法?

我想至少我应该遵循一个规则，虽然问题是，我不确定是否最好有一个js文件的所有"全局数据和方法"，然后存储在较小的js文件或其他的，或者干脆放弃，去喝茶。

你们觉得怎么样?提前感谢!

PS:显然代码重用是一个很好的观点。然而，我将重用最多的脚本保存在第一个js文件中(具有全局内容的那个)。

我通常将全局脚本存储在单个公共文件中，每个页面都有其单独的脚本文件。

您可以将页面特定的脚本文件与页面一起存储(在同一个文件夹中)，或者在一个公共的"脚本"文件夹中复制站点的目录结构(如果您有许多许多脚本文件很有用)，这两种方式我都将脚本文件命名为它们的页面对应，以使映射更容易。

还可以使用名称空间进一步组织代码。

这个问题没有明确的答案，但有一点要记住，如果你把尽可能多的javascript放在外部文件中，它可以被缓存，这将使后续访问页面的速度更快。

我倾向于遵循的规则是:

  • 所有可以在多个地方使用的代码都放在外部文件
    • 没有外部文件包含实际做任何事情的代码，这些文件作为我可以使用的代码库。
  • 页面本身包含最小的javascript代码来初始化我的库中的代码。
  • 如果这个初始化代码需要超过10行左右的代码，那么值得考虑将其放入库
    • 中的函数/方法中。
  • 所有javascript都尽可能靠近页面底部，就在</body>标签之前。这是因为当浏览器遇到<script>标记时，它将停止呈现页面并在继续之前评估脚本。这会让用户感觉页面变慢(尽管在加载时间上没有实际的区别，感知很重要!)
  • 只有绝对必须放在头部的脚本才会被放在那里，原因如上所述。

编辑:如果你在一个页面中包含很多javascript文件，那么值得考虑将它们合并到一个文件中。这是因为页面中的每个<script src="...">标记都会触发一个HTTP请求，并且规范说在任何时候每个域只能有两个请求打开。将它们放在一个文件中还可以增加使用JS压缩器(如closure或YUI)的好处，以及使用mod_gzip

的好处。

yslow是一个很好的工具，用于确定优化以加速页面加载，它提供了大量关于javascript文件优化的建议。

如果您使用面向对象的设计策略，那么"代码放在哪个文件中"的答案几乎会自己回答。

javascript的主要部分(类定义和大量方法)应该放到适当的.js文件中(类定义通常有自己的.js文件)。但是初始化代码应该放到使用它们的HTML页面中。 jQuery提供了一个很好的例子:

它有自己的.js文件用于主类和函数定义，它允许你添加执行特定任务的插件，每个插件都在自己的。js文件中。

一旦你想使用jQuery，只需添加jQuery脚本。想要这个插件在这个页面上吗?

我想我理解你的问题，所以你可以用模块组织你的代码，这些模块将在一个文件中连接。

对于模块，你可以使用CommonJS技术。它看起来像这样:

(function(window) {
  var Module = {};
  window.Module = Module;
})(window);

,除了:

(function(module) {
  module.NewProp = {};
})(window.Module);

当然，你可以用你自己的变量来代替window等

并且，如果你将使用Node.js -它是在服务器和客户端之间共享变量的好方法。

(function(exports) {
  exports.Func = function(){};
})(typeof exports === 'undefined' ? wow : exports);

希望有帮助!

相关文章：