如何封装jQuery
How to encapsulate jQuery?
我特别想定义本地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.
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 如何使用jQuery自动打开页面上的所有链接
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用jQuery将列表中的元素集封装在DIV中
- 为什么我要在jQuery(function ($) { });中封装一个jQuery函数
- 将数组从MVC控制器封装到Jquery
- 将函数封装在jQuery.removeClass()中是否安全
- JavaScript/jQuery封装变量
- 使用jquery将每三行代码封装在html中
- 如何在指令AngularJS中封装jQuery(默认)handsontable
- jQuery封装在Javascript库中的含义是什么?
- 如何封装jQuery
- 使用'windows '; '和& # 39;未定义# 39;作为封装jQuery插件的匿名函数
- 将HTMLCollection封装到jQuery/Zepto函数中
- 将功能封装在jQuery插件或普通JavaScript函数中更好吗?
- 为什么在jQuery中调用函数需要封装在方法中
- 正在封装外部jQuery脚本
- 将tr和td封装在jQuery中ajax调用的数据中
- 对于jQuery,将函数封装在圆括号中有什么意义?
- 为什么jQuery在try / catch中封装XHR对象创建?