Javascript 针对不同页面的jQuery/JS-最好的方法是什么？

道歉，如果这是一个愚蠢的问题，我甚至不知道最好的措辞方式

目前，我有一个网站，可能有20多种不同的jQuery用法，每个页面都有不同的用法。我只是想知道存储此代码的最佳方式是什么

• 一个大jquery.myfunctions.js文件中的所有内容？并检查每个语句是否存在该元素
• 是否将脚本标记嵌入到每个页面
• 使用PHP将不同的内容传递到脚本标记中，有点像上面所说的吗
• 每页单独的.js文件？我一点也不喜欢这种声音

老实说，我甚至不确定jQuery是否为您执行此操作，因此在每个页面上加载多个

$（“#随便什么”）.function（）

，而不存在任何明显的性能问题，这没关系吧

关于这方面的任何建议都是非常好的，可能是一个愚蠢的问题，但我想以“正确”的方式做事，你知道吗

---

谢谢：-）

我个人喜欢一个文件，里面有所有需要的东西。这更好，因为一旦加载，浏览器就可以缓存它，而你不再在乎了

至于编码，我可以在不同的文件中编写代码片段，我将其构建为用于生产的单个文件

这样，您的所有代码都可以随时访问

不过，您可以在视图/模板中包含标记，以便仅在特定视图/页面上触发某些函数

例如：

myObject = { 
    myFunctionForArticles : function(){ $('.article').each(...); },
    myFunctionForCategories : function(){ ... }
};

在文章视图中：

<script type="text/javascript">
    myObject.myFunctionForArticles();
</script>

myObject.myFunctionForArticles（）；

不过，请确保包含的javascript保持非常精简和通用。调用通用函数的多个行程序可能会导致问题。从理论上讲，这不是一种你可以称之为最佳实践的做法。在整洁和易于维护之间选择你认为合适的平衡点（如果你的视图很少，也许你可以在一个包含所有重文件的大文件中创建一些短而特定的js文件，这些文件只能由右视图调用，以便在加载时触发正确的函数；如果你有很多视图，可能包括一个线性内联js标记，这将为你节省维护大量短文件的负担。）s） .

我的想法：

• 不要把任何东西放在个人身上 页面本身，始终使用.js 档案
• 一个大文件不能利用浏览器加载一个更大的JS文件的能力，比如说，当人们进入你的网站时，在关键的初始页面加载期间，在3个不同的并发连接上加载3个较小的文件
• 逻辑分组函数 不同的文件，例如 验证、演示和计算，因为这使得随着文件大小的增加更易于维护
• 使用JSMIn（Javascript Minifier）减少文件大小

---

我最近在重新开始开发一个非常复杂的web应用程序时解决了这个问题。我决定采用以下几种模式：

通常不要将内联javascript放在页面上-它会阻止缓存，并破坏将功能与表示分离的点

创建您自己的名称空间-我喜欢DOD方法（）因此，我的名称空间是DG，因此我所有的代码都是一个名为DG的全局变量的一部分-它是一个对象，包含所有子类

创建一个类原型结构，如果您正在做一些常见的事情，但实现之间有一点差异

• 例如，登录到不同的站点—您正在进行登录，但有些站点的登录方式可能与其他站点不同—因此，创建一个原型类来处理通用功能，然后在继承自原型的类中实现特定于站点的登录功能）

对单例使用Yahoo模块模式，但不要爱上它-如果一个类的每页有多个实例（）

使用require/import函数动态导入javascript

---

这是一个可选的，但很好。我真的很喜欢为javascript做依赖项，因此我不必在代码中包含大量的script标记，而且，它确实有助于提高性能，因为大多数require/import框架都是按需加载JS的，而不是一开始。单独开发，使事情更容易为您，但合并和最小化的生产。我想补充，使用CDN如果可能的话。微软有jQuery和一些插件，谷歌也有。我同意核心公共LIB，如MooTools、Prototype、jQuery。如果你能负担得起它在CDN中托管你自己的css、图像和Javascript，那么它肯定会加速页面加载。但对很多人来说并不现实。