【问题标题】:What's the best pattern to add simple public method in jquery plugin?在 jquery 插件中添加简单公共方法的最佳模式是什么?
【发布时间】:2013-05-06 14:13:29
【问题描述】:

我已经阅读了几篇关于最佳 jquery 插件模式的文章,包括官方文档 -

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

https://github.com/jquery-boilerplate/patterns/

http://docs.jquery.com/Plugins/Authoring

但仍然无法确定最适合我的需求,也许有人会建议。

我现在需要从内部函数创建一个公共方法。

目前我正在使用基本的插件结构:

(function ($) {

   $.fn.plugin = function (options) {
     var defaults = {
       someoption: true
     };

     options = $.extend(defaults, options);

     return this.each(function () {
       // all logic goes here...
       if (options.someoption) {
         mainMethod();
       }

       function mainMethod () {
         // main method bla bla..
         // also calls in certain circumstances this func:
         somePublicMethod();
       }

       function somePublicMethod () {
         // AND this method should be accessible like:
         // $('elem').plugin('somePublicMethod');
       }
     });
  };
})(jQuery);

这个somePublicMethod() func 应该可以像$('elem').plugin('somePublicMethod'); 一样访问

你有什么想法吗?

【问题讨论】:

  • 你需要插件的意图是你首先需要找出的。显然有很多插件可以用于各种操作
  • 我说的是模式:)
  • http://jqueryboilerplate.com/这个插件对于初学者来说是最好的,其中`docs.jquery.com/Plugins/Authoring`可以参考。
  • @dreamweiver 这很好,我已经看过了,但这不是关于添加方法和选项

标签: javascript jquery design-patterns plugins


【解决方案1】:

我将这种模式用于我的插件。它允许我拥有私有和公共方法,如果插件未初始化,还可以禁用调用方法

;(function($, window, undefined) {
    'use strict';        

    /**
     * My Plugin
     * v1.0
     */ 
    $.MyPlugin = function(options, element) {
        // this element
        this.$el = $(element);
        this._init(options); 
    };

    $.MyPlugin.defaults = {
        default1: 1,
        default2: 2
    };

    $.MyPlugin.prototype = {
        /**
        * Private methods
        */
        _init: function(options) {
            // options
            this.options = $.extend(true, {}, $.MyPlugin.defaults, options);
        }, 

        _privateMethod: function() {

        },                                                               

        /**
        * Public methods
        */
        publicMethod: function() {

        }
    }; 

    var logError = function(message) {
        if(window.console) {
            window.console.error(message);
        }                                   
    };

    $.fn.myPlugin = function(options) { 
        this.each(function() {
            var self = $.data(this, 'myPlugin');

            if(typeof options === 'string') {
                var args = Array.prototype.slice.call(arguments, 1);

                if(!self) {
                    logError('cannot call methods on myPlugin prior to initialization; ' +
                    'attempted to call method ' + options);
                    return;               
                }

                if(!$.isFunction(self[options]) || options.charAt(0) === '_') {
                    logError('no such method ' + options + ' for myPlugin self');
                    return;                                                     
                }

                self[options].apply(self, args);

            } else {     
                if(self) {      
                    self._init();  
                } else {             
                    self = $.data(this, 'myPlugin', new $.MyPlugin(options, this));
                }
            } 
        });

        return this;
    }; 
})(jQuery, window);   

【讨论】:

  • 你也可以在“_privateMethod”中使用“publicMethod”吗?
  • 您可以使用插件中的所有方法。插件用户不能使用私有方法。这些方法实际上不是私有的。您不能在 javascript 中将私有方法设为最佳实践。插件用户无法拨打$('#test').myPlugin('_privateMethod')
  • 是的,我知道这一点.. 这就是为什么我想创建类似methods = {} 的对象,其中将只存储公共可访问的方法
  • 我不得不将 var args = Array.prototype.slice.call(arguments, 1); 移到 this.each 上方。我认为这是因为下划线或其他内容覆盖了each 并导致arguments 被重置。
猜你喜欢
  • 2013-02-26
  • 1970-01-01
  • 1970-01-01
  • 2011-07-10
  • 1970-01-01
  • 2018-08-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多