如何封装jQuery?

时间:2011-10-29 07:11:48

标签: javascript jquery

特别是我想定义本地jQuery(var jQuery)其中
应该存储jQuery(以及本地$)。

问题是jQuery直接使用window对象运行:

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
})(window);

这是来自jQuery 1.6.4的引用 我该如何解决这个问题?

P.S。:我的特殊问题是为第三方网站使用写一些片段 如果我包含jQuery,可能会出现一些不兼容的问题 那个第三方js代码。目前我正在做以下事情:

// here some license notes about jQuery included
(function() {
    if (typeof jQuery === "undefined") {
        // jQuery code as it is goes here
    }
    // my code
})(); 

4 个答案:

答案 0 :(得分:6)

您可以将true传递给$.noconflict(),让jQuery从全局范围中删除所有变量:

(function($) {
    var jQuery = $.noconflict(true);
    // From there on, window.jQuery and window.$ are undefined.
    var $ = jQuery;
    // Do something with the local jQuery and $...
})(jQuery);

答案 1 :(得分:2)

var jQuery, $;
jQuery = $ = window.jQuery;
delete window.jQuery;
delete window.$;

答案 2 :(得分:2)

您可以使用.noConflict删除它:

var localjQuery = jQuery.noConflict(true);

但是在那次电话会议之前它将在全球范围内......

答案 3 :(得分:1)

在试图找出如何通过GreaseMonkey / Tampermonkey将自定义扩展方法完全独立的jQuery实例注入网页时,发现这篇文章,并绕过Chrome沙箱。毋庸置疑,我需要的不仅仅是提供的,下面是我最终的结果。

下面是注入的代码体和其他一些我肯定会帮助其他人开始的方法。我将其注入每个网页,以便我可以通过开发控制台或其他tampermonkey脚本访问此实例。我给了别名" z"。它懒洋洋地加载,因此它不会减慢使用它的页面的速度。

要加载,需要调用z(),z.ProcessWaitList(),或者在加载z脚本之前向ZWaitList添加函数。

注意// BEGIN_INJECTION //和// END_INJECTION //标签以及条件包含标签/ ...和... /。条件包含标记内的代码将仅包含在注入页面的实际代码中。这可以防止重复的自动执行,其中脚本在GreaseMonkey中运行一次,然后再次注入。

(function ZInjectionContainer() {
    if(!document.querySelector('script[id="ZInjectionContainer"]')){
        //BEGIN_INJECTION//
        /*... z = (function (_jQuery, _$) { ...*/    

        function SubstrBetween(s, start,end){ return s.substring(s.indexOf(start) + start.length, s.lastIndexOf(end));}

        function AppendScript(id, src, callback){
            var js = document.querySelector('script[id="'+ id +'"]');
            if(!js){ 
                js = document.createElement('script'); js.id = id; js.type = 'text/javascript';
                document.getElementsByTagName('body')[0].appendChild(js); 
            } 
            if(callback)  js.onload = callback;     
            if(src && String(src).endsWith('.js')) js.src = src; 
            else if(src)js.text += "\n" + String(src); 
            return js;
        }  

        function ProcessWaitList(){
            function process(){ console.log('  Processing WaitList.');  while(ZWaitList.length > 0){   ZWaitList.shift().call(); } }
            if(typeof ZWaitList == 'undefined') ZWaitList = [];            
            if(Array.isArray(ZWaitList) && ZWaitList.length > 0){      
                if(!IsInitialized()) {
                    console.log('ZWaitList sizeof ' + ZWaitList.length + ' detected.  Auto Initializing');  
                    ZInitialize(process);                        
                }
                else{ process(); } 
            }      
        }

        function ZInitialize(callback) {  
            var _version = 'jquery-2.2.0.min';
            AppendScript(_version, 'https://code.jquery.com/'+ _version +'.js',function(){
                z = jQuery.noConflict(true);  
                jQuery = _jQuery; $ = _$;  
                z.extend(createLocalInstance());               
                console.log(' Loaded jQuery-' + z().jquery + ' as z. Page Version is jQuery-' + (_jQuery ? _jQuery().jquery : 'undefined'));                                                         
                z(document).ready(function(){ 
                    console.log('    document loaded'); 
                    if(callback) z(callback); 
                    if(callback != ProcessWaitList){ ProcessWaitList();}
                });
            });                 
        }; 

        function IsInitialized(){
            return (typeof z !== 'undefined' && typeof z=== 'function' && !String(z).startsWith(ZInitialize.toString()));
        }

        function createLocalInstance(){
            var local = ZInitialize;
            local.IsInitialized = IsInitialized;
            local.SubstrBetween = SubstrBetween;
            local.AppendScript = AppendScript;
            local.ProcessWaitList = ProcessWaitList;
            return local;
        }

    /*... 
        if(typeof z == 'undefined')  {z = createLocalInstance();}  
        else if (typeof z !== 'function' || !String(z).startsWith(ZInitialize.toString())) {
            console.log('Error.  z is already defined as: '  + z +'\n Overwriting anyway');
            z = createLocalInstance();
        }

        ProcessWaitList();
        return z;   
    })(typeof jQuery !== 'undefined' ?  jQuery : null, typeof $ !== 'undefined' ?  $ : null); 
     ...*/  
    //END_INJECTION//   

        var inject = SubstrBetween(ZInjectionContainer.toString(),"//BEGIN_INJECTION//", "/"+"/END_INJECTION//");
        inject = inject.split('/*...').join('').split('...*/').join('');
        AppendScript("ZInjectionContainer", inject);
    }
})();   

使用该功能的其他脚本如下所示:

function RemoveStupidStuff(){    
    //Example code
    z('td.logo1').parents('table').remove();
    z('#bodyarea').prev().remove();
    z('#bodyarea').css('padding','0')
    z('#bodyarea #mcol').prev().remove();
}

function FixIndexPage(){
     //Example code - Remove show image on hover and instead just make it the thumbnail
    console.log('making the index page less crappy');
    z('#bodyarea #mcol table[width="75%"] tr td table.lista').attr('id','thegoods').css('width','100%');;
    z('#thegoods tr:not(:first-child)').addClass('listing');

    var listings = z('.listing')
    for(var i=0; i < listings.length; i++){       
        var row = listings[i];
        var thumb = z(row.children[0]).find('a')[0];
        var hoverimg = z(row.children[1]).find('a')[0];
        var link = z.SubstrBetween(hoverimg.onmouseover.toString(), "<img src=", " width=");
        thumb.href = hoverimg.href;               
        z(thumb).find('img').attr('src', link).attr('width','350px'); 
    }    
}

var operations = [RemoveStupidStuff];
if(location.search.indexOf('page=index')>=0){
    operations.push(FixIndexPage);
}

console.log('pushin site fixes to waitlist');
if(typeof ZWaitList === 'undefined') 
    ZWaitList = operations;
else {
    ZWaitList = ZWaitList.concat(operations);
    z.ProcessWaitList();
}

以下是Chrome开发者控制台将使用上述代码输出的内容。请注意它在不同的VM和所有内容中运行。

VM300:59 pushin site fixes to waitlist
VM298:24 ZWaitList sizeof 2 detected.  Auto Initializing
VM298:35  Loaded jQuery-2.2.0 as z. Page Version is jQuery-1.6.4
VM298:37     document loaded
VM298:20   Processing WaitList.
VM300:30 making the index page less crappy
VM298:20   Processing WaitList.