jQuery/JS用于不同的页面——最好的实现方法是什么?

Apologies if this is a silly question, and I'm not even sure of the best way of wording it...

如果这是一个愚蠢的问题，我甚至不确定最好的表达方式……

At the moment I have a site with maybe 20+ different uses of jQuery, all varying from page to page. I'm just wondering what the best way is to store this code?

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

Everything in one big jquery.myfunctions.js file? And check if the element exists for each statement?
在一个大的jquery。myfunction中。js文件?检查每个语句是否存在元素?
Embed script tags into each individual page?
将脚本标记嵌入到每个单独的页面中?
Use PHP to deliver different content into script tags kinda like the above?
使用PHP将不同的内容交付到脚本标签中，就像上面提到的那样?
Separate .js files per page? ims I don't like the sound of this at all
每个页面分离.js文件?我一点也不喜欢这种声音

To be honest, I'm not even sure if jQuery does this for you, so it's okay to have multiple $('#whatever').function() loaded onto each page without any noticeable performance issues?

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

Any advice on this would be fantastic, probably a silly question but I want to do things the 'proper' way you know?

关于这个问题有什么建议吗?也许是一个愚蠢的问题，但是我想用你知道的“合适”的方式来做事情。

Thanks :-)

谢谢:-)

3 个解决方案

#1

Personnally I like to have one file with all the things needed in it. It's better because once loaded, the browser can cache it and you don't care anymore.

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

As for coding, I may write pieces of code in different files, which I build as a single file for production.

至于编码，我可以在不同的文件中编写代码片段，我将这些代码片段作为一个单独的文件进行生产。

This way, all your code is accessible anytime.

这样，您的代码就可以随时访问。

Nevertheless, you may include tags in your views/templates, so that you can trigger certain functions only on particular views/pages.

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

For example :

例如:

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

And within the Article view :

在文章视图中:

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

Make sure your included javascript keeps very thin and general though. More than one liners calling a general function can lead to trouble. In theory it is not something you might call a best-practise. Choose what you feel is the right balance between tidyness and easiness to maintain (if you have few views, maybe you can make, along with the one big file containing all the heavy stuff, some short and specific js files, which are called only by the right view to trigger the right functions at load time ; if you have a lot of views, maybe including one-liner inline js tags will save you the burden to maintain a lot of short files).

确保包含的javascript保持非常细和通用。调用通用函数的多个班轮可能会导致问题。从理论上讲，它不是你可以称之为最佳实践的东西。选择你认为是正确的平衡tidyness和容易维护(如果你有几个观点,也许你可以,连同一个大文件包含所有沉重的东西,一些短期和特定的js文件,称为只有正确的观点来触发正确的函数加载时间;如果您有很多视图，也许包括一行的内联js标记将为您节省维护大量短文件的负担)。

#2

I've recently grappled with this problem when re-starting development of a very involved web app. I decided on several patterns:

我最近在重新开发一个非常复杂的web应用程序时遇到了这个问题。

do not put inline javascript on pages in general - it prevents caching and defeats the point of separating functionality from presentation

不要将内联javascript放在页面上——它可以防止缓存，并破坏从演示中分离功能的要点?

create your own namespace - I like the DOD approach to it (http://www.dustindiaz.com/namespace-your-javascript/) So, my namespace is DG, thus all of my code is part of a single global variable called DG - which is an object, containing all of the subclasses

创建您自己的命名空间——我喜欢DOD方法(http://www.dust indiaz.com/namespac-your- javascript/)所以，我的命名空间是DG，因此我所有的代码都是一个名为DG的全局变量的一部分，DG是一个对象，包含所有的子类

Create a class prototype structure, where if you're doing common things with a bit of difference between implementations

for example, logging into different sites - you're doing logins, but, some may do it differently than others - so, create a prototype class than handles generic functionality, and then implement site-specific login functionality in classes that inherit from the prototype)
例如，登录到不同的站点——您正在进行登录，但是，有些可能与其他站点不同——因此，创建一个原型类而不是处理一般功能，然后在继承自原型的类中实现特定于站点的登录功能)

创建一个类的原型结构,如果你做事的差别实现例如,登录不同的网站,你做的登录,但是,有些人可能比其他人不同,所以,创建一个原型类比处理通用的功能,然后实现特定站点的登录功能的类继承的原型)

Use the Yahoo Module pattern for singletons, but don't fall in love with it - it's not useful if you have more than one instance per page of a class (http://www.yuiblog.com/blog/2007/06/12/module-pattern/)

对于单例使用Yahoo模块模式，但不要爱上它——如果一个类的每个页面有多个实例，那么它就没有用处(http://www.yuiblog.com/blog/2007/06/12/module-pattern/)

use a require/import function to do dynamic imports of javascript

使用require/import函数来执行javascript的动态导入

this one is an optional but great. I really like doing dependencies for javascript, so I don't have to include a ton of script tags in my code, and, it really does help with performance, as most require/import frameworks load JS on demand, not at first.

这个是可选的，但很好。我非常喜欢为javascript做依赖项，所以我不需要在代码中包含大量的脚本标记，而且，它确实有助于提高性能，因为大多数需要/导入框架按需加载JS，而不是一开始。

#3

My thoughts:

我的想法:

Never put anything on the individual pages themselves, always use .js files
不要在单独的页面上放置任何东西，总是使用.js文件
One big file doesn't take advantage of the browser's ability to load a larger JS file as lets say 3 smaller files on 3 different concurrent connections during that critical initial page load when people enter your website
一个大文件不能利用浏览器加载大JS文件的能力，比如当人们进入你的网站时，在关键的初始页面加载过程中，在3个不同的并发连接上加载3个小文件
Logically group functions in different files such as files for validation, presentation and calculations as this makes it easier to maintain as file sizes increase
逻辑上，在不同的文件(如用于验证、表示和计算的文件)中对函数进行分组，因为随着文件大小的增加，这样更容易维护
Use JSMIn (Javascript Minifier) to reduce file sizes http://www.crockford.com/javascript/jsmin.html
使用JSMIn (Javascript缩小器)来减少文件大小http://www.crockford.com/javascript/jsmin.html。

#1