为什么在 JQuery/JavaScript 中使用扩展?
在下面的 JQuery UI 小部件中,作者使用扩展在 $.ui.autocomplete
中包含了另外两个函数,为什么?这是 JQuery 特定的模式还是我可以在普通 JS 中考虑的模式?
$.extend( $.ui.autocomplete, {
escapeRegex: function( value ) {
return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
},
filter: function(array, term) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
return $.grep( array, function(value) {
return matcher.test( value.label || value.value || value );
});
}
});
https://github.com/jquery /jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L385
In the following JQuery UI widget the author has used extend to include two more functions in $.ui.autocomplete
, why? Is this a JQuery specific pattern or is it something I could be considering in plain JS?
$.extend( $.ui.autocomplete, {
escapeRegex: function( value ) {
return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\amp;");
},
filter: function(array, term) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
return $.grep( array, function(value) {
return matcher.test( value.label || value.value || value );
});
}
});
https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L385
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
没有理由使用它,实际上它会比手动常规 JS 方式慢。 jQuery 开发人员经常遇到一个问题,他们只知道如何使用 jQuery,而不知道常规的 javascript。与您自己管理事物相比,jQuery 的扩展函数实际上是一个递归的相当慢的野兽。
*编辑*既然人们似乎不想接受这个答案,让我来说明为什么没有理由。
如果你在 github 上查看 jQuery 的代码: https://github.com /jquery/jquery/blob/master/src/core.js 你会在第 313 行找到 jQuery.extend 的定义。
首先,让我们看看使用非 jQuery 扩展方式需要什么。
两个定义,没有函数调用。非常简单快速的代码。
如果您使用扩展,这就是 jQuery 所做的事情。
在第 315 行,我们看到一个快速的小测试来组织一些参数。
接下来,我们还有另一个可能执行代码的小 IF 语句。
接下来是另一个 IF,其中包含函数调用。
接下来是另一个IF。
然后我们为每个参数输入一个 FOR 循环,在我们的例子中为两轮。
在每次传递时,首先都会检查空值,这在我们的情况下是不必要的,因为我们自己创建了这些函数。
现在我们有一个 FOR IN 循环,它本质上非常慢,因为必须查找对象映射内的每个项目,而不是仅仅迭代迭代器。
现在我们终于将函数之一复制到 jQuery 中!
进行另一次检查以确保我们不会进入无限循环......
对于我们的例子,这次我们只再做一次小小的 IF 检查。
并且循环重复直到事情完成。
因此,此方法比直接复制到 jQuery 对象本身远慢。对于使用 API 的人来说,一个常见的问题是,尽管函数的使用可能很简单,看起来又快又容易,但与自己做的事情相比,内部可能非常复杂和缓慢。
There is no reason to use it and in reality it will be slower than doing it the manual regular JS way. Often jQuery developers have a problem in that they only know how to use jQuery and not regular javascript. jQuery's extend function is a recursive actually quite slow beast compared to managing things yourself.
*edit * Since people do not want to seem to accept this answer, let me show why there is no reason.
If you look at jQuery's code on github here: https://github.com/jquery/jquery/blob/master/src/core.js you will find the definition of jQuery.extend on line 313.
First of all, let's look at what is necessary to do the non-jQuery extend way.
Two definitions, no function calls. Very simple and fast code.
This is what jQuery does if you use extend.
On line 315 we see a quick little test to organize arguments a bit.
Next we have another little IF statement with possible code execution.
Next is another IF with a function call inside of the if.
Next is another IF.
We then enter a FOR loop for each of the arguments, in our case two rounds.
On each pass first there is a check for null values, needless in our situation since we made the functions ourselves.
Now we have a FOR IN loop which by nature is very slow due to having to look up each of the items inside the object map instead of just iterating over an iterator.
Now we finally copy one of our functions in to jQuery!
Do another check to make sure we don't enter an infinite loop...
For our case this time we just do one more little IF check.
And the loop repeats until things are done.
Therefore this method is far slower than directly copying in to the jQuery object itself. A common problem for people that use API's is that even though the function usage might be simple and look fast and easy, the internals can be very complex and slow compared to doing things yourself.
在这种情况下,我看到的唯一好处是您不需要键入 $.ui.autocomplete 两次,每个函数声明一次。
In this case, the only benefit I see is that you don't need to type $.ui.autocomplete twice, once for each function declaration.