0

私は前の質問をしました、そして私は私が十分に簡潔ではなかったと感じます。それで、これが私のコード例とグローバルへのアクセスです。これは悪い形式だと思いますが、プラグインの形式を考えると、これを行う別の方法を見つけることができません。

関数をメソッドvarに適用し、呼び出し中のプラグインを介してインスタンス化できると思いますが、これまでのところ、プラグインはそのように設定されておらず、より多くの作業が必要になる可能性があります。しかし、経験豊富なjQueryプラグインの作成者からの意見を聞きたいと思います。

使用法:データはフロントロードされます。動的コンテンツが作成されると。私はそれに関連するいくつかの関連情報を飲み込み、それをバンドルし、ajax呼び出しを送信し、次にビューを更新しました。事はです。私のプラグインは、ページ上で何度も呼び出される可能性があります。ただし、プラグインを呼び出す前にいくつかのデータオブジェクトを取得して、それらを操作して「何を更新する必要があるか」を判断できるようにする必要があります。それが私の問題です。プラグインの外部でデータを取得する必要があります。次に、それを渡す必要があります。これは「適切」と見なされますか。

私の望みは、プラグインのメソッドにデータを注ぎ込み、それを呼び出すと、いくつかの表示選択を行うためのデータが得られることでした。

if ( typeof Object.create !== 'function' ) {
Object.create = function( obj ) {
    function F() {};
    F.prototype = obj;
    return new F();
};
}
// this is the global that I push each reiteration of data into.
var perLineDataArray = [];
(function( $, window, document, undefined ) {
var Sustainability = {
    _init: function( options, elem ) {
        var self = this;
        self.elem = elem;
        self.$elem = $( elem );
        /* plugin call has all the data I need, I pass it in here */
        self.perLineData = groupedperLineData;
        self.url = 'path_to_url/sustainability';
        self.options = $.extend( {}, $.fn.querysustainability.options, options );
        self._extractUrlData();
        self._cleanup();

    },
            _extractUrlData: function(){
               // this is where I would go thru each of the data objects and 
               // determine WHAT in the view needs updating based on some critera.
            },
    _getsustain: function()
            {
              var self = this;
              $.ajax({
                       // my ajax call data
                            success: function(data){
                                this._buildUpdate(data);
                            }
                  });
            },
    _buildDispaly: function( results ) {
        var self = this;
        self.sustainability = $.map( results, function( obj, i) {
            return $( self.options.wrapDisplay ).append ( obj.text )[0];
        });
    },
            _cleanup: function(){
               // clean out global array for next funneling of grouped up data
               perLineDataArray = [];
            },
    _showMessage: function() {
        var self = this;
        self.$elem[ self.options.transition ]( 500, function() {
             $(this).html( self.sustainability )[ self.options.transition ]( 500 );
        });

    },
};
$.fn.querysustainability = function( options, method ) {
    return this.each(function() {
        var sustainability = Object.create( sustainability );
        sustainability._init( options, this );
        $.data( this, 'querysustainability', sustainability );
    });
};

$.fn.querysustainability.options = {
    display: '<span></span>',
    usedClass : 'uniqueclass',
    transition: 'fadeToggle'
};


 })( jQuery, window, document );

私はまだすべてのコードを作成していませんが、それが要点です。データをグローバルにプッシュする方法は次のとおりです。

 //Some reiteration of building of HTML dom element displays.
 perLineDataArray.push(some_per_iteration_obj);

次に、ディスプレイがビルドされ、必要なすべてのオブジェクトが揃ったら、プラグインを呼び出します。

    jQuery('#planets').querysustainability({
        groupedperLineData: perLineDataArray
     });

または、ここにグローバルを追加することもできます。

    $.fn.querysustainability.options = {
    display: '<span></span>',
    usedClass : 'uniqueclass',
    transition: 'fadeToggle',
    groupedperLineData: perLineDataArray
};

私の腸は、プラグインにすべてをカプセル化させたいと言っていますが、別の部分では、操作する必要があるものを渡して、プラグインにそれを取得させる必要があると感じています。

それで、プラグインのサブメソッドを呼び出し、データセットを保存し、プラグインを呼び出すと、そのデータの準備ができているか?

あなたの考え?そして、私がこれをどのように解決すべきだと思いますか、コード的には?

4

1 に答える 1

1

OK、コメントで述べたように、以下は私の最も基本的なjQueryプラグインレイアウトテンプレートです。それから、あなたはあなたが望むほとんどすべてのjQueryプラグインを設計することができ、そしてたくさんの多様性を持っています。それはかなり自明です。よく見てください。役に立ったら、すばらしいです。教えてくれない場合は、回答として削除します。

/*  Example Plug-in Setup   */
(function($) {
    if (!$.myExample) { // your plugin namespace
        $.extend({
            myExample: function(elm, command, args) {
                return elm.each(function(index){
                    // do work to each element as its passed through
                    // be sure to use something like
                    //      return elm.each(function(e) { dor work });
                    // as your final statement in order to maintain "chainability"
                });
            }
        });
        $.fn.extend({
            myExample: function(command) {
                return $.myExample($(this), command, Array.prototype.slice.call(arguments, 1));
            }
        });
        $.myExample.props = {
            key1: "value",
            key2: "value"
        };
        $.myExample.methods = {
            key1: function(param) {

            },
            key2: function(param) {

            }
        };
        $.myExample.init = function(param) {
            var key = "value",
                key2 = {
                    subKey: "value"
                };
                /*
                /  run any number of initializing functions here
                /  I prefer to make my param a value that can be a
                /   string with a possible object
                /    the string for holding a base configuration
                /    the object for any change in properties or base values for that config
                */
        };
        $.myExample.defaults = {
            key1: "value",
            key2: {
                prop1: {
                    subKey1: "value",
                    subKey2: "value"
                },
                prop2: {
                    subKey1: "value"
                }
            },
            key3: function(param) {

            }
        };
    }
})(jQuery);
于 2012-11-01T02:29:48.793 に答える