编写Javascript/jQuery的最佳方法

Vik*_*löf 5 javascript jquery html5

我不是网络开发人员的新手,但我只是想知道你们是否有一些建议让我改进:

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

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

   //All my functions and animations goes here…

});
</script>
Run Code Online (Sandbox Code Playgroud)

现在,当我浏览网页时,我发现大多数人的功能和动画都在一个单独的".js"文件中.他们经常创建课程.

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

谢谢,VG

jfr*_*d00 6

将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对象等...).