jQuery - 一些初学者问题

Question

jQuery - 一些初学者问题

javascriptjquery

5

我是jQuery的初学者，有一些基本问题：

每当有替换元素的需求时，是否建议使用jQuery？例如，绑定所有元素事件是否应该通过它而不是HTML？
是自己托管jQuery .js文件和其他相关文件（如JQuery UI）更好，还是使用Google的链接更好（他们似乎也为其他人提供主机服务）？
在页面加载完成后执行脚本，哪种方式更好？
1. $(document).ready(function() {})
2. $(function() {})
3. $().ready(function() {})
它们似乎都可以做同样的事情，但编写脚本的首选方式是什么？

- pimvdb

6个回答

2

1.) 是和不是。无论是否使用jQuery，将事件绑定unobtrusive都被认为是最佳实践(这意味着严格分离javascript、html和其他任何语言)。由于jQuery允许轻松地绑定事件，因此使用内联处理程序是更好的方式。

2.) 你应该使用CDN(例如google)来传递静态文件，如jQuery，以进行缓存目的+它们拥有一个巨大的服务器网络，甚至可能比你自己的主机更快。

3.) 我会坚持前两个调用。无论如何，基本上它们都可以做到，但最佳可读性可能是$(document).ready(function() {});

- jAndy

2

1) 将所有的事件绑定放在脚本中。这样可以方便后期更改。您还将感谢有一个单一的地方来查找所有与事件相关的逻辑。

2) 这个问题已经被很好地回答了。（参见链接）

3) 我喜欢第二种方法，因为它简洁明了，但真正理想的方法是像这样：

jQuery(function($) {
  // Your code using failsafe $ alias here...
});

为了避免与定义了$的其他框架产生冲突，建议采用以下方法。

- MikeWyatt

1

1: 这完全取决于你。通常情况下，jQuery会带来性能损失，因为它是一个额外的抽象层。只有在你觉得它可以帮助你更轻松地完成工作时才使用它。然而，除非你真正需要优化性能，否则使用它的好处将远远超过成本。jQuery为你提供了经过验证的跨浏览器兼容性，如果你希望迎合所有不同的浏览器，自己实现可能是一项昂贵的事情。

2: 使用谷歌的版本：这样你的用户有可能已经将其缓存，不需要再从你的网站加载。

3: 第二个选项，这个快捷方式被广泛使用到一个程度，我会说即使第一个选项很好并且具体，我也不会使用第三个选项。

- Martin Jespersen

我看到你不完全同意Chris的观点。时间惩罚可以忽略吗，还是我真的应该注意它？ - pimvdb

1

我认为第一点中的OP是指$().click() vs. onclick="", 而你回答的是jQuery vs.纯javascript。如果是这样，我也理解你的想法，尽管其他答案持不同意见。经过再次思考，我认为他们是正确的。虽然可能我误解了你的意思。 - davin

@pim：这取决于您的需求。jQuery是为方便而设计的，它可以大大缩短开发时间。如果您构建的应用程序没有处理大量数据，那么抽象层的性能惩罚很可能不是问题。如果像我一样在处理非常大量的数据的巨大项目上工作，jQuery可能会成为一个瓶颈，每当增加的开发时间成本足够低时，您都需要避免它。 - Martin Jespersen

@davin：我确实这样做了，抱歉没有表达清楚。 @Martin：我正在创建一个相当小的项目，所以不会涉及大数据处理问题。我想最好还是分开来，这样可以使代码更清晰，而不必为不重要的时间问题而苦恼。 - pimvdb

1

对于3D点，没有任何一个。出于性能考虑，通常建议将脚本放置在闭合的</body>标签之前。这样，您就不需要等待ready事件：在此阶段，页面已经加载完成。

请查看Jquery Cookbox (O'Reilly)，第1.2章：在DOM加载后但页面完全加载之前执行jQuery/JavaScript代码（该书总体而言是必读的）

要快速了解此技术，请查看将jQuery移动到body标签的末尾？（关于此主题，SO上还有许多其他帖子）

- Maxim Gueivandov

我理解你的观点，但是如果我没有弄错的话，<script>应该在<head>中。 - pimvdb

@pimvdb：<script> 几乎可以出现在任何地方，而且可以出现任意次数：例如请参见 http://www.w3.org/TR/html4/interact/scripts.html。 - Maxim Gueivandov

0

我个人不赞同“将JS与HTML完全分离”的理念。我很少看到实际应用场景中有任何好处。将HTML与JS分离通常会导致按钮在HTML中说“点击此处执行X”，但除非适当的javascript与它们一起使用，否则什么也不会发生。这有点失去了重点。对于jQuery和事件的情况...如果我可以检查firebug中的HTML按钮并查看该按钮的功能（通过查看onclick属性），那么我会发现调试应用程序要容易得多。
使用Google版本可以帮助缓存，但不要直接链接到jquery.com。我们曾经在这里这样做，结果他们崩溃了，我们也跟着倒霉。

- Mike Ruhlin

维护性噩梦。如果您想知道按钮的作用，请使用描述性ID/类名。 "单击此处执行X" 场景是糟糕的设计，没有适当的无JS备选方案。 - kapa

这是我的公司所走的方向，但是在多个JavaScript文件中搜索元素ID，只发现有人使用类名附加事件，而不是ID，这比编辑HTML和JavaScript文件以进行UI更改更难以维护...大部分可能来自于糟糕的设计，但不幸的是我不能选择与我合作的人或驱使他们快速完成任务而不是正确完成任务的期限。 - Mike Ruhlin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Kooken · Accepted Answer

是的。这样你的JS代码就可以与HTML代码干净地分离开来。你可以看一眼文件，一目了然地看到它如何影响你的HTML。如果它嵌入在HTML中，你就必须寻找onClick、onLoad等内容，对于大型应用程序来说可能会变得非常混乱。
客户端浏览器会缓存文件，因此如果你使用谷歌版本的JQuery，它将不必从你的服务器上下载。这样可以节省带宽。
$(document).ready(function() {}) 是首选。 $(function() {}) 只定义执行块，如果它是页面上执行的最后一个操作，则只有在页面准备好之后才会执行。