jQuery插件开发通用框架

jQuery插件开发框架代码:

/*
*插件编写说明:
*1、插件命名:jQuery.[插件名].js,如jQuery.plugin.js
*2、对象方法添加到jQuery.fn上,全局方法添加到jQuery对象本身上
*3、插件内部的this指向通过选择器获取的jQuery对象本身上
*4、可以使用this.each遍历所有元素
*5、所有的方法以分号结束;插件头部先添加一个分号
*6、插件应该返回一个jQuery对象,以保证插件的链式操作
*7、使用闭包形式,使用$作为jQuery的别名以避免冲突
*/
//为了兼容性良好,开始前有个分号
;
//传入jQuery是为了确保在匿名函数中正确的使用jQuery对象,防止多库共存时$冲突
//传入window、document并非必须,只不过为了更快的访问window和document
//获得没有未被修改的'undefined',因为实际并没有传递这个参数
(function($,win,doc,undefined){
 var alertPlugin=function(opts){
//保存this变量
var _self=this;
//定义默认参数
_self.opts={
   content:'弹出内容'
};
//根据传入的参数扩展默认参数
if(opts && $.isPlainObject(opts){
        $.extend(_self.opts,opts);
}
//调用函数方法
_self.show(_self.opts);
};
//函数方法实现
alertPlugin.prototype={
 show:function(opts){
    alert(opts.content);
}
}
//扩展插件
$.fn.extend({
        alertPlugin:function(opts){
             //遍历所有元素
return this.each(function(){
        new alertPlugin(opts);
 });
}
});
})(jQuery,window,document);//jQuery ,window,document作为实参

插件调用:

//未传递参数的调用
$('.a').alertPlugin();
//传递参数的调用
$('.a').alertPlugin({content:'新弹出内容’});

 

posted @ 2017-07-20 15:39  维尼熊320  阅读(103)  评论(0编辑  收藏  举报