编写 Javascript / jQuery 的最佳方式

Question

我对网络开发并不陌生，但我只是想知道你们是否能给我一些改进的建议：

当我编写 js 或 jQuery 时，我总是在 中编写这样的所有代码> 在我的页面上：

<script>
$(document).ready(function() {

   //All my functions and animations goes here…

});
</script>

现在，当我环顾网络时，我发现大多数人都将其功能和动画放在单独的“.js”文件中。他们也经常创建课程。

这是如何运作的？创建类并将函数放在单独的文件中有何优点？

谢谢，VG

Answer 1

将 javascript 放入单独文件的优点：

1. 在多个页面上重用 - 您可以更轻松地在多个页面上重用相同的 javascript 函数，而无需拥有多个单独的代码副本。
2. 更高效的缓存 - 浏览器可以更有效地缓存您的 JavaScript，从而加快页面加载时间。使用外部 JS 文件时，可以在首次使用时加载它，然后从浏览器缓存中检索该文件，以供使用同一 JS 文件的所有后续页面加载。
3. 代码与 HTML 分离 - 您可以更好地分离页面上不同类型的内容。视觉设计人员可以处理 HTML，而软件开发人员可以处理 javascript，但他们并不是在完全相同的文件中工作。

注意：出于性能原因，您不希望拥有大量小的、独立的外部 JS 文件，因为加载大量小的 JS 文件比加载一个较大的 JS 文件需要更长的时间。

将代码构建为类/对象可以具有以下优点：

1. 组织 - 它迫使开发人员将其代码组织成功能块，其中对象具有给定的一组方法和属性。对于除琐碎项目以外的任何项目，这是一种比一大堆 JavaScript 函数更简洁的组织方式。
2. 封装 - 面向对象的设计使您可以将数据放入对象中，这样就可以更清楚地知道谁拥有数据、谁修改数据、数据的生命周期是什么以及存在哪些方法来修改数据。此外，一些数据可以封装在对象内部，因此只能通过所需的方法进行修改（不能直接修改）。
3. 测试 - 为组织成对象、方法和属性的代码编写测试套件会容易得多。
4. 自记录 - 组织成对象、方法和属性的代码通常比一长串过程更具自记录性。
5. 模块化 - 将面向对象的代码分解为可重用的模块通常比不以这种方式组织的代码更容易。
6. 可扩展性 - 与直接的过程代码相比，良好的面向对象设计可以更容易地通过子类化和方法覆盖等方式进行扩展和增强。
7. 可维护性 - 由于上述所有原因，良好的面向对象代码可以更容易维护。

仅供参考，面向对象的思维和设计的许多优点可以在不使用文字类的情况下找到（JavaScript 甚至没有真正的类）。这更多的是如何设计和实现代码的问题，而不是特定语言语法功能的问题。例如，您可以使用纯 C 语言进行面向对象的设计，它没有类或对象的特定语言概念。在 javascript 中，许多语言元素都是具有可扩展属性和方法的对象，因此在 javascript 中进行面向对象设计就更容易了（事实上，很难避免这样做），因为你周围已经有对象了（窗口对象、所有DOM 对象等...）。

Answer 2

将 javascript 代码放在单独的文件中的优点是您不再混合标记（这就是 HTML）和脚本。您有明确的关注点分离。 CSS 也是如此。样式分为单独的文件。结果你的标记变得更小。 JavaScript 是静态的，客户端浏览器会缓存所有这些外部静态文件。因此他们不需要每次发出请求时都获取它。这可以提高应用程序的性能，因为通过线路发送的数据更少。仅从服务器检索逐页更改的标记。

至于将脚本组织成类和函数，这是为了更好的可读性和可重用性。当您正在处理包含大量 JavaScript 的大型项目时，最好将其拆分为单独的模块，以便团队中的不同开发人员可以更轻松地维护这些模块。

Answer 3

将类和非类拆分成单独的文件可以使其他项目更易于维护和重用。它只是让事情井井有条。

但请注意...您不希望客户端必须下载大量文件！很多时候，服务器端会运行一些东西来将所有相关文件组装到一个下载中。 PHP 可以轻松地为您做到这一点。

Answer 4

此外，实现 js 对象类有助于避免与变量和变量的命名空间冲突。函数名称...总而言之，在我看来这是一个很好的实践。

Answer 5

有很多差异和更好的实践。但例如您希望 jquery 函数位于另一个文件中，您可以编写一次代码。此外，它还可以提高您网站的速度，只需加载一次内容。