申明:插件开发是实际项目就经常用到的,不过也是挺吃力的。笔者自己做项目时,看着我们老大写的jQuery一头桨糊,那叫个痛苦。后面果断买了本参考书以及浏览别人的博客,现在也算慢慢入门了。现在总结自己的一点理解,希望对大家有帮助。如果有错,希望大家一起交流,共同提高!

  一、jQuery插件可以分为3种类型

  1. 封装对象方法的插件
  2. 封装全局函数的插件
  3. 选择器插件  

  二、封装对象方法的插件的书写形式

    形式一:

(function($){
$.fn.extend({
pluginName:function(opt,callback){
//our plugin implementsation code goes here.
}
})
})(jQuery)

    形式二:

(function($){
$.fn.pluginName=function(){http://i.cnblogs.com/?postid=3957061&update=1
//our plugin implementsation code goes here.
};
})

    示例一:有jQuery名称空间下申明一个名字

$.fn.hilight=function(){
//our plugin implementation coode goes here
}
我们的插做的是通过这样可以调用
$('myDiv').hilight();

    示例 二:接受options参数以控制插件的行为

       让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件,如:

//plugin definition
$.fn.hilight=function(options){
var defaults={
frontGround:"red",
backGround: "yellow"
};
//extend our default options with those provided
var opts=$.extends(defaults,options);
//our plugin implementsation code goes here.
};
我们的插件可以这样被调用:
$("myDiv").hilight({
frontGround:"blue"
});

    示例 三:暴露插件的默认设置

      我们应当对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件接下来我们开始利用函数对象。

//plugin definition
$.fn.hilight=function(options){
//extend our default options with those provided
//Note that the first arg to extnd is an empty object-
//this is to keep from overriding our "defaults" object.
var opts=$.extend({},$.fn.hilight.defaults,options);
//our plugin implementsation code goes here.
};
// plugin defaluts - added as a property on our plugin function
$.fn.hilights.defaluts={
frontGround:"red",
backGround:"yellow"
};
现在使用者可以包含像这样的一行在他们的脚本里:
//这个只需要调用一次,且不一定要在ready块中调用
$.fn.hilight.defaults.frontGround="blue";
接下来我们可以像这样使用插件的方法,结果它设置蓝色为前景色;
$("#myDiv").hilight();

    如上,我们允许使用者写一行代码在修改的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值:

    //覆盖插件缺省的背景色

    $.fn.hilight.defaults.frontGround="blue";

    //使用一个新的缺省设置调用插件

    $('.hilightDiv').hilight();

  三、封装全局函数的插件

    全局函数的插件可以理解为就是给jQuery类添加类方法,并且是静态的方法。就像$.ajax()和$.trim(),将函数定义于jQuery的命名空间中。他有如下几种形式:

    形式一:添加单个全局函数

jQuery.myFoo=functin(){
alert("this is myFoo function")
};

    形式二:添加多个全局函数

jQuery.myFoo=functin(){
alert("this is myFoo function")
};
jQuery.myFoo1=functin(param){
alert("this is myFoo1 function with a param " + param)
};

    形式三:使用jQuery.extend(Object);

jQuery.myFoo1=functin(param){
alert("this is myFoo1 function with a param " + param)
};
jQuery.extend({
myFoo:function(){
alert("this is myFoo function")
},
myFoo1:function(param){
alert("this is myFoo1 function with a param " + param
}
});

    形式四:使用命名空间

      虽然在jQuery命名空间中,我们禁止使用了大量的javascript函数名和变量名,但是仍然不可避免某些函数或变量名将于其它的jQuery插件冲突,所以我们选择将一些方法封装到另一个命名空间下。

jQuery.myPlugin={
myFoo:function(){
alert("this is myFoo function")
}
myFoo1:function(param){
alert("this is myFoo1 function with a param " + param)
}
}
采用命名空间的函数仍然是全局函数,调用时采用的方法:
$.myPlugin.myFoo();
$.myPlagin.myFoo1("rah");

      

锋利的Jquery解惑系列(二)------插件开发大总结的更多相关文章

  1. 锋利的Jquery解惑系列(三)------ 各路选择器大聚会

    申明:初次学习Jquery的选择器时只记得几个和css选择器类似的几个,在这里列出书上写上的各路选择器方便以后的查询和现在的学习 所有例子都来自书上 测试画面: 一.基本选择器 #id, $(&quo ...

  2. 锋利的Jquery解惑系列(一)------基本概念大锅炖

    声明:虽然是基本概念但也是笔者经过一番学习才总结的这些文章,所以他不包括Jquery优缺点.特点.语法的介绍. 概念一:jQuery对像与DOM对象 DOM(Document Object Model ...

  3. [jQuery学习系列二 ]2-JQuery学习二-数组操作

    前言 上一篇内容 已经对于Jquery 有了一些认识, 包括Jquery的选择器和DOM对象, 那么这一篇继续来看下Jquery中很实用的Jquery对于数组的操作. Jquery中对数组的操作大致有 ...

  4. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

  5. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十】

    <Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  6. Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  7. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  8. jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery)

    jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <ht ...

  9. Jquery全选系列操作(锋利的jQuery)

    Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

随机推荐

  1. json.net json转换神器

    json.nethttps://json.codeplex.com/ api documenthttp://james.newtonking.com/json/help/index.html#

  2. csipsimple 下载地址

    项目下载地址: http://git.oschina.net/zencodex/CSipSimple https://github.com/zencodex/csip

  3. mac os的android开发国内库下载地址

    http://ubuntu.buct.edu.cn/android/repository/

  4. Docker - 配置国内加速器加速镜像下载。

    引言 由于网络原因,我们在pull Image 的时候,从Docker Hub上下载会很慢...所以,国内的Docker爱好者们就添加了一一些国内的镜像(mirror),方便大家使用. 配置阿里云加速 ...

  5. POJ 3621Sightseeing Cows

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9851   Accepted: 3375 Description Farme ...

  6. win8 64位系统,安装JDK的步骤及其环境配置

    工具/原料 jdk-8u51-windows-x64.exe 下载地址:::http://www.cr173.com/soft/55503.html#address jdk 安装步骤 1:到oracl ...

  7. ListView多选操作模式详解CHOICE_MODE_MULTIPLE与CHOICE_MODE_MULTIPLE_MODAL

    这篇文章我们将详细的介绍如何实现ListView的多选操作,文中将会纠正在使用ListViewCHOICE_MODE_MULTIPLE或者CHOICE_MODE_MULTIPLE_MODAL时容易犯的 ...

  8. excel多个文件合并

    多个excel文件合并成一个需要用ms office wps是不行的 1.将所有文件放在一个文件夹里 2.在文件夹里新建一个空的excel打开 右键sheet点击查看代码->输入下面代码-> ...

  9. linux ls -l 详解

    转自:http://blog.csdn.net/sjzs5590/article/details/8254527 (原文转自http://hi.baidu.com/yzzcheng/item/1a21 ...

  10. 【转】Spring 4.x实现Restful web service

    http://my.oschina.net/yuyidi/blog/352909 首先我们还是跟之前一样,创建一个maven项目,不过因为Spring Restful web service是基于Sp ...