1.概述

jquery插件开发的主要方法有三种：

1、通过$.extend()来扩展jQuery，即在jQuery命名空间下扩展属性，直接在$对象下调用，不需要再dom下调用，也无法在dom元素下调用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="text">测试</div>

</body>

<script src="jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    //jQuey插件开发方法1，在jQuery命名空间下新增属性

    $.extend({

        sayHello: function(name){

            alert(name);

        }

    });

    $.sayHello('gaoxiong');

    //下面两者都相等，说明 $.fn = $.prototype

    console.log($.fn);

    console.log($.prototype);

    //下面说明了通过 $.extend来扩展jQuery的方法，并不是扩展jquery的原型对象

    console.log($.fn.sayHello);//undefined

    $('#test').sayHello('gaoxiong'); //报错

</script>

</html>

用途：该方法适合用来定义一些辅助方法，类似与$.ajax()等非操作dom元素的方法，为什么时辅助方法？因为现在jquery被利用的主要目的就是操作dom。但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。

2、$.fn.extend方法扩展 $.prototype

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1 id="h1">测试</h1>

    <h1>测试</h1>

    <h1>测试</h1>

    <h1>测试</h1>

    <h1>测试</h1>

</body>

<script src="lib/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    //jQuery插件方法二：$.fn.extend()，顾名思义，该方法是在jQuery的原型对象上新增一个方法

    $.fn.extend({

        returnThis: function(){

            return this;

        }

    });

    //可以得出，上面的this 是一个集合（类似于数组），集合中包含了所有匹配的元素（这些元素为原生JS dom元素）

    console.log($('#h1').returnThis());

    console.log($('h1').returnThis());

    //将会打印一个原生dom

    console.log($('h1').returnThis()[0])

    //综述：在自定义插件内部中的 this 可以理解为 匹配的元素的集合（jQuery的包装对象），这个集合的原型指向$.fn

    //自定义一个设置字体颜色插件

    $.fn.extend({

        setcolor: function(colorName){

            this.css('color', colorName);

        }

    });

    //所有h1标签变为红色

    $('h1').setcolor('red');

</script>

</html>

3、关于插件内this的指向

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul>

        <li>

            <a href="http://www.webo.com/liuwayong">我的微博</a>

        </li>

        <li>

            <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>

        </li>

        <li>

            <a href="http://wayouliu.duapp.com/">我的小站</a>

        </li>

    </ul>

</body>

<script src="lib/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    //上一节，我们已经知道this 指代jQuery选择器返回的集合（包装对象）

    //$.each()方法可以处理合集中的每个元素，但在each方法内部，this指的是普通的DOM元素，如果调用jQuery的方法那就需要用$来重新包装一下

    //案例，我希望在每个a标签后面显示url地址

    $.fn.extend({

        showUrl: function(){

            this.each(function(){

                console.log(this);//原生dom元素

                $(this).append($(this).attr('href'));

            })

        }

    });

    $('a').showUrl();

    //使用jQuery命名空间时, this的指向为一个函数（包装dom为jQuery包装对象）

    $.extend({

        consoleThis: function(){

            console.log(this);

        }

    })

    $.consoleThis();

</script>

</html>

4、支持链式调用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1>测试</h1>

    <h1>测试</h1>

    <h1>测试</h1>

    <h2>测试</h2>

    <h2>测试</h2>

    <h2>测试</h2>

</body>

<script src="lib/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    //jQuery中一个非常简便的方法是支持链式调用

    $.fn.extend({

        setColor: function(colorName){

            //如下的这种写法为便捷写法

            return this.each(function(){

                $(this).css('color', colorName)

            })

        }

    });

    $('h1').setColor('red').css('background', 'blue');

    //未设置链式调用（未在插件中返回this）

    $.fn.extend({

        setFontSize: function(size){

            this.css('font-size', size);

        }

    })

    //因为未在插件中返回this，那么$('h2').setFontSize('50px')为一个undefined，如下会报错

    $('h2').setFontSize('50px').css('background', 'yellow');

</script>

</html>

5、设置默认参数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1>测试</h1>

    <h1>测试</h1>

    <h2>测试</h2>

    <h2>测试</h2>

</body>

<script src='lib/jquery-1.8.3.min.js'></script>

<script type="text/javascript">

    //设置默认参数，先学会$.extend(obj1, obj2)

    var DEFAULTS = {

        age: 25,

        name: 'gaoxiong'

    };

    var options = {

        age: 24,

        name: 'jiaojiao'

    };

    var settings = $.extend(DEFAULTS, options);

    console.log(settings);//age=>24, name=>jiaojiao

    console.log(options);//不变

    console.log(DEFAULTS);//与setting一样

    $.fn.extend({

        setColor: function(options){

            var defaults = {

                fontSize: '50px',

                color: 'blue'

            };

            var settings = $.extend(defaults, options);

            return this.css(settings);

        }

    });

    $('h1').setColor();

    $('h2').setColor({

        color: 'red',

        fontSize: '12px'

    })

</script>

</html>

6、保护默认参数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1>测试</h1>

    <h1>测试</h1>

    <h2>测试</h2>

    <h2>测试</h2>

</body>

<script src='lib/jquery-1.8.3.min.js'></script>

<script type="text/javascript">

    //保护好默认参数，在一个插件中，默认参数可能被使用多次，上述方法会修改默认配置参数

    //$.extend({}, defaults, options)避免了默认配置的修改

    var defaults = {

        age: 25,

        name: 'gaoxiong'

    };

    var options = {

        age: 25,

        name: 'jiaojiao'

    };

    var setiings = $.extend({}, defaults, options);

    console.log(setiings); // name => jiaojiao

    console.log(defaults); // name => gaoxiong ，并没有修改defaults

</script>

</html>

7、面向对象的插件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <p>测试</p>

    <p>测试</p>

    <p>测试</p>

    <div>测试</div>

    <div>测试</div>

    <div>测试</div>

</body>

<script src="lib/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    //面向对象的插件开发，当项目变大或者版本迭代时，方便维护，结构清晰化

    //定义一个类

    var Beautifier = function(element, options){

        this.$element = element;

        this.defualts = {

            color: 'red',

            fontSize: '20px',

            textDecoration: 'none'

        };

        this.options = $.extend({}, this.defualts, options);

    };

    //添加原型方法

    Beautifier.prototype = {

        beautify: function(){

            return this.$element.css({

                color: this.options.color,

                fontSize: this.options.fontSize,

                textDecoration: this.options.textDecoration

            })

        }

    };

    //将方法挂载到$.fn

    $.fn.extend({

        beautify: function(options){

            return this.each(function(){

                new Beautifier($(this), options).beautify();

            })

        }

    })

    //使用

    $('p').beautify().css('background', 'blue');

    $('div').beautify({

        color: 'green',

        fontSize: '100px',

        textDecoration: 'decoration'

    })

</script>

</html>

8、命名空间变量污染

不仅仅是jQuery插件的开发，我们在写任何JS代码时都应该注意的一点是不要污染全局命名空间，常用的方法是 用自调用匿名函数包裹你的代码。

匿名函数避免命名空间污染的原理：JavaScript中无法用花括号方便地创建作用域，但函数却可以形成一个作用域，域内的代码是无法被外界访问的。如果我们将自己的代码放入一个函数中，那么就不会污染全局命名空间，同时不会和别的代码冲突。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <p>测试</p>

    <p>测试</p>

    <p>测试</p>

    <div>测试</div>

    <div>测试</div>

    <div>测试</div>

</body>

<script src="lib/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    (function(){

        var Beautifier = function(element, options){

            this.$element = element;

            this.defualts = {

                color: 'red',

                fontSize: '20px',

                textDecoration: 'none'

            };

            this.options = $.extend({}, this.defualts, options);

        };

        Beautifier.prototype = {

            beautify: function(){

                return this.$element.css({

                    color: this.options.color,

                    fontSize: this.options.fontSize,

                    textDecoration: this.options.textDecoration

                })

            }

        };

        $.fn.extend({

            beautify: function(options){

                return this.each(function(){

                    new Beautifier($(this), options).beautify();

                })

            }

        })

    })();

    $('p').beautify().css('background', 'blue');

    $('div').beautify({

        color: 'green',

        fontSize: '100px',

        textDecoration: 'decoration'

    })

</script>

</html>

9、将系统变量以参数形式传递到插件内部

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

<script src="lib/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    //经过我前面8小节的复习，开发插件好像已经完美了，实际上还有一些细节需要处理

    //1. 将这段代码放到页面后，前面别人写的代码没有用分号结尾

    //2. 前面的代码将window, undefined等这些系统变量或者关键字修改掉了

    //第一种情况

    //别人的代码，这里没有使用分号结尾

    var foo = function(){

    }

    //我写的代码

    ;(function(){

          alert('Hello!');

    })();

    //原因：充当自调用匿名函数的第一对括号，与上面别人定义的函数相连，导致组成希望的两个语句 组成了一个语句，出现语法错误

    //解决方法：在匿名函数包裹的圆括号前加分号

    //第二种情况：将系统变量以参数形式传递到插件内部。这样做之后：

    //1. window等系统变量在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能的提升

    //2. 而至于这个undefined，为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined'那个位置接收到的就是真实的'undefined'了。

    //其实上述两个解决办法，在jQuery这个库中本来就有使用到

    //正式版本：一个安全，结构良好，组织有序的插件编写完成。

    ;(function($, window, document, undefined){

        alert('Hello!');

    })(jQuery, window, document);

</script>

</html>

10、代码编写规范

1、变量定义

  • 做法：把将要使用的变量名用一个var关键字一并定义在代码开头，变量名间用逗号隔开
  • 原因：
    • 一是便于理解，了解下面的代码会用到哪些变量，同时代码显得整洁且有规律，也方便管理，变量定义与逻辑代码分开。
    • 二是因为JavaScript中所有变量及函数名会自动提升，也称之为JavaScript的Hoist特性，即使你将变量的定义穿插在逻辑代码中，在代码解析运行期间，这些变量的声明还是被提升到了当前作用域最顶端的，所以我们将变量定义在一个作用域的开头是更符合逻辑的一种做法。

2、变量及函数命名

  • 做法：一般使用驼峰命名法（CamelCase），即首个单词的首字母小写，后面单词首字母大写，比如 showButton。

3、常量命名

  • 做法：对于常量，所有字母采用大写，多个单词用下划线隔开，比如WIDTH=100，BRUSH_COLOR='#00ff00'。

4、当变量为jQuery类型时

  • 当变量是jQuery类型时，建议以$开头，开始会不习惯，但经常用了之后会感觉很方便，因为可以很方便地将它与普通变量区别开来，一看到以$开头我们就知道它是jQuery类型可以直接在其身上调用jQuery相关的方法，比如var $element=$('a'); 之后就可以在后面的代码中很方便地使用它，并且与其他变量容易区分开来。

5、引号的使用

  • 引号的使用：一般HTML代码里面使用双引号，而在JavaScript中多用单引号。

jquey插件开发的更多相关文章

  1. Signs of a poorly written jQuery plugin 翻译 (Jquery插件开发注意事项，Jquey官方推荐)

    原文链接:http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/ 原文作者:remy sharp So far ...

  2. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  3. jira的插件开发流程实践

    怎么开头呢,由于自己比较懒,博客一直不怎么弄,以后克己一点,多传点自己遇到的问题和经历上来,供自己以后记忆,也供需要的小伙伴少走点弯路吧 最近公司项目需要竞标一个运维项目,甲方给予了既定的几种比较常用 ...

  4. Vue插件开发入门

    相对组件来说,Vue 的插件开发受到的关注要少一点.但是插件的功能是十分强大的,能够完成许多 Vue 框架本身不具备的功能. 大家一般习惯直接调用现成的插件,比如官方推荐的 vue-router.vu ...

  5. 【原创】记一次Project插件开发

    一.开发背景 最近在使用微软的Office Project 2010 进行项目管理,看到排的满满的计划任务,一个个地被执行完毕,还是很有成就感的.其实,不光是在工作中可以使用Project进行项目进度 ...

  6. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  7. [Tool] Open Live Writer插件开发

    一 前言 Windows Live Writer(简称 WLW)开源之后变成 Open Live Writer(简称 OLW),原先 WLW 的插件在 OLW 下都不能用了,原因很简单,WLW 插件开 ...

  8. VS插件开发 - 登录身份验证

    [附加] 很多朋友问那个VS背景怎么弄的,我刚刚已经抽时间把制作步骤发出来了: 请参见<VS插件开发 - 个性化VS IDE编辑器,瞬间 高 大 上>. 最近一直在忙着一些事情,一直没有发 ...

  9. jQuery插件开发精品教程，让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

随机推荐

  1. cocos2d-x3.x Vector

    auto sp0 = Sprite::create(); sp0->setTag(); auto sp1 = Sprite::create(); sp1->setTag(); //这里使用 ...

  2. eclipse 配置scala问题-More than one scala library found in the build path

    配置eclipse出错解决 山重水复疑无路,柳暗花明又一村!经过大量的验证...终于make it. 参考博客:http://blog.csdn.net/wankunde/article/detail ...

  3. Struts的前世今身

    1.Struts1的运行原理 a.初始化:struts框架的总控制器ActionServlet是一个Servlet,它在web.xml中配置成自动启动的Servlet,在启动时总控制器会读取配置文件( ...

  4. Windows API 之 FineFirstFile、FindNextFile

    参考:https://msdn.microsoft.com/en-us/library/aa364418%28VS.85%29.aspx FindFirstFile Searches a direct ...

  5. NPOI 2.0 教程（二）：编辑既存的EXCEL文件

    NPOI 2.0 教程(二):编辑既存的EXCEL文件 分类: C#技术 2014-03-11 15:40 993人阅读 评论(3) 收藏 举报 c#excelNPOI 转载请注明出处 http:// ...

  6. asp 随机生成字符

    <%function rndNumLetters(num) randomize dim num0,num1,num2,num3,pass if num = "" or not ...

  7. 设计模式之建造者模式（Builder）

    一个人活到70岁以上,都会经历这样的几个阶段:婴儿,少年,青年,中年,老年.并且每个人在各个阶段肯定是不一样的呀,我觉得可以说世界上不存在两个人在人生的这5个阶段的生活完全一样,但是活到70岁以上的人 ...

  8. js动态添加file控件

    <html></head><script language="javascript" type="text/ecmascript" ...

  9. Java 六种异常处理的陋习（转）

    Java 六种异常处理的陋习 原文链接:  http://www.cnblogs.com/Android-and-android/archive/2013/05/02/3054469.html 你觉得 ...

  10. Kali渗透测试学习

    http://blog.chinaunix.net/uid-26349264-id-4041727.html