jQuery插件：使jQuery變量可以在所有插件函數中使用

我在jQuery插件中缺少一些基本的變量作用域。以下是jQuery插件存根（主要基於jQuery.com文檔）。jQuery插件：使jQuery變量可以在所有插件函數中使用

我想使變量（$test和test）可用於插件中的所有功能。

在下面的示例代碼中，變量測試按預期向控制檯寫入'hello'。

但是，變量$test將jQuery（）寫入控制檯。

問題：（a）爲什麼$test將jQuery（div＃test）寫入控制檯？（b）在所有函數中使用jQuery變量（或任何其他變量）的最佳做法是什麼？例如類似於.net類中的類級變量。

(function ($) { 

var settings = { 
}; 

var methods = { 
    init: function (options) { if (options) { $.extend(settings, options); } return init(this, settings); } 
}; 

$.fn.scopetest = function (method) { 
    // Method calling logic 
    if (methods[method]) { 
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || !method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery plugin'); 
    } 
}; 

var $test = $('#test'); 
var test = 'hello'; 

var init = function (object, settings) { 
    return object.each(function() { 

     console.log($test); 
     console.log(test); 
    }); 
} 

})(jQuery);

來源

2012-06-18 Aydus-Matthew

嘗試用選項：

(function ($) { 

var options = { 
     option1: "some_value", 
     option2: "another_value", 
     ... 
    } 
var settings = { 
    };

參考這樣從你的函數：

var self = this; 
alert(self.options.option1);

或者：

var self = this, 
    o = self.options; 
alert(o.option1);

在Jquery的widget factory plugin layout也可以看看，這是接近你的，但哪個我更喜歡。

(function($, window) { 

    $.widget("widge_name", $.widget, { 

     options: { 
     ... 
     }, 
     init: function(param_1, param_2) { 
     ... 
     }, 
     _create: function() { 
     ... 
     }, 
     some_function_A: function(param3, param4) { 
     ... 
     } 
     some_function_B: function(param3, param4) { 
     var self = this; 
     // run some_function_A 
     self.some_function_A("foo","bar"); 
     } 
    }); 
}) (jQuery,this);

這樣，您就可以調用其他函數使用自像上面一樣。

來源

2012-06-18 06:08:22 frequent

我在這裏看到完全相同的行爲。如果我定義這樣的選項： var options = {test1：'test'， test2：$（'＃test'） }; 我可以訪問options.test1和options.test2（不需要定義self），但test2上的console.log寫入jQuery（）。 –

hm。嘗試沒有返回object.each（function（）{}？只是控制檯。 – frequent

我仍然在這裏失去了一些基本的東西。再次看到這一點後，我看到選項（和所有函數）在小部件聲明。只有在所有函數中有一個變量的方法是重構插件？ –

爲什麼$ test不會將jQuery（div＃test）寫入控制檯？

因爲在DOM中沒有ID爲test的元素。所以，jQuery返回空集合jQuery()。
什麼是最好的做法，使跨所有功能的jQuery變量（或任何其他變量）？

我不確定最佳實踐，但如果我必須使變量可以在全局訪問，我會將該變量與window對象相關聯。像，

window.$test = $('#test');
window.test = 'Hello';

和訪問他們，window對象（例如：alert(window.$test);），或簡單地用變量名alert($test);

來源

2012-06-18 06:26:45

該元素確實存在如果console.log（$（'＃ test'））;語句被移動到init函數中，返回期望的輸出這裏的意圖不是在所有插件中聲明一個全局變量，而是爲插件創建一個私有變量（在插入）。 –

有趣的是，離開了var $測試語句，但移動init函數的賦值似乎有效。所以似乎有一個問題使用$，除非它在函數內。將使用此作爲解決方法，直到找到更好的解決方案。

(function ($) { 

var settings = { 
}; 

var methods = { 
    init: function (options) { if (options) { $.extend(settings, options); } return init(this, settings); } 
}; 

$.fn.scopetest = function (method) { 

    // Method calling logic 
    if (methods[method]) { 
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || !method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery plugin'); 
    } 
}; 

var $test; 
var test; 

var init = function (object, settings) { 

    return object.each(function() { 

     $test = $('#test'); 
     test = 'hello'; 
     testfunc(); 
    }); 
} 

var testfunc = function() { 
    console.log($test); 
    console.log(test); 
} 

})(jQuery);

來源

2012-06-18 14:38:01

jQuery插件：使jQuery變量可以在所有插件函數中使用

回答

相關問題