完善jQuery函数调用.最佳做法? [英] Componetizing jQuery functions calls. Best practices?
问题描述
我正在建立一个由组件组成的网站.定义为一组特定的HTML，CSS和jQuery的组件.该网站的每个页面都将包含许多组件.
I'm building a site that is going to consist of components. A component defined as a particular set of HTML and CSS and jQuery. Each page of the site will consist of many components.
按照最佳做法，我们将javascript块放在页面底部.我们加载了所需的.js文件，然后计划调用所需的函数:
Per best practices, we're putting our javascript block at the bottom of the page. We load the needed .js files, and then I'm planning on calling the functions needed:
doThisThing();
doThatThing();
比方说我有组件X.只要该组件出现在呈现的页面上，我都想调用一个函数.从jQuery的角度来看，处理此问题的理想方法是什么?一些选项:
Let's say I have Component X. I want to call a function whenever that component appears on the rendered page. From a jQuery perspective, what would be the ideal way to handle this? Some options:
1)始终调用该函数，而不管该组件是否在页面上:
1) Always call the function regardless of whether the component is on the page or not:
$('.componentX').doYourThing()
这很容易，因为我们只有一个通用的jQuery函数调用块.但是，在搜索DOM寻找可能不存在的东西时，性能会受到轻微影响.
This is easy, as we can just have one universal block of jQuery function calls. But there's a slight performance hit as it's searching the DOM looking for something that may not be there.
2)将调用附加到组件本身:
2) Attach the call to the component itself:
<div id="componentX">my component</div>
<script>$('.componentX').doYourThing()</script>
这很好，因为它本身在同一组件中包含标记和.js调用.缺点?
This is nice as it self contains the markup and .js calls in the same component. Drawbacks?
3)将我们的组件体系结构与后端系统集成在一起，以允许实例化.js块中的组件.换句话说，它将检查该组件是否放置在页面temlate上，如果是，则会将依赖于它的js函数调用添加到主脚本块中.
3) Integrate our component architecture with the back end system to allow the instantiation of components in the .js block. In otherwords, it'd check to see if the component is placed on the page temlate and, if so, will add the js function calls it depends on to the main script block.
4)我应该考虑的其他选择?
4) other options I should consider?
更新:
基于肯普的回答，我认为我应该澄清一下.我们所有的jQuery函数都将打包为一个大的压缩.js文件，因此就服务器点击率而言，它们都是相同的.我对如何在单个页面模板的上下文中最好地处理页面上每个组件的所有单个函数调用感兴趣.
Based on kemp's answer, I thought I should clarify a bit. All of our jQuery functions will be wrapped up into one large compressed .js file, so in term of server hits, it's all the same. I'm more interested in how to best handle all the individual function calls for each component on the page in the context of individual page templates.
例如，组件X可能会在所有页面的90％上使用.这样，为其他10％的页面调用jquery函数似乎没什么大不了的.
For instance, component X might be used on 90% of all pages. As such, calling the jquery function for those other 10% of pages doesn't seem like a big deal.
但是，分量Y只能在所有页面的5％上使用.我可能不想在95％的时间都在每个页面上调用jquery函数，这是不必要的.
However, component Y might only be used on 5% of all the pages. I probably don't want to call the jquery function on each and every page as 95% of the time, it'd be unecessary.
进一步使情况复杂化的情况:组件Z可能在所有页面的100％上使用一次，但在5％的页面上使用两次.
A further scenario that might further complicate things: component Z might be used once on 100% of all pages, but twice on 5% of the pages.
推荐答案
根据项目的大小，我会选择选项#1，因为它很简单，或者选择选项#3，因为它很合适.
Depending on the size of the project, I would go with option #1 because of its simplicity, or option #3 because it is proper.
使用#1，如果正确设置选择器，则对性能的影响可能微不足道.基于ID的选择器是最好的(#elementid)，然后是element.classname(相比之下，.classname相当慢).
With #1, if you setup your selectors properly, the performance impact will probably be insignificant. Id based selectors are the best (#elementid), then element.classname (just .classname is quite slow in comparison).
对于#3，每个组件都需要知道其功能需要哪个JS文件.在页面上定义组件后，必须将该JS文件添加到页面的<head>中.在不了解服务器端语言和框架(如果有)的情况下，很难说更多，但是如果组件通过服务器上的代码以任何方式表示，则它们应该具有构造函数或初始化例程，并且在该代码内您需要放置逻辑来修改页面的<head>或以后要构造页面的<head>的某些集合.
With #3, each component needs to know which JS file is required for its functionality. When the component is defined on a page, that JS file must be added to the <head> of the page. Without knowing your server side language and framework (if any), it is hard to say more, but if the components are represented via code on the server in any way, they should have a constructor or initialization routine, and within that code is where you'd place the logic to modify the page's <head>, or some collection that is later read from to construct the page's <head>.
我不喜欢#2，因为届时您将在整个页面上使用JavaScript.这似乎不理想.
I don't like #2 because you'll have JavaScript all over the page then. That seems less than ideal.
这篇关于完善jQuery函数调用.最佳做法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
