javascript - 自己开发jQuery插件能不能实现一个插件里有多个功能

问题描述

问 题

RT!
比如，写一个插件，里面有选项卡功能，有轮播图功能，有弹窗功能等等
当然不需要这些功能都很强大，只是为了把这些功能集合起来，方便使用的时候调用就可以了
我的思路是：
用 var methods = {...} 包裹起来，里面的 ... 代表N各小功能。
如：

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

}

目前自己照这种方法写了一个插件，里面包含了一些自己经常会用到的js特效，但总觉得这样写不好，但不知道需要做哪些改进，还请走过路过的前辈指点一下啊，谢谢啦！

不知道有没有人也有和我一样的需求，大家都是怎么来实现的？

解决方案

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

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

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

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

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

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

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

这篇关于javascript - 自己开发jQuery插件能不能实现一个插件里有多个功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！