Question

我需要将一个小画布应用程序整合到一个Sharepoint网站的大混乱中，在那里我无法控制任何东西，一切。该应用程序将进入“WebPart”包装器div。为了让我的JS保持整洁，我想我可以克隆一个jQuery版本，它总是使用我的包装器对象作为上下文，这样我就可以确定我永远不会选择和改变我的包装器之外的任何东西，如：

var ctxed$ = ctxjQuery('#wrapper-el'); //this is what I don't get

(function($){
   $('p').addClass('awesome'); //should only affect elements inside #wrapper-el
})(ctxed$)

无论如何，我尝试过的事情都没有成功。我尝试使用$.proxy，它没有按照我的预期工作（因为上下文在这里是另一回事......）。

这就是我现在被困住的地方：

function getContextifiedjQuery(ctx) {

    var fn = function () {

        return $.call(arguments[0], ctx);
    }

    $.each($, function (k, v) {
        fn[k] = v;
    });

    return fn;

}

var wrapper$ = getContextifiedjQuery('#wrapper');

wrapper$('p').css('color', 'red');
wrapper$.each([1, 2, 3], function () {
    alert(this)
});

作为一个简单的测试用例，但是当我尝试在我的项目中使用它时，我得到循环引用并且事情出错了。我在这里失踪的是什么？

Answer 1

您使用$("p")做的事情基本上是

ctxjQuery('#wrapper-el')('p')

如果你想解决问题，那就是

(function($){
   $.find('p').addClass('awesome'); //should only affect elements inside #wrapper-el
})(ctxed$)

如果你想编写包装器，它看起来像这样，但它只支持find（）。它会覆盖其他一切。

function ctxjQuery(context) {
    return function (selector) {
        return $(context).find(selector);
    }
}

var ctxed$ = ctxjQuery('#wrapper-el'); //this is what I don't get

(function ($) {
    $('p').addClass('awesome'); //should only affect elements inside #wrapper-el
})(ctxed$)

JSFiddle

再考虑一下，你可以这样做：

function ctxjQuery(context) {
    var fnc = function(selector){  return $(context).find(selector); };
    var $Fnc = $.extend( fnc, $);
    return $Fnc;    
}

var ctxed$ = ctxjQuery('#wrapper-el'); //this is what I don't get

(function ($) {
    console.log($.each);
    $('p').addClass('awesome'); //should only affect elements inside #wrapper-el
})(ctxed$)

JSFiddle

它会破坏很多东西！示例$("<p/>")不会创建元素，因为它使用find（）重载。基本上你需要重新创建jQuery核心函数来获得所有功能！

Answer 2

试试这个

var ctxed$ = function (selector)
{
    return $(selector, '#wrapper-el');
}
(function($){
   $('p').addClass('awesome'); //should only affect elements inside #wrapper-el
})(ctxed$);

我可以复制$以便在创建jQuery对象时始终使用上下文吗？

2 个答案: