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 );

我还没有完成所有代码，但这就是 jist .. 所以这就是我将数据推送到全局的方式。

 //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

好的，正如评论中提到的，以下是我最基本的 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 回答