Функции пространства имен плагина jQuery

Question

Я создаю плагин jQuery, который довольно большой по объему. Фактически, плагин технически состоит из нескольких плагинов, которые все работают вместе.

(function($){
    $.fn.foo = function(){
        //plugin part A
    }
    $.fn.bar = function(){
        //plugin part B
    }
    $.fn.baz = function(){
        //plugin part C
    }
}(jQuery))

Возможно ли пространство имен плагинов jQuery так, чтобы второстепенные плагины могли быть функциями большего плагина

$.fn.foo.bar = function(){}
$.fn.foo.baz = funciton(){}

Это предотвратит загрязнение пространства имен функции jQuery. Затем вы можете назвать плагины как

$('#example').foo()
$('#other_example').foo.bar()

Проблема, с которой я столкнулся, когда сам пытался это сделать, заключается в том, что функции, объявленные как свойства функции плагина foo (), не имеют своих ссылок на this, установленных правильно. «this» в конечном итоге ссылается на родительский объект, а не на объект jQuery.

Любые идеи или мнения будут оценены.

Матф

Answer 1

Как только вы используете $.fn.foo.bar() - this, вы указываете на $.fn.foo, чего и следовало ожидать в JavaScript (this - это объект, для которого вызывается функция.)

Я заметил в плагинах из jQuery UI (например, сортируемых), где вы вызываете функции, такие как:

$(...).sortable("serialize");
$(...).sortable({options});

Если вы делаете что-то подобное - вы можете расширить сам jQuery:

$.foo_plugin = {
  bar: function() {},
  baz: function() {}
}

$.fn.foo = function(opts) {
  if (opts == 'bar') return $.foo_plugin.bar.call(this);
  if (opts == 'baz') return $.foo_plugin.baz.call(this);
}

Answer 2

Я знаю, что на этот вопрос уже дан ответ, но я создал плагин, который делает именно то, что вы хотите:

http://code.google.com/p/jquery-plugin-dev/source/browse/trunk/jquery.plugin.js

Я включил небольшой пример ниже, но посмотрите этот пост группы разработчиков jQuery для более подробного примера: http://groups.google.com/group/jquery-dev/browse_thread/thread/664cb89b43ccb92c/72cf730045d4333a?hl=en&q=structure+plugin+authoring#72cf730045d4333a

Позволяет создать объект с любым количеством методов:

var _myPlugin = function() {
    // return the plugin namespace
    return this;
}

_myPlugin.prototype.alertHtml = function() {
    // use this the same way you would with jQuery
    alert($(this).html());
}

$.fn.plugin.add('myPlugin', _myPlugin);

Теперь вы можете пойти:

$(someElement).myPlugin().alertHtml();

Есть, конечно, много, много других возможностей с этим, как объяснено в посте группы разработчиков.

Answer 3

Ну, я уверен, что есть много способов снять шкуру с этой кошкой. Библиотека пользовательского интерфейса jQuery использует такой шаблон:

// initialize a dialog window from an element:
$('#selector').dialog({});

// call the show method of a dialog:
$('#selector').dialog('show');

Answer 4

Я поклонник модели, которую я видел на SimpleModal Эрика Мартина . Это хорошо работает, когда я НЕ воздействую на элементы DOM - в данном случае это оболочка для использования localStorage.

Таким образом, я легко могу обратиться к конструктору:

$.totalStorage('robo', 'cop');

... или публичный метод:

$.totalStorage.getItem('robo'); //returns 'cop'

Вот внутренности:

;(function($){

/* Variables I'll need throghout */

var ls;
var supported = true;
if (typeof localStorage == 'undefined' || typeof JSON == 'undefined') {
    supported = false;
} else {
    ls = localStorage;
}

/* Make the methods public */

$.totalStorage = function(key, value, options){
    return $.totalStorage.impl.init(key, value);
}

$.totalStorage.setItem = function(key, value){
    return $.totalStorage.impl.setItem(key, value);
}

$.totalStorage.getItem = function(key){
    return $.totalStorage.impl.getItem(key);
}

/* Object to hold all methods: public and private */

$.totalStorage.impl = {

    init: function(key, value){
        if (typeof value != 'undefined') {
            return this.setItem(name, value);   
        } else {
            return this.getItem(name);
        }
    },

    setItem: function(key, value){
        if (!supported){
            $.cookie(key, value);
            return true;
        }
        ls.setItem(key, JSON.stringify(value));
        return true;
    },

    getItem: function(key){
        if (!supported){
            return this.parseResult($.cookie(key));
        }
        return this.parseResult(ls.getItem(key));
    },  

    parseResult: function(res){
        var ret;
        try {
            ret = JSON.parse(res);
            if (ret == 'true'){
                ret = true;
            }
            if (ret == 'false'){
                ret = false;
            }
            if (parseFloat(ret) == ret){
                ret = parseFloat(ret);
            }
        } catch(e){}
        return ret;
    }
}})(jQuery);