javascript - 编写 Javascript/jQuery 的最佳方式

标签 javascript jquery html

我不是网络开发的新手,但我只是想知道你们是否有一些建议可以帮助我改进:

当我写 js 或 jQuery 时,我总是在 <head> 中写所有这样的代码在我的页面上:

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

   //All my functions and animations goes here…

});
</script>

现在,当我环顾网络时,我发现大多数人都将他们的功能和动画放在单独的“.js”文件中。他们还经常创建类(class)。

这是如何运作的?创建类并将函数放在单独的文件中有什么好处?

谢谢,VG

最佳答案

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

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

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

将代码结构化为类/对象具有以下优点:

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

仅供引用,无需使用文字类(javascript 甚至没有)也可以找到面向对象思维和设计的许多优点。它更多的是你如何设计和实现你的代码的问题,而不是一个特定的语言语法特性。例如,您可以使用普通 C 进行面向对象的设计,它没有类或对象的特定语言概念。在 javascript 中,许多语言元素是具有可扩展属性和方法的对象,因此在 javascript 中进行面向对象设计更加容易(事实上,很难避免这样做),因为你周围已经有对象(窗口对象,所有DOM 对象等...)。

关于javascript - 编写 Javascript/jQuery 的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9048567/

相关文章:

javascript - 修复 <div contenteditable ="true"> 的 innerHTML 时的光标位置

javascript - <br> 当我 alert() PRE 标签的内容时被删除

html - 页面可以呈现的最大字体大小

javascript - 在 javascript 和 html 中使用变量

javascript - Onclick 和 onmouseover 一起吗?

javascript - 如何从 Javascript 函数执行 Angular 函数?

javascript - 将多个div内容替换为其他内容并能够循环

javascript - jQuery onclick 从 mysql 表中删除行

javascript - 如何使用 jQuery 使 div 跟随光标?

javascript - 页面重新加载 Jscript 时禁用复选框