jquery插件需要明白的那些知识点

1.jquery中$是神马?$.fn又是神马?

稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知:

我们在jquery(1.8.3)源码中也能找到下面代码:

其实在jquery中$就是一个函数function,当我们执行$()时会得到一个jquery对象,得到的jquery对象的类型是object类型,而不是数组。除此之外$也是个对象,因为在$上面也可以定义方法和属性,比如常见的$.ajax。

$.fn就是$的原型,,在源码中我们也能找到jQuery.fn = jQuery.prototype

jquery对象中的上百种方法就是定义在原型中,为什么定义在原型中?这就是js面向对象的重要知识了,可参考我的这篇文章 对于jquery这么多方法的库来说,方法定义在原型上极大的节省了内存。这里只需知道$.fn就是$的原型就行。

插件的写法

插件说白了就是为jquery库添加特定的方法,插件的形式一般开头为$.fn.extend 在源码中我们也能看到很多这样的例子:

            

所以一个常见的插件的基本样式应该如下(注释写的很详细,就不再一一赘述):

/*
插件名:
作者:
日期:等信息
*/

//一个匿名自执行函数,划分一个独立的作用域,不至于插件中的变量干扰jquery
;(function($){  //开始写上; 为防止代码压缩出错
    //为jquery扩展方法,也就是插件的主体
    $.fn.extend({

        //方法名
        "method" : function(opts){
            //定义插件的默认参数
            var default = {
                width : //定义默认宽度
                height : //定义默认高度
                speed : //定义默认速度
                //等等各种默认参数
            }
            //有些参数用户直接使用默认,有些参数用户要使用自己定义的
            //自定义参数替换默认参数
            //var option = $.extend(default,opts); //为什么不用此行代码?为了保护默认参数
            //extend方法中opts会永久取代default,所以新加一个空对象{}来保存本次所使用的参数,下次使用default依然不变
            var option = $.extend({},default,opts);

            this.each(function(){ //用each处理选择器选中的一个或多个dom节点
                /*
                    此处是插件处理过程代码
                */
            });

            //最后别忘了保持jquery的链式操作(视情况而定)
            return this; //返回被选中的元素节点,以供后续操作。
        }

    });

})(jQuery)//传入jQuery是为更快查找,避免沿作用域链往上层查找,提高性能

常见的插件写法就是这样,据说90%以上的插件就是用$.fn.extend()方式实现的,因为jquery的特色就是先选择dom节点,然后链式处理这些节点。还有不常见的$.extend()插件编写方式,该方式编写的插件是在jquery命名空间内添加方法,也就是说在使用时不需要先选择dom节点,使用时直接$.method()即可。

插件的命名和代码压缩

命名默认采用jquery.method.js (method代指插件名),除此之外最好弄一个压缩版:jquery.method.min.js 至于代码的压缩,包括去空格,去换行,其实还有方法名的简写操作,比如方法名叫removeAttr,很长,那么可以直接改写为一个字母a,这也是短化代码的方法,除此之外还有if else 转换为三木运算等压缩方式。

时间: 2024-10-05 22:52:37

jquery插件需要明白的那些知识点的相关文章

jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu

推荐两款简单好用的图片放大jquery插件

一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可js里加入 调用插件的函数 $('这里写要放大的图片').zoomify();如果有ajax 新生成的图片,要在ajax里再次调用一遍该函数. 二.zoomooz.js 推荐这里下载 使用说明: 这个插件有很多种 放大功能,可进行优雅的缩放操作,特别适用相册网站.这个图片方法不是 单独图片跳脱出来的放

不定义JQuery插件 不要说会JQuery

二.普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的定义与调用: /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun1:

自己编写jQuery插件 之 表单验证

吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较多的,公司当前正在做的项目就要用到,故此写了此插件,先给大家看下在项目中应用的效果图吧: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件. 时间:2014-8-3 作者:similar([email protected]) */ (function ($) { $.fn.checkFor

教你开发jQuery插件(转)

原文:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q

写JQuery插件的基本知识

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

JQUERY插件学习之jQuery UI

jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序.所有插件测试能兼容 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome. 组件构成 jQuery UI 主要分为3个部分:交互.微件和效果

自己动手丰衣足食之征服jQuery插件编写

原文地址:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择.