一个jQuery插件框架示例 by FungLeo

FungLeo

发布于 2022-11-28 00:51:13

33000

代码可运行

文章被收录于专栏：地方网络工作室的专栏地方网络工作室的专栏

运行总次数：0

代码可运行

当我们写了一段有价值的 jQuery 代码的时候，是很希望能够封装成一个 jQuery 插件的。但是如何做呢？其实我也不甚明了。只是很早的时候朋友帮忙写了一个 jQuery 插件框架，然后我就不断套用了。

今天拿出来与大家分享。

/*******************************************************************
 * @authors FengCms 
 * @web     http://www.fengcms.com
 * @email   web@fengcms.com
 * @date    2015年9月4日
 * @version Beta 1.0
 * @copy    Copyright © 2013-2018 Powered by DiFang Web Studio  
 *******************************************************************/
(function($) {
    // 下面 FengFocus 是插件的名字，可以任意命名
    $.fn.FengFocus = function(F) {
        F = $.extend({

            // 这里是参数设置，根据需要随便命名
            defaultIndex: 0,
            trigger: "click",
            showtime: 3000,
            showWay: "slow"
            // 这里就是参数结束，注意，最后一个参数后面不能有逗号，否则IE低版本会出错。

        }, F);

        // 仔细看这个 F 这个是必须一致的。
        // 将插件赋值设置为变量（没必要这么做，但是我习惯这样）

        var defaultIndex = F.defaultIndex,
            showWay = F.showWay,
            trigger = F.trigger,
            showtime = F.showtime;

        // 将作用DOM元素赋值为 Obj 然后下面所有的元素，都以Obj 为根进行查询，确保插件不会影响到其他地方。

        var Obj = $(this);

        /* 你的插件代码开始 */
        // 在这里，随便写啦
        /* 你的插件代码结束 */
    }
})(jQuery);

写 jQuery 插件，一定要注意的是，所有的查询必须以 Obj 也就是 $(this) 这个为根进行查询，而不能随便用什么ID来进行查询，否则非常容易产生兼容性的问题。

在 Html 中，是这样滴

$(function(){
    // 下面的ID，是插件作用于啥，而后面的 FengFocus 就是插件名字
    $("#FengFocus").FengFocus({
        // 下面就是设置参数
        defaultIndex    : 1,
        trigger         : "mouseover",
        showtime        : 3000,
        showWay         : "down"
        // 参数结束，最后一个参数后面不能有逗号
    });
});