文档章节

手把手教你怎么写jQuery插件

 什么是程序员
发布于 2015/07/08 14:51
字数 795
阅读 508
收藏 32

[原创作品]手把手教你怎么写jQuery插件

  这次随笔,向大家介绍如何编写jQuery插件。啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长。点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水。哈,不废话,进入正题。

  jQuey是一个非常好用的javascript类库,提供了非常多的接口给程序员使用。但在某些具体方面,并没有完全提供解决方法,这就要求我们自己实现。jQuery官方也提供jQuery拓展的标准。编写jQuery插件时,应该注意一下几点原则:

  1. 避免全局依赖。
  2. 避免第三方破坏。
  3. 兼容jQuery操作符’$’和’jQuery’

这三个原则非常重要,否则,这个插件将会失去插件的意义。

  jquery插件命名,一般在前面加上jquery,这样别人就知道这是jQuery插件。如:jquery.modelselect.min.js,加了min表示压缩版,压缩版一般处理方式是去掉空格换行,也有些公司为了保护代码,直接重构变量和私有函数名,不过这样做在一般程序员是有效的,但在高手面前,并没什么卵用,有人一样能把它还原。

  OK, jQuery插件的标准代码格式如下,(需要使用闭包,对于javascript闭包,本博客已博文专门介绍):

1 (function ($) {2  //插件内部代码3 })(jQuery);

以上代码的第三行,可以是window.jQuery或者$,按照官方的解释,这三者是等价的。

在这写一个小demo, 就是插入一个个人信息。

 1    (function ($) { 2         $.fn.userInfo = function (options) { //定义插件方法名 3             var dft = { 4                 //定义一个对象,设置默认值 5                 name: 'Steven Zhu', //名 6                 email: 'zhuttymore@126.com', //链接 7                 size: '14px', //文字大小 8                 align: 'center '//文字位置,left || center || right 9             };10             var opt = $.extend(dft, options);//这个很关键,待会跟你说。11             var style = 'style="font-size:' + opt.size + ';text-align:' + opt.align + ';"'; //调用默认的样式12             var name = '<p' + ' ' + style + '>name:<a target="_blank" >' + opt.name + '</a></p>';13             var email = '<p' + ' ' + style + '>name:<a target="_blank">' + opt.email + '</a></p>';14             $(this).append(name);15             $(this).append(name);16         }17     })(window.jQuery);

好了,说说$.extend(), 这个方法,他的作用就是扩展,以上这段代码就是将options拓展到dft,最后赋给opt.这样写为了可读性。

所以这段代码还可以这样。

 

options = $.extend({//here is default values},options);

 

这样,看起来就精简多了。

调用:

  在引入插件之后,直接调用就行。

1 <script>2  $("#user-info").userInfo();3 <script">

这样会在dom的id="user-info"里输出插件的默认值,即显示结果是:Steven Zhu  zhuttymore@126.com

要改变里面的值,只需要加入你想要的参数就行。如下:

<script>
 $('#user-info').userInfo({
 name: 'Sun Zhu',
 email: '734271284@qq.com',
 size: '16px',
 align: 'right'
 });<script">

这样就改变默认值了。输出结果就是:Sun Zhu 734271284@qq.com,文字右对齐。

原创作品,转载请注明出处:http://zhutty.cnblogs.com

在此特别感谢我在上海的朋友:Oliver。这货是很牛的程序员,初次写jquery插件时,多亏他的引导。

本文转载自:http://www.cnblogs.com/zhutty/p/4630110.html

共有 人打赏支持
上一篇: jQuery使用方法
粉丝 5
博文 66
码字总数 4194
作品 0
南昌
程序员
私信 提问
加载中

评论(2)

横着走的螃蟹
横着走的螃蟹
mark
rom1c丶
rom1c丶
79
28 个很有用的 JQuery Sliders 插件

SlideDeck jQuery plugin SlideDeck Lite 是 SlideDeck Pro 的功能限制版本。很专业。 Automatic Image Slider w/ CSS & jQuery Quicksand Move Elements with Style Nivo – A new jQuery i......

小编辑
2011/09/02
3K
3
使用HTML5,CSS3和jQuery增强网站用户体验

日期:2011/11/16 来源:GBin1.com 记 得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验? 是不是立刻就想到了flash实现?这彷佛年代久远的事了。使用现在最流行的web技术 ...

gbin1
2011/11/16
4.1K
6
15 款基于 jQuery 的 RSS 阅读器插件

想要第一时间获得网站和博客的更新?RSS一直是最佳的选择。RSS提供的更新内容包括博客文章、新闻标题、标准格式的音频或视频等。 本文介绍了15款实用的基于jQuery的RSS阅读器插件,有了它们的...

oschina
2012/08/13
1K
0
手把手教你自己写一个模糊搜索的下拉框

我们先看一下效果图 下面我们就开始做这个有模糊搜索的下拉框; 首先我们需要jquery的支持;然后我们将这个模糊搜索扩展到jquery 中,方便以后使用 直接上代码: 这个文件命名为WYButil.js ...

中国首席砖家
2017/12/12
0
0
学习jQuery LigerUI框架

看人家在一个技术交流群里问到谁用过jQuery LigerUI这个框架?咦,我没用过,我才刚开始学习jQuery,没听说过!菜鸟的悲哀~去网上看看是什么东东!http://ligerui.googlecode.com去看看吧! ...

小人物_Amor
2013/02/22
0
9

没有更多内容

加载失败,请刷新页面

加载更多

条形码设计软件BarTender实用教程——透明度样本标签

BarTender是一款优秀的标签、条形码、卡片以及RFID标签设计和打印软件。所有版本的BarTender都具有独立的设计和打印功能,对于更高级的用户,自动化版和企业自动化版本提供了更强大的集成功能...

ymy_666666
19分钟前
0
0
Sql--order by、desc降序、top

Sql--order by、desc降序、top ---------通过order by 语句进行排序: --1.降序order by 列名desc --2.升序order by 列名 或order by 列名asc --3.order by语句必须一定要放在整个sql语句的最...

linjin200
20分钟前
1
0
websocket wss所需的nginx配置以及解决golang作为服务端的跨域问题

下面的配置是微信小程序所需的wss的配置,这里为了方便,,也为了避免使用端口号,和原项目的配置写在一起了,因此使用了固定后缀/wss,以作区分,配置的重点就是location /wss 段,其之后的部分是原...

漫步海边小路
21分钟前
2
0
数字转换汉语中人民币的大写

最终结果输出:你输入的金额为:【123】 大写金额: [壹佰贰拾叁] 下面是实现代码: /** 6 * 数字转换为汉语中人民币的大写<br> 7 * 8 * @author Arvin 9 * @contact 94...

政旭Arvin
31分钟前
1
0
智能合约漏洞 -- 默认可见性修饰符

Solidity函数有visibility指定符,标明函数如何被允许访问。Visibility决定一个函数是否能被用户,被其他派生合约,从外部调用,仅从内部调用等等。有4个visibility指定符.函数默认的visibil...

怎当她临去时秋波那一转
54分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部