使用 JQuery 创建链接的最佳方法? [英] Best way to create a link using JQuery?

问题描述

我们使用 jqGrid 自定义格式化程序在 JQuery 网格中输出链接.我们只是使用字符串操作来构造链接:

We use jqGrid custom formatters to output links in our JQuery grids. We just construct the links using String manipulation a la:

var s = "<a title="Blah" href="javascript:BlahFunc('" + options.rowId + "')">This is blah<a>";

有没有更聪明"的方法来使用 JQuery 创建链接(和其他表单元素)?

Is there a more "clever" way to create links (and other form elements) using JQuery?

推荐答案

正如 Steven Xu 正确提到的，插入 HTML 字符串比操作 DOM 更快，这就是为什么我建议使用字符串操作而不是 jQuery 创建元素的原因.

As Steven Xu correctly mentioned, inserting HTML strings is faster than manipulating the DOM, which is why I'd recommend creating elements with string manipulation instead of jQuery.

你只需要改变这个:

var s = "<a title="Blah" href="javascript:BlahFunc('" + options.rowId +
        "')">This is blah<a>";

到这里:

var s = "<a title="Blah" href="javascript:BlahFunc('" + options.rowId +
        "')">This is blah</a>";

(关闭 <a> 标记，并在字符串末尾加上 </a>).

(close <a> tag with </a> at the end of the string).

字符串操作比 DOM 操作快得多(参见 this 例如).此外，如果您尝试在大型 HTML 代码中间插入 DOM 片段，差异会更大.DOM DocumentFragments 的使用可以稍微提高性能，但是字符串连接的使用是最快的方法.

The string manipulation is much faster than the DOM Manipulation (see this for example). Moreover the difference will be much more if you try to insert a DOM fragment in the middle of a large HTML code. The usage of DOM DocumentFragments can a little improve the performance, but the usage of the string concatenation is the fastest way.

所有其他答案都在不了解您使用它的上下文(jqGrid 自定义格式化程序)的情况下写了他的答案.我试图解释为什么它对你的情况很重要.

All other answers wrote his answer without the knowledge about the context (jqGrid custom formatter) where you use it. I try to explain why it is important in your case.

由于性能优势，jqGrid 首先为网格构建 HTML 代码片段作为字符串数组，然后根据 .join('') 从字符串数组构建一个字符串并插入结果只在表体末尾.(我想你使用 gridview:true jqGrid 选项是几乎总是推荐).jqGrid 自定义格式化程序 是 jqGrid 在网格(表)体的构建.自定义格式化程序必须将 HTML 代码片段作为 string 作为结果返回.该字符串将与构建网格(表格)主体的其他字符串连接.

Because of performance advantages, jqGrid builds HTML code fragments for the grid first as the array of strings, then build one string from the string array with respect of .join('') and insert the result in the table body at the end of all only. (I suppose that you use gridview:true jqGrid option which is almost always recommended). The jqGrid custom formatter is a callback function used by jqGrid during the building of the grid (table) body. The custom formatter must return the HTML code fragment as the string as the result. The string will be concatenated with other strings which build the body of the grid (table).

因此，如果您将当前代码从纯字符串操作更改为 jQuery DOM 操作并将结果转换为字符串(需要作为自定义格式的结果返回)，那么您的代码将运行缓慢并且您将拥有没有其他优势*.

So if you will change your current code from pure string manipulation to the jQuery DOM manipulation and converting the results to the string (which needed be returned as the result of the custom formatting) then your code will work slowly and you will have no other advantages*.

使用字符串操作的唯一真正缺点是验证您构建的代码的问题.例如，使用没有结束标记的代码 </a> 是一个潜在的问题，您可能会遇到.在大多数情况下，问题会在插入 DOM 片段的过程中得到解决，但有时您会收到真正的问题.所以你应该非常仔细地测试你插入的代码.

The only real disadvantage of the usage of the string manipulations is the problem of the verification of the code which you build. For example, the usage of code without the close tags </a> is a potential problem which you can have. In the most cases the problem will be solved during the inserting of the DOM fragment, but sometimes you can receive real problems. So you should just test the code which you inserted very carefully.

再备注:如果你想遵循 不显眼的 JavaScript 风格，你可以使用#"作为 href 属性的值，并在 gridComplete 或 loadComplete 事件处理程序中绑定相应的 click 事件.如果您在执行时遇到问题，可以打开一个新问题，我会尝试为您编写相应的代码示例.

One more remark: If you want to follow unobtrusive JavaScript style you can use "#" as the value for the href attribute and bind the corresponding click event inside of gridComplete or loadComplete event handler. If you will have problems with the implementation of this you can open a new question and I will try to write the corresponding code example for you.

注意:我认为最好的实现方式是使用 onCellSelect 或 beforeSelectRow 而不是将 click 事件绑定到每个 列中的 <a> 元素.我建议阅读以下答案以了解详细信息:this one、另一个和另一个旧答案.

Note: I think the best implementation way will be the usage of onCellSelect or beforeSelectRow instead of binding click event to every <a> element in the column. I recommend to read the following answers for details: this one, another one and one more old answer.

这篇关于使用 JQuery 创建链接的最佳方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！