javascript - Can I develop jQuery plug-ins myself to achieve multiple functions in one plug-in?

Question

RT!
For example, write a plug-in with tab function, carousel function, pop-up window function, etc.
Of course, it is not necessary that these functions are all powerful, just to integrate these functions. Just call it when it is convenient to use
My idea is:
Wrap it with var methods = {...}, and the... inside represents N small functions.
like:

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

}

Currently I have written a plug-in according to this method, which contains some js special effects that I often use, but I always feel that it is not good to write like this, but I don’t know what improvements need to be made. Please also ask the seniors who have passed by. Please give me some advice, thank you!

I don’t know if anyone has the same needs as me. How do you achieve it?

Answer 1

You have to write your own library now! Your current idea is similar to jQuery EasyUI. Each component of it corresponds to a $.fn.<component>() method. The first parameter of this method is the component method name, followed by the parameters of this method, such as

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

This is the show method of the panel component called.

This way of writing is also very easy to use, but there is a problem, that is, it is difficult to implement syntax prompts in the editor.

Another way is MiniUI, which uses a specific method (mini.get()) to obtain a component control object based on the DOM, and then use this object to perform related component operations just like a normal object. . For example

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

Both methods should be able to realize your idea. The difference lies in the difference between encapsulating a function (method) interface and encapsulating an object interface

Answer 2

It feels like what you want to do is a library that contains some commonly used functions. You can refer to the structure of this project

Answer 3

Why does it feel like yours is not a plug-in, but more like a UI combination