关于jquery中编写插件的一些注意点分析

• 分号的使用
• return的问题
• 关于this和$(this)
• 关于prototype
• $运算符的含义
• 在插件编写时的window，document相关参数

首先我们来看一段示例jquery开发插件的代码，就对这段代码进行以上问题的分析

    ;(function($, window, document,undefined) {    //定义Beautifier的构造函数    var Beautifier = function(ele, opt) {        this.$element = ele,        this.defaults = {            'color': 'red',            'fontSize': '12px',            'textDecoration': 'none'        },        this.options = $.extend({}, this.defaults, opt)    }    //定义Beautifier的方法    Beautifier.prototype = {        beautify: function() {            return this.$element.css({                'color': this.options.color,                'fontSize': this.options.fontSize,                'textDecoration': this.options.textDecoration            });        }    }    //在插件中使用Beautifier对象    $.fn.myPlugin = function(options) {        //创建Beautifier的实体        var beautifier = new Beautifier(this, options);        //调用其方法        return beautifier.beautify();    }})(jQuery, window, document);

分号的使用

说到js中的分号，首先我们需要了解一下js中的分号插入原理。在一般进行js开发的时候，有的开发人员会省略分号“;”，这是因为js在解析的时候有分号自动插入这么一回事。分号插入原理如下：

• 仅在}之前、一个或多个换行之后和程序输入的结尾被插入
• 仅在随后的输入标记不能解析时插入
• 省略分号导致脚本连接问题
• JavaScript语法限制产生式
• 自增自减运算的分号插入规则
• 分号不会作为分隔符在for循环空语句的头部被自动插入

对于js来说，一般的一行可以是一条语句，语句通过行来分割，可以省略分号，但是有正对以上的规则，有一些特殊的地方需要说一下：
1.当编写的js需要进行压缩，需要在语句后面加上分号；
2.（、[、+、-、和/ 这五个字符开始的语句，那么最好前面不要省略分号；
3.想省略分号，有经验的程序员会在该语句的后面跟一个声明语句，以保证解析器解析正确；
4.在每个文件前缀一个额外的分号以保护脚本免受粗心连接的影响；（这就是上面的示例代码最前面有分号的原因）
5.”++”和”–”符号的分号一定要注意；
6.for的头部和while循环中的空循环需要加上分号。

return的问题

如图，在这段代码中有两个return的函数返回，如果不加上return，这个插件的功能不会受到影响，但是我们肯定见过这样的jquery方法连写，$(“#name”).css().show().attr(),如果不加上上述功能函数没有return，那这样的连写就会出错。

关于this和$(this)

看一下调用这个myPlugin插件的两种方式：

$(function(){    $("a").click(function(){        $(this).myPlugin();    })  })

和

$(function(){    $("a").myPlugin();    })  })

在myPlugin插件中我们的this就是指的选中的jquery对象，在第一个调用方法中，this指的是a这个html对象，$(this)才是jquery对象，传入myPlagin中才可以调用jquery的.css()方法。

关于prototype

在myPlugin插件中，参数定义在两个空间内，一个是在Beatifier的初始定义的构造函数空间中（比如defaults ，option），另一个在Beatifier的原型空间中（比如函数参数beautify）。一般的我们把初始化参数放在构造函数中，把方法放在圆形控件中。这样的区别是，prototype的原型空间内的参数是所有对象共享的，当发生变化的时候，所有对象的对应参数都会发生变化，而放在构造函数中的参数，是属于每一个单独创建的对象的互不影响。

$运算符的含义

function()给方法中传递符号, 就可以在方法体中使用jQuery的简写符号.这是在jQuery销毁了全局的简写后,在自定义方法中还可以使用这种简写方式的解决方案。

在插件编写时的window，document相关参数

js中变量是有作用域链的

1.传递参数的方式后，这两个变量就变成了匿名函数的局部变量，访问起来的时候速度会快。

2.如果不传递也可以，但是当访问到该变量的时候js引擎首先会在函数自己的作用域找这个变量，没有的话继续往上找，找到了就返回该变量，找不到就返回undefined。
这两种方式你觉得哪个更方便，更高效。