SORU
12 Mayıs 2011, PERŞEMBE


jQuery eklenti şablonu - en iyi uygulama, Kongre, performans ve bellek etkisi

Birkaç jQuery eklentileri yazmaya başladım ve jQuery eklenti şablonu ile benim IDE kurulum için iyi olacağını düşündüm.

Bu site eklenti Kongre, tasarım, vb. ile ilgili bazı makaleler ve mesajları okuyorum ve denemek ve hepsini birleştirmek istedim.

Aşağıda benim şablon, I am seyir için kullanmak sık sık bu yüzden keskin olmasını sağlamak için genellikle uygun bir WordPress kullanmak için eklenti tasarım Kongre ve ister fikri olan çok sayıda iç yöntemleri (ya da hatta onun genel tasarım) darbe performansı ve yatkın bellek sorunları.

(function($)
{
    var PLUGIN_NAME = "myPlugin"; // TODO: Plugin name goes here.
    var DEFAULT_OPTIONS =
    {
        // TODO: Default options for plugin.
    };
    var pluginInstanceIdCount = 0;

    var I = function(/*HTMLElement*/ element)
    {
        return new Internal(element);
    };

    var Internal = function(/*HTMLElement*/ element)
    {
        this.$elem = $(element);
        this.elem = element;
        this.data = this.getData();

        // Shorthand accessors to data entries:
        this.id = this.data.id;
        this.options = this.data.options;
    };

    /**
     * Initialises the plugin.
     */
    Internal.prototype.init = function(/*Object*/ customOptions)
    {
        var data = this.getData();

        if (!data.initialised)
        {
            data.initialised = true;
            data.options = $.extend(DEFAULT_OPTIONS, customOptions);

            // TODO: Set default data plugin variables.
            // TODO: Call custom internal methods to intialise your plugin.
        }
    };

    /**
     * Returns the data for relevant for this plugin
     * while also setting the ID for this plugin instance
     * if this is a new instance.
     */
    Internal.prototype.getData = function()
    {
        if (!this.$elem.data(PLUGIN_NAME))
        {
            this.$elem.data(PLUGIN_NAME, {
                id : pluginInstanceIdCount  ,
                initialised : false
            });
        }

        return this.$elem.data(PLUGIN_NAME);
    };

    // TODO: Add additional internal methods here, e.g. Internal.prototype.<myPrivMethod> = function(){...}

    /**
     * Returns the event namespace for this widget.
     * The returned namespace is unique for this widget
     * since it could bind listeners to other elements
     * on the page or the window.
     */
    Internal.prototype.getEventNs = function(/*boolean*/ includeDot)
    {
        return (includeDot !== false ? "." : "")   PLUGIN_NAME   "_"   this.id;
    };

    /**
     * Removes all event listeners, data and
     * HTML elements automatically created.
     */
    Internal.prototype.destroy = function()
    {
        this.$elem.unbind(this.getEventNs());
        this.$elem.removeData(PLUGIN_NAME);

        // TODO: Unbind listeners attached to other elements of the page and window.
    };

    var publicMethods =
    {
        init : function(/*Object*/ customOptions)
        {
            return this.each(function()
            {
                I(this).init(customOptions);
            });
        },

        destroy : function()
        {
            return this.each(function()
            {
                I(this).destroy();
            });
        }

        // TODO: Add additional public methods here.
    };

    $.fn[PLUGIN_NAME] = function(/*String|Object*/ methodOrOptions)
    {
        if (!methodOrOptions || typeof methodOrOptions == "object")
        {
            return publicMethods.init.call(this, methodOrOptions);
        }
        else if (publicMethods[methodOrOptions])
        {
            var args = Array.prototype.slice.call(arguments, 1);

            return publicMethods[methodOrOptions].apply(this, args);
        }
        else
        {
            $.error("Method '"   methodOrOptions   "' doesn't exist for "   PLUGIN_NAME   " plugin");
        }
    };
})(jQuery);

Şimdiden teşekkürler.

CEVAP
9 HAZİRAN 2011, PERŞEMBE


Arka sırada bir eklenti jeneratörü inşa ettim okudum blog bir makaleye göre: http://jsfiddle.net/KeesCBakker/QkPBF/. Kullanım olabilir. Oldukça basit ve yalındır. Herhangi bir yorum çok hoş olurdu.

Kendi jeneratör çatal ve ihtiyaçlarınıza göre değiştirebilirsiniz.

Ps. Bu oluşturulan cesedini

(function($){

    //My description
    function MyPluginClassName(el, options) {

        //Defaults:
        this.defaults = {
            defaultStringSetting: 'Hello World',
            defaultIntSetting: 1
        };

        //Extending options:
        this.opts = $.extend({}, this.defaults, options);

        //Privates:
        this.$el = $(el);
    }

    // Separate functionality from object creation
    MyPluginClassName.prototype = {

        init: function() {
            var _this = this;
        },

        //My method description
        myMethod: function() {
            var _this = this;
        }
    };

    // The actual plugin
    $.fn.myPluginClassName = function(options) {
        if(this.length) {
            this.each(function() {
                var rev = new MyPluginClassName(this, options);
                rev.init();
                $(this).data('myPluginClassName', rev);
            });
        }
    };
})(jQuery);

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ASUS Campus Life

    ASUS Campus

    18 Mart 2013
  • Le Cargo !

    Le Cargo !

    24 HAZİRAN 2007
  • TeachMeComputer

    TeachMeCompu

    31 EKİM 2009