0

JQuery プラグインで「サブ関数」を作成する方法を理解するのに問題があります。私が達成したいのは、次のようなものです

var tags = $('#tagContainer').ImageTags({ option1: "blah blah", option1: "blah blah", option1: "blah blah"});
tags.ShowTagAdd(someIdHere, someOtherId);

この理由は、ページの読み込み時に TagAdd ダイアログを強制的に表示する必要がある場合があるためです。オプションを使用してこれを行うことができますが、よりクリーンに保ちたいです:D これまでの私のコードは TypeScript で書かれていますしかし、それは通常のJQueryとして読めるはずです:D

基本的に、サブ関数が呼び出されたときにメソッドを実行するだけですがShowTag(categoryid: number, characterId: number)、どうすればよいですか?

    module ImageModule {
    export interface DefaultOptions {
        ImageId: number;
    }

    export class ImageTags {
        defaults: DefaultOptions = {
            ImageId: 0,
        };
        options: DefaultOptions;
        TagsContainer: JQuery;

        constructor(element: JQuery, options: DefaultOptions) {
            this.options = <DefaultOptions> $.extend({}, this.defaults, options);
            this.TagsContainer = element;
            var self = this;

        }


        ShowTag(categoryid: number, characterId: number) {
            console.log("test");
        }
    }

    $.fn["ImageTags"] = function (options) {
        return this.each(function () {
            if (!$.data(this, "plugin_ImageTags")) {
                $.data(this, "plugin_ImageTags", new ImageTags($(this), options));
            }
        });
    }
}
4

1 に答える 1

2

これをアーカイブする 1 つの方法は次のとおりです。

$.fn.ImageTags = function(...) {

    return {
        ShowTagAdd: function(...) {

        }
    };

};

はメソッドでオブジェクトを返すため、好きなように行うことができますが、これは jQuery の連鎖性の哲学を破ります。

次のようになります。

(function($, undefined){

    $.fn.ImageTags = function(options) {

        var pluginName = 'ImageTags';
        var plugin = $(this).data(pluginName);

        if(plugin) {

            return plugin;

        } else {

            var settings = $.extend({}, options);

            return this.each(function() {

                var widget = $(this);

                var ShowTagAdd = function(...) {};

                var api = {
                    ShowTagAdd: ShowTagAdd
                };

                widget.data(pluginName, api);

            });

        }

    }

})(jQuery);

したがって、メソッドを「プライベート」として定義し、API で好きなものを公開できます。

tags.ImageTags().ShowTagAdd(...);

また

tags.data('ImageTags').ShowTagAdd(...);

クロージャーを使用することの素晴らしい点は、いくつかのプライベート メソッドを使用できることです。

他にも方法はありますが、今は時間がありません！

于 2013-05-17T10:08:52.707 に答える