[原创作品]手把手教你怎么写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闭包,本博客已博文专门介绍):
(function ($) {
//插件内部代码
})(jQuery);
以上代码的第三行,可以是window.jQuery或者$,按照官方的解释,这三者是等价的。
在这写一个小demo, 就是插入一个个人信息。
(function ($) {
$.fn.userInfo = function (options) { //定义插件方法名
var dft = {
//定义一个对象,设置默认值
name: 'Steven Zhu', //名
email: 'zhuttymore@126.com', //链接
size: '14px', //文字大小
align: 'center '//文字位置,left || center || right
};
var opt = $.extend(dft, options);//这个很关键,待会跟你说。
var style = 'style="font-size:' + opt.size + ';text-align:' + opt.align + ';"'; //调用默认的样式
var name = '<p' + ' ' + style + '>name:<a target="_blank" >' + opt.name + '</a></p>';
var email = '<p' + ' ' + style + '>name:<a target="_blank">' + opt.email + '</a></p>';
$(this).append(name);
$(this).append(name);
}
})(window.jQuery);
好了,说说$.extend(), 这个方法,他的作用就是扩展,以上这段代码就是将options拓展到dft,最后赋给opt.这样写为了可读性。
所以这段代码还可以这样。
options = $.extend({//here is default values},options);
这样,看起来就精简多了。
很感谢一楼的评论,提醒我考虑的性能和链式操作。我们再写插件时,把当前对象return回去,这样返回的又是jQuery对象,这样可以链式操作。结合上面一段,代码修改如下:
(function ($) {
$.fn.userInfo = function (options) { //定义插件方法名
options = $.extend({
//定义一个对象,设置默认值
name: 'Steven Zhu', //名
email: 'zhuttymore@126.com', //链接
size: '14px', //文字大小
align: 'center '//文字位置,left || center || right
},options); var style = 'style="font-size:' + opt.size + ';text-align:' + opt.align + ';"'; //调用默认的样式
var name = '<p' + ' ' + style + '>name:<a target="_blank" >' + opt.name + '</a></p>';
var email = '<p' + ' ' + style + '>name:<a target="_blank">' + opt.email + '</a></p>';
this.append(name);
this.append(name); return this;
}
})(window.jQuery);
调用:
在引入插件之后,直接调用就行。
<script>
$("#user-info").userInfo();
<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,文字右对齐。
2015/18补充:
上面的这样写会有一个弊端,就是不是很好拓展。因为一个插件,往往会有多个方法。一下是改进的结构。
/**
* Created by Steven on 2015/07/10/0010.
* @email zhuttymore@126.com
*/ (function ($) { $.fn.extend({
slider:function (opt) {
opt = $.extend({ }, opt);
//do something here return $.each(this,function(index,ele){});
}
}); })(jQuery);
原创作品,转载请注明出处:http://zhutty.cnblogs.com
在此特别感谢我在上海的朋友:Oliver。这货是很牛的程序员,当年初次写jquery插件时,多亏他的引导,另,感谢一楼。
[原创作品]手把手教你怎么写jQuery插件的更多相关文章
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- 写JQuery插件的基本知识
普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码 代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.exten ...
- 写jQuery插件时,一种更好的合并参数的方法
看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...
- 写JQuery 插件
什么?你还不会写JQuery 插件 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再 ...
- 教你写Jquery插件
最近很多网友说 jQuery插件是什么啊?怎么写的啊?我不会写啊? 一大堆的问题一时都不知道怎么回答他们,个人认为是网友们把问题复杂化了. 其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲 ...
- 用实例一步步教你写Jquery插件
最近Web应用程序中越来越多地用到 了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时 ...
- 自写Jquery插件 Menu
原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067543.html 可以结合我自写的Jquery插件Tab 一起使用哦 上一个整体效果 直接 ...
- 自写Jquery插件 Tab
原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067017.html 每每看到别人写的Jquery插件,自己也试着学习尝试,终有结果,废话不多 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
随机推荐
- WinXP 无线提示“区域中找不到无线网络”的一种可能原因!
貌似WinXP还是无限经典,我也一直还在用,不知道哪天才会放弃.这次遇见的问题,或许也有XP爱好者也遇得见,记下点文字备忘.----------------------- 单调的切割线 ------- ...
- 2013国内IT行业薪资对照表【技术岗】
(本文为转载,具体出处不详) 说薪水,是所有人最关心的问题.我只 想说如果想在薪水上面满意,在中国,没有哪里比垄断国企好.电力.烟草.通信才是应该努力的方向.但是像我们这种搞研发的进IT行业似乎是注定 ...
- sed删除空行和注释行
最近在看前辈们写的代码,他们把没有用的代码是注释掉而不是删掉.没用的代码和注释很乱,看着心烦,就把注释删掉来解读,顿时爽快多了. 不多说了,直接举例子 比如一个文本文件 data 里的内弄为 cat ...
- DDD(Domain Driver Designer) 领域驱动设计简介
领域驱动设计之领域模型 加一个导航,关于如何设计聚合的详细思考,见这篇文章. 2004年Eric Evans 发表Domain-Driven Design –Tackling Complexity i ...
- Android(性能)
■ 数据传输 对象和字节流之间的转换 为什么要转? 持久化(装逼说法,JVM非运行的场合),他进程(装逼说法,其他机器JVM,不同的JVM) Parcelable和Serializable 初衷: P ...
- SQL自连接(源于推荐算法中的反查表问题)
”基于用户的协同过滤算法“是推荐算法的一种,这类算法强调的是:把和你有相似爱好的其他的用户的物品推荐给你. 要实现该推荐算法,就需要计算和你有交集的用户,这就要用到物品到用户的反查表. 先举个例子说明 ...
- eclipse 插件 最新 eclipse4.x 插件
Properties Editor: 中文显示属性配置文件 help ——> install new SoftWare ——>add Name: xx Location: http: ...
- java对像序列化
package cn.stat.p2.demo; import java.io.FileInputStream; import java.io.FileNotFoundException; impor ...
- IOS添加自定义字体库
1.将需要的字体库xxx.ttf添加到工程中,注意一定要在copy bundle resources中存在,如果没有添加上去 2.在info.plist 文件中添加 fonts provided by ...
- Struts2 过滤器与拦截器
学习Struts2时,发现有过滤器和拦截器,他们貌似都是一样的功能,但是为什么会有2个不同的名称呢?肯定是有区别的,所以打算自己整理一下. 过滤器,是在java web中,你传入的request,re ...