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

问题描述

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

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

是否存在使用JQuery创建链接(和其他表单元素)的更聪明"的方法?

解决方案

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

您只需要更改此内容:

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>).

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

所有其他答案在没有使用上下文(jqGrid定制格式器)的知识的情况下写下了答案.我试着解释为什么这对您来说很重要.

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

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

使用字符串操作的唯一真正的缺点是验证所生成代码的问题.例如，没有关闭标记</a>的代码使用可能是一个潜在的问题.在大多数情况下，将在插入DOM片段期间解决问题，但有时您会收到真正的问题.因此，您应该非常仔细地测试插入的代码.

再说一遍:如果您想遵循不引人注目的JavaScript样式，则可以使用#"作为href属性的值，并在gridComplete或loadComplete事件处理程序内绑定相应的click事件.如果您在执行此操作时遇到问题，可以打开一个新问题，我将尝试为您编写相应的代码示例.

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

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>";

Is there a more "clever" way to create links (and other form elements) using 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.

You need only change this:

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

to this:

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

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

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.

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.

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).

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*.

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.

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.

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屋！