jquery插件开发通用框架
2018-06-27 09:08:00来源:未知 阅读 ()
2017-07-24 更新:增加单例模式。
jquery插件开发框架代码:
/* * 插件编写说明: * 1、插件命名:jquery.[插件名].js,如jquery.plugin.js * 2、对象方法添加到jQuery.fn上,全局方法添加到jQuery对象本身上 * 3、插件内部的this指向通过选择器获取的jQuery对象 * 4、可以使用this.each遍历所有的元素 * 5、所有的方法以分号结束;插件头部先添加一个分号 * 6、插件应该返回一个jQuery对象,以保证插件的链式操作 * 7、使用闭包形式,使用$作为jQuery的别名以避免冲突 * 8、单例模式 */ //为了兼容性良好,开始前有个分号 ; //传入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() { //单例模式 var instance; if(!instance) { instance = new alertPlugin(opts); } }); } }); })(jQuery, window, document); //jQuery,window,document作为实参
插件调用:
//未传递参数的调用
$('.a').alertPlugin();
//传递参数的调用
$('.a').alertPlugin({content: '新弹出内容'});
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash