[原创作品]手把手教你怎么写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 ...
随机推荐
- HDU 1015 Safecracker 解决问题的方法
Problem Description === Op tech briefing, 2002/11/02 06:42 CST === "The item is locked in a Kl ...
- DefaultResouceLoader的设计
它是什么 DefaultResourceLoader是Spring中的ResourceLoader的默认实现类,也是AbstractApplicationContext的父类,它也可以单独使用,用来从 ...
- django: db howto - 1
以在 Django 中使用 MySQL 为例,首先要安装 MySQL 和 MySQL-python 组件,确保 python 能执行 import MySQLdb. MySQL 中创建数据库: [ro ...
- (转) 将VB.NET网站转换成C#的全过程
在学习URL重写过程中碰到个是VB写的源码,看起来总是不爽的就GOOLE了下 感觉这个文章写的不错 原文地址 http://www.cnblogs.com/cngunner/archive/2006/ ...
- java下io文件切割合并功能
package cn.stat.p1.file; import java.io.File; import java.io.FileInputStream; import java.io.FileNot ...
- OpenCV——改变图像大小
, , int interpolation=INTER_LINEAR ) dsize与fx和fy必须不能同时为零,也就是说要么dsize不为零而fx与fy同时可以为0,要么dsize为0而fx与fy不 ...
- QT VS2008未处理的异常: 0xC0000005
症状如图所示 出错代码段在第3行 QString dir = QFileDialog::getExistingDirectory(this, tr("Save file path&qu ...
- js深入理解"闭包"
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- web标准(复习)--1
XHTML CSS基础知识 一.xhtml css基础知识首先说一下我们这节课的知识点 1.文档类型 2.语言编码 3.html标签 4.css样式 5.css优先级 6.css盒模型组成 1)文档类 ...
- 如何使用sql语句使你的数据库减肥,下面以网狐6603数据库减肥脚本举例!
原文转自:http://www.zccode.com/forum.php?mod=viewthread&tid=637&extra=page%3D1 网狐6603 专用数据库减肥特效脚 ...