一个jQuery插件框架示例 by FungLeo

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

今天拿出来与大家分享。

/******************************************************************* * @authors FengCms  * @web     http://www.fengcms.com * @email   [e-mail] * @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"        // 参数结束，最后一个参数后面不能有逗号    });});

好啦，这就是一个 jQuery 插件的框架啦！