javascript - 我可以向 jQuery 提供默认值 "context"吗？

Question

背景:

jQuery 选择器调用的第二个“上下文”参数(例如:jQuery(selector, context))可以提供给选择器引擎一个下降的起点。

如果您需要控制 IFRAME(在同一域中)中的内容，这通常很有用。您只需传递 iframe.contentWindow.document作为“上下文”参数。

如果在使用 jQuery 的 IFRAME 中加载了任何 JavaScript 代码，并且从外部窗口的范围调用，那么任何对 $ 的引用或 jQuery在该代码中实际上是 jQuery 的实例从外窗。

当 IFRAME(例如 Bootstrap.js)中的 JavaScript 代码执行类似于 $(document) 的操作时，问题就来了。 (或者其他一些没有“上下文”参数的选择器)。当从外部窗口调用该代码(在 iframe 内定义)时，document从外部窗口引用 HTMLDocument 元素 - 这通常不是所需的结果。

问题:

如果能够创建一个具有默认“上下文”参数的 jQuery 的词法范围副本/包装器，这将非常有用，由创建它的人提供。

例子:

// jQuery already exists out here
var iframe = document.createElement('IFRAME');
iframe.addEventListener('DOMContentLoaded', function(){

    // code in here can already refer to $ for 'outer' jQuery

    // code in here can refer to $local for 'inner' jQuery by virtue of...
    var $local = jQueryWithContext($, iframe.contentWindow.document);

    // code loaded with IFRAME will use $local by virtue of ...
    iframe.contentWindow.jQuery = iframe.contentWindow.$ = $local;

});
iframe.src = '/path/to/iframe/content.html';

问题是，是否可以写成类似jQueryWithContext 的东西？以上？

为什么？

有时您想要隔离第 3 方 HTML 组件，这些组件(虽然您从安全 Angular 信任它们)从 CSS/JavaScript 污染 Angular 来看行为不当。

Bootstrap.js 就是一个很好的例子。它调用$(document)公平一点，并进行其他类似的无上下文选择器调用。如果 jQuery 可以按照我描述的方式重新确定范围，那么可以很容易地隔离这个“不是最佳”的编写库。

此外，使用相同的 $.data(el, ...) 会非常有帮助从两个框架收集，如果没有一些上下文管理，这是非常棘手的。

Answer 1

其实很简单:

function jQueryWithContext( selector, context ) {
  // I added the possibility to overwrite the context here, but you could delete
  return $( selector, context || iframe.contentWindow.document );
}
jQueryWithContext( '#main' ).show();

但是要强制它成为插件，你可能需要像这样:

jQuery.noConflict(); // keep the real jQuery for now
$ = function( selector, context ){
  return new jQuery.fn.init( selector, context || iframe.contentWindow.document );
};
$.fn = $.prototype = jQuery.fn;
jQuery.extend( $, jQuery ); // copy static method
// Then override default jQuery
jQuery = $;

这有点工作，但它可能会破坏 $() 的某些用法(也许现在不会，但在未来的 jQuery 版本中，或者任何时候存在 context 参数打破了正常行为)。