Componetizing 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 块中实例化组件.换句话说，它会检查组件是否放置在页面模板上，如果是，则将其依赖的 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?
更新:
根据 kemp 的回答，我想我应该澄清一下.我们所有的 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.
这篇关于Componetizing jQuery 函数调用.最佳实践?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
