Jquery插件开发

      直到最近写一个小功能的时候灵机一动,才想起来尝试着写很早以前就想进行的插件开发。更郁闷的是,直到写插件的时候,才深刻的明白什么叫面向对象!(不知道都怎么想的,我在qq空间里发这句话的时候大家都评论,“脱单了?”“有对象了?”更有甚者,"我明白,程序员的对象就是代码",此言到是不虚。)

      参考了很多网上资料,然后对比,最后还是参照刘哇勇的博客(http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html)弄的第一个简单插件,这里记录一下完整的插件格式和相关注释,方便快速开发,分享就是快乐嘛。

---------------------------------------------------------------------- 2015-07-27 ---------------------------------------------------------------------------

  每过一段时间回头看自己写的东西,都觉得之前的有问题。。。现在补充一下。

  实际采用的是组合使用构造函数模式和原型模式。

//这里可以以注释的形式写上版本号,插件用途,版权,插件使用格式等等等等

//加上 ; 能防止前面代码没有 ; 结尾的后果,无惧压缩。如果用jsFormat格式化后;会在上面一行,jsHint会不通过,移下来就行了

;(function($,window,document,undefined){ //undefinde是真实的undefined,因为传入时并没有传//定义构造函数(对象)var Datalist=function(ele,opt){

     //构造函数的属性或方法,每个实例均拥有副本
this.$element=ele;this.defaults={ //定义默认属性'默认属性名':'对应属性值'};this.options=$.extend({}, this.defaults, opt); //在使用的时候会自动执行$.extend()函数,让用户自定的属性值覆盖default里面默认的属性值。前面加上{}空对象是为了防止多次调用时前面的属性值修改了默认属性值,详情见对象的深复制一章
}; //所有以字面量赋值形式的函数,不要忘了;
//在原型上定义方法,供所有的实例调用Datalist.prototype={ //注意,这是以对象字面量形式创建的新对象,constructor属性不再指向Datalist,详情见深复制与对象一文中的原型模式
showList:
function(){ var color=this.options.bgcolor; //值的传递形式(最好这里把需要的全部取出来,毕竟在不同环境下this的指代不一样)
       //这里是具体的实现过程书写区域
return this; //return是为了不破坏jquery链式调用的特点(注意return的对象是原对象),也可以以返回值的形式回调一个函数},
     showList2:function(){
       //...
     }};
//将方法添加到jquery对象的原型上$.fn.myDatalist=function(options){
//创建实例var datalist=new Datalist(this,options);
//以返回值调用的形式调用其方法return datalist.showList();};})(jQuery,window,document); //其实就是 (function(){}());的闭包形式,定义匿名函数并立即调用,里面的事件绑定什么的就像在全局定义一样的可以用(页面关闭的时候才销毁),但是全局空间里面是不可见不可取得的


 //在需要的地方调用插件
$(document).ready(function(){
   $(object).myDatalist({"属性名":"属性值"}); //没有设置的属性会用默认值
});

      具体的实例可以参见myBoxScroll。github:https://github.com/codetker/myBoxScroll。在线演示:http://www.梦萦无双.xyz/myBoxScroll/Default.html。

      接下来是我改写的常用插件(以前都是面向过程,用一次写一次。。。),希望能帮上和我一样的菜鸟咯。

转载于:https://www.cnblogs.com/codetker/p/4643734.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/358575.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言用整数 寻址,132-寻址运算符-C语言教程2020年 - 视频教程 - 北盟网校 - 专注原创教学第一站...

寻址运算符&输出其操作数的内存地址。前面使用了寻址运算符&,它广泛用在scanf()函数。&放在变量前面,scanf需要用到这个变量的地址。scanf内部可以利用这个地址 去修改对应的哪个变量的值。看看下面的例子#includeint main(void){/* 定义一些…

在Web浏览器中显示Spring应用程序启动的进度

重新启动企业应用程序时,客户打开Web浏览器时会看到什么? 他们什么也没看到,服务器还没有响应,因此Web浏览器显示ERR_CONNECTION_REFUSED 应用程序前面的Web代理(如果有)注意到它已关闭并显示“友好”错误…

教你玩转CSS padding(填充)

padding(填充) 当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的填充。 可能的值 填充- 单边内边距属性 在CSS中,它可以指定不同的侧面不同的填充: padding-top:25px; padding-bottom:25px…

代码审计之SQL注入:BlueCMSv1.6 sp1

这是一篇纪录关于BlueCMSv1.6 sp1两个SQL注入的审计过程,原文来自代码审计之SQL注入:BlueCMSv1.6 sp1 ,主要纪录一下个人在参考博文复现这两个漏洞经过。 href"https://www.ichunqiu.com/course/406" target"_blank">…

莫队算法 BOJ 2038 [2009国家集训队]小Z的袜子(hose)

题目传送门 1 /*2 莫队算法:求出[l, r]上取出两只相同袜子的个数。3 莫队算法是离线处理一类区间不修改查询类问题的算法。如果你知道了[L,R]的答案,可以在O(1)的时间下得到4 [L,R-1]和[L,R1]和[L-1,R]和[L1,R],4个while…

linux prelink.cache,Linux基础操作

1、Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示。1、1 cp复制命令单个文件复制:cp [OPTION]... SOURCE DEST如果DEST不存在,则事先创建文件,并复制源文件数据如果DEST是非目录文件,则覆盖目录文…

教你玩转CSS 分组选择器和嵌套选择器

目录 分组选择器 嵌套选择器 分组选择器 在样式表中有很多具有相同样式的元素。 h1 {color:green;}h2 {color:green;}p {color:green;} 为了尽量减少代码,你可以使用分组选择器。 每个选择器用逗号分隔。 在下面的例子中,我们对以上代码使用分组选择器: h1,h2,p {color…

记一次无意间发现某学校图书检索系统的变量覆盖漏洞

这是汇文OPAC很早就存在的一个严重漏洞 补充漏洞信息参考来源https://www.seebug.org/vuldb/ssvid-90722 1. 利用存在该漏洞参数的链接,访问存在漏洞文件,并覆盖 session 值 http://*******/opac/openlink_ebk.php?_SESSION[ADMIN_USER]opac_admin 2.…

多线程笔记5

第六章:Overlapped I/O,在你身后变戏法 1.overlapped I/O 是 Win32 的一项技术,你可以要求操作系统为你传送数据,并且在传送完毕时通知你。这项技术使你的程序在I/O 进行过程中仍然能够继续处理事务。事实上,操作系统内…

腾讯手游助手android版本,腾讯游戏助手下载-腾讯游戏助手 安卓版v3.3.4.22-PC6安卓网...

需要调用以下重要权限- 允许应用程序写入到外部存储器, 允许只读到电话状态访问,包括该装置的电话号码,当前蜂窝网络信息,任何正在进行的呼叫的状态,并且任何一个列表 PhoneAccount的注册在设备上, 允许应用程序从外部存储读取, 需…

java 并发 同步信号_Java并发教程–信号量

java 并发 同步信号这是我们将要进行的Java并发系列的第一部分。 具体来说,我们将深入研究Java 1.5及更高版本中内置的并发工具。 我们假设您对同步和易失性关键字有基本的了解。 第一篇文章将介绍信号量-特别是对信号量进行计数 。 信号量是用于限制对资源访问的经…

教你玩转CSS 尺寸 (Dimension)

目录 所有CSS 尺寸 (Dimension)属性 CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。 所有CSS 尺寸 (Dimension)属性

目录扫描工具dirsearch用法

目录扫描工具-dirsearch 1.下载dirsearch#git clone https://github.com/maurosoria/dirsearch2. 进入dirsearch目录,进行扫描 每一列的含义分别是:扫描时间,状态码,大小,扫描的目录,重定向的地址 参数列…

Truncated incorrect DOUBLE value

我有点傻…… sql update语法,修改的字段之间要用,连接,而不是and 否则就会报错Truncated incorrect DOUBLE value…… 如: update teacher set IMAGE_URL #{1} and UPDATE_TIMEnow() where TEACHER_MOBILE #{0} 错误 update teacher set …

教你玩转CSS Display(显示) 与 Visibility(可见性)

目录 隐藏元素 - display:none或visibility:hidden CSS Display - 块和内联元素 如何改变一个元素显示 隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为”none”,或把visibility属性设置为”hidden”。但是请注意,这两种方法会产…

html dd自动换行,为什么我的dd里面的内容没有自动换行呢

2-6图文混排*{margin: 0;padding: 0;}.clear{clear: both;}.content{width: 1000px;margin: 0 auto;}.word{font-family: "微软雅黑";font-weight: bolder;font-size: 20px;padding-top: 10px;padding-bottom: 10px;text-align: center;}.content .pic-word dl{width…

Java 9抢先体验:与JShell的动手实践– Java REPL

从今天开始如何开始使用Java 9最酷的功能之一? 上周末,我终于开始尝试使用Java 9的早期访问版本了。第一站是JShell,它也被称为Project Kulla。 首先让我鼓起勇气尝试早期访问Java版本的原因。 那就对了。 Java 9的正式发布日期当前设置为2…

CSRF的绕过与利用

Origin & Referer Bypass Null值绕过 当遇到一个cors可用null值绕过时&#xff0c;用iframe配合data协议&#xff0c;就可以发送一个origin为null的请求。这个绕过方式同样也可以用在CSRF这里。 1<iframe sandbox"allow-scripts allow-top-navigation allow-forms&…

ASP.NET中禁止继承IIS中web.config根目录的配置

异常信息&#xff1a; Configuration Error Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately. Parser…

教你玩转CSS Position(定位)

目录 CSS Position(定位) static 定位 fixed 定位 relative 定位 absolute 定位 sticky 定位 重叠的元素 所有的CSS定位属性