这次随笔,向大家介绍如何编写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);

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

  很感谢一楼的评论,提醒我考虑的性能和链式操作。我们再写插件时,把当前对象return回去,这样返回的又是jQuery对象,这样可以链式操作。结合上面一段,代码修改如下:

  1. (function ($) {
  2. $.fn.userInfo = function (options) { //定义插件方法名
  3. options = $.extend({
  4. //定义一个对象,设置默认值
  5. name: 'Steven Zhu', //名
  6. email: 'zhuttymore@126.com', //链接
  7. size: '14px', //文字大小
  8. align: 'center '//文字位置,left || center || right
  9. },options);
  10.  
  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. return this;
  18. }
  19. })(window.jQuery);

调用:

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

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

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

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

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

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

2015/18补充:

上面的这样写会有一个弊端,就是不是很好拓展。因为一个插件,往往会有多个方法。一下是改进的结构。

  1. /**
  2. * Created by Steven on 2015/07/10/0010.
  3. * @email zhuttymore@126.com
  4. */
  5.  
  6. (function ($) {
  7.  
  8. $.fn.extend({
  9. slider:function (opt) {
  10. opt = $.extend({
  11.  
  12. }, opt);
  13. //do something here
  14.  
  15. return $.each(this,function(index,ele){});
  16. }
  17. });
  18.  
  19. })(jQuery);

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

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

[原创作品]手把手教你怎么写jQuery插件的更多相关文章

  1. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  2. 写JQuery插件的基本知识

    普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码 代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.exten ...

  3. 写jQuery插件时,一种更好的合并参数的方法

    看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...

  4. 写JQuery 插件

    什么?你还不会写JQuery 插件 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再 ...

  5. 教你写Jquery插件

    最近很多网友说 jQuery插件是什么啊?怎么写的啊?我不会写啊? 一大堆的问题一时都不知道怎么回答他们,个人认为是网友们把问题复杂化了. 其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲 ...

  6. 用实例一步步教你写Jquery插件

    最近Web应用程序中越来越多地用到 了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时 ...

  7. 自写Jquery插件 Menu

    原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067543.html 可以结合我自写的Jquery插件Tab 一起使用哦 上一个整体效果 直接 ...

  8. 自写Jquery插件 Tab

    原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067017.html 每每看到别人写的Jquery插件,自己也试着学习尝试,终有结果,废话不多 ...

  9. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

随机推荐

  1. HDU 1015 Safecracker 解决问题的方法

    Problem Description === Op tech briefing, 2002/11/02 06:42 CST ===  "The item is locked in a Kl ...

  2. DefaultResouceLoader的设计

    它是什么 DefaultResourceLoader是Spring中的ResourceLoader的默认实现类,也是AbstractApplicationContext的父类,它也可以单独使用,用来从 ...

  3. django: db howto - 1

    以在 Django 中使用 MySQL 为例,首先要安装 MySQL 和 MySQL-python 组件,确保 python 能执行 import MySQLdb. MySQL 中创建数据库: [ro ...

  4. (转) 将VB.NET网站转换成C#的全过程

    在学习URL重写过程中碰到个是VB写的源码,看起来总是不爽的就GOOLE了下 感觉这个文章写的不错 原文地址 http://www.cnblogs.com/cngunner/archive/2006/ ...

  5. java下io文件切割合并功能

    package cn.stat.p1.file; import java.io.File; import java.io.FileInputStream; import java.io.FileNot ...

  6. OpenCV——改变图像大小

    , , int interpolation=INTER_LINEAR ) dsize与fx和fy必须不能同时为零,也就是说要么dsize不为零而fx与fy同时可以为0,要么dsize为0而fx与fy不 ...

  7. QT VS2008未处理的异常: 0xC0000005

    症状如图所示 出错代码段在第3行 QString dir = QFileDialog::getExistingDirectory(this,    tr("Save file path&qu ...

  8. js深入理解"闭包"

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  9. web标准(复习)--1

    XHTML CSS基础知识 一.xhtml css基础知识首先说一下我们这节课的知识点 1.文档类型 2.语言编码 3.html标签 4.css样式 5.css优先级 6.css盒模型组成 1)文档类 ...

  10. 如何使用sql语句使你的数据库减肥,下面以网狐6603数据库减肥脚本举例!

    原文转自:http://www.zccode.com/forum.php?mod=viewthread&tid=637&extra=page%3D1 网狐6603 专用数据库减肥特效脚 ...