如何封装jQuery

How to encapsulate jQuery?

本文关键字:jQuery 封装 何封装      更新时间:2023-09-26

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

问题是jQuery直接操作窗口对象:

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

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

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

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

您可以将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);
var jQuery, $;
jQuery = $ = window.jQuery;
delete window.jQuery;
delete window.$;

您可以使用.noConflict:

删除它。
var localjQuery = jQuery.noConflict(true);

发现这篇文章,而试图找出如何注入一个完全独立的jQuery实例与自定义扩展方法到一个网页通过GreaseMonkey/Tampermonkey,并绕过Chrome沙盒。不用说,我需要的比提供的多一点,下面是我最终得到的。

下面是注入的代码体和其他一些方法,我相信会帮助其他人开始。我把它注入到每个网页上,这样我就可以通过开发控制台或其他tampermonkey脚本访问这个实例。我给了它别名"z"它是惰性加载的,这样就不会减慢没有使用它的页面的速度。

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

注意//BEGIN_INJECTION//和//END_INJECTION//标签以及条件include标签/…和…/。条件包含标记中的代码将只包含在注入到页面的实际代码中。这可以防止重复自动执行,即脚本在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 Dev Console将使用上述代码输出的内容。注意它在不同的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.