编写优秀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

巴特西

编写优秀jQuery插件技巧

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

$.fn.extend

插件：一个函数

最新文章

热门文章