javascript - Kann ich selbst ein jQuery-Plugin entwickeln, um mehrere Funktionen in einem Plug-in zu erreichen?

Question

RT!
Schreiben Sie beispielsweise ein Plug-In mit Tab-Funktion, Karussellfunktion, Popup-Fensterfunktion usw.
Natürlich müssen diese Funktionen nicht leistungsstark sein, sondern nur, um diese Funktionen für eine einfache Verwendung zusammenzuführen. Nennen Sie es einfach
Meine Idee ist:
Verpacken Sie es mit var method = {...}, und ... im Inneren repräsentiert N kleine Funktionen.
Zum Beispiel:

var methods = {
    nTab: function(options) {
        return this.each(function() {
            var defaults = { ... }; // 每增加一个功能就要多写一遍这个
            settings = $.extend({}, defaults, options);
            // 执行代码
        }
    },
    slide: function(options) {
        return this.each(function() {
            var defaults = { ... };  // 每增加一个功能就要多写一遍这个
            settings = $.extend({}, defaults, options);
            // 执行代码
        }
    }
    // N个小功能代码 ...
}
$.fn.pluginName = function() {
    var method = arguments[0];

    if(methods[method]) {
        method = methods[method];
        arguments = Array.prototype.slice.call(arguments, 1);
    } else if( typeof(method) == 'object' || !method ) {
        method = methods.init;
    } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
        return this;
    }

    return method.apply(this, arguments);

}

Derzeit habe ich ein Plug-In nach dieser Methode geschrieben, das einige von mir häufig verwendete js-Spezialeffekte enthält, aber ich habe immer das Gefühl, dass es nicht gut ist, so zu schreiben, aber ich weiß nicht, welche Verbesserungen erforderlich sind Bitte geben Sie mir einige Ratschläge von älteren Menschen, die vorbeigekommen sind.

Ich frage mich, ob jemand die gleichen Bedürfnisse hat wie ich.

Answer 1

你这就是要自己写个库的节奏啊！你现在的想法类似 jQuery EasyUI，它的每个组件都对应一个 $.fn.<component>() 方法，这个方法第的一个参数是组件方法名，之后是这个方法的参数，比如

$("#id1").panel("show")

这就是调用的 panel 组件的 show 方法。

这种写法用惯也挺好，但是有个问题，就是很难在编辑器中实现语法提示。

另外一种方式是 MiniUI 的方式，它是通过一个特定的方法(mini.get())来根据 DOM 获取一个组件控制对象，然后跟使用普通对象一样来使用这个对象进行相关的组件操作。比如

var panel = mini.get("id1");
panel.show();

两种方式应该都能实现你的想法，区别就在于封装一个函数(方法)接口和封装一个对象接口的区别

Answer 2

感觉你想做的是一个库，包含了一些自己常用的功能。可以参考下这个项目的结构

Answer 3

怎么感觉你那个不是插件，更像ui组合