Question

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

目前我的网站可能有20多种不同的jQuery用途，所有这些都因页面而异。我只是想知道存储这段代码的最佳方法是什么？

一个大jquery.myfunctions.js文件中的所有内容？并检查每个语句的元素是否存在？
将脚本标记嵌入到每个单独的页面中？
使用PHP将不同的内容提供给脚本标签，如上所述？
每页单独的.js文件？我完全不喜欢这个声音

老实说，我甚至不确定jQuery是否会为你做这个，所以可以在每个页面上加载多个$('#whatever').function()而没有任何明显的性能问题？

对此的任何建议都很棒，可能是一个愚蠢的问题，但我想以你所知道的“正确”方式做事？

谢谢： - ）

Answer 1

我个人喜欢有一个包含所需内容的文件。它更好，因为一旦加载，浏览器就可以缓存它，你就不再关心了。

至于编码，我可能会在不同的文件中编写代码片段，我将其构建为单个文件进行制作。

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

尽管如此，您可以在视图/模板中包含标签，这样您就可以仅在特定视图/页面上触发某些功能。

例如：

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

在文章视图中：

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

确保您所包含的javascript保持非常轻薄和一般。不止一个呼叫一般功能的衬垫会导致麻烦。理论上，这不是你可能称之为最佳实践的东西。选择你认为整洁和易于维护之间的正确平衡（如果你的观点很少，也许你可以制作一个包含所有重要内容的大文件，一些简短的特定js文件，这些文件只能通过正确的视图在加载时触发正确的功能;如果你有很多视图，也许包括单行内联js标签将为你节省维护大量短文件的负担。）

Answer 2

我最近在重新开始一个非常复杂的网络应用程序的开发时遇到了这个问题。我决定了几种模式：

一般不会在页面上放置内联javascript - 它会阻止缓存并且无法将功能与表示分离

创建自己的命名空间 - 我喜欢它的DOD方法（http://www.dustindiaz.com/namespace-your-javascript/）因此，我的命名空间是DG，因此我的所有代码都是单个的一部分称为DG的全局变量 - 它是一个对象，包含所有子类

创建一个类原型结构，如果你在实现中做一些差异，那么实现

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

将Yahoo Module模式用于单身，但不要爱上它 - 如果每个页面有多个实例（{{ 3}}）

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

这个是可选的，但很棒。我真的很喜欢为javascript做依赖，所以我不必在我的代码中包含大量的脚本标签，并且它确实对性能有帮助，因为大多数需要/导入框架加载JS需求，而不是一开始。

Answer 3

我的想法：

永远不要在个人身上放任何东西页面本身，总是使用.js 文件
一个大文件没有利用浏览器加载更大的JS文件的能力，因为当人们进入你的网站时，在关键的初始页面加载期间，3个不同的并发连接上有3个较小的文件。
逻辑分组功能不同的文件，如文件验证，演示和计算，因为这样可以在文件大小增加时更容易维护
使用JSMIn（Javascript Minifier）缩小文件大小http://www.crockford.com/javascript/jsmin.html

jQuery / JS用于不同的页面 - 这样做的最佳方式是什么？

3 个答案: