编写优秀jQuery插件技巧

1. 把你的代码全部放在闭包里面

这是我用的最多的一条。但是有时候在闭包外面的方法会不能调用。

不过你的插件的代码只为你自己的插件服务，所以不存在这个问题，你可以把所有的代码都放在闭包里面。 而方法可能应该放在Prototype方法内部。

/注意为了更好的兼容性，开始前有个分号
;（function($){              //此处将$作为匿名函数的形参
        /*这里置放代码，可以使用$作为jQuery的缩写别名*/  
}）(jQuery);   //这里将jQuery作为实参传递给匿名函数了

 

<script>
     //插件编写
     ;(function(){
           $.fun.extend({
                "color":function(value){
                     return this.css('color',value); 
                 }
           });
      })(jQuery);
 
     //插件应用
       $(function(){
              alert($('div').color('red'));
        });
</script>
 
<div class='a'>red</div>
<div style="color:blue">blue</div>

$.fn.extend

$.fn就是jQuery的原型，$.fn等于jQuery.prototype，$是jQuery的别名。$.fn.extend方法的作用是用于扩展jQuery实例对象，也就是我们从页面中获得的jQuery对象。

插件：一个函数

(function($) {

    $.fn.pluginName = function(options) {


// 代码在此处运行

        return this;
    }

})(jQuery);

　　上面的代码中的函数可以像其他的jQuery函数那样通过$('#element’).pluginName()来调用。注意，我是如何把“return this”语句加进去的；这小片的代码通过返回一个原来元素的集合（包含在this当中）的引用来产生链式调用的效果，而这些元素是被一个jQuery对象所包裹的。你也应该注意，“this”在这个特定的作用域中是一个jQuery对象，相当$(‘#element’)。

　　根据返回的对象，我们可以总结出，在上面的代码中，使用$(‘#element’).pluginName()的效果和使用$(‘#element’)的效果是一样的。在你的即时执行函数作用域中，没必要用$(this)的方式来把this包裹到一个jQuery对象中，因为this本身已经是被包装好的jQuery对象。

 

 

 

 

 

http://www.runoob.com/w3cnote/jquery-10-skill.html