jQuery封装和优化

封装和优化插件

--封装插件

(function($){

　　//自定义插件代码

})(jQuery)

---------------

(function($){

　　$.fn.extend({

　　　　//函数列表

　　})

})(jQuery)

 1 <body>
 2     <div>div元素</div>
 3     <p>p元素</p>
 4     <span>span元素</span>
 5     <script src="../jquery-1.11.3.min.js"></script>
 6     <script>
 7         (function($){
 8             $.fn.extend({
 9                 color:function(options){
10                     $.extend({
11                         bcolor:"white",
12                         fcolor:"black"
13                     },options);
14                     return this.each(function(){
15                         $(this).css('color',options.fcolor);
16                         $(this).css('background',options.bcolor);
17                     })
18                 }
19             })
20         })(jQuery);
21         $(function(){
22             $("p").color({
23                 bcolor:"blue",
24                 fcolor:"red"
25             })
26         })
27 
28     </script>
29 </body>

优化插件

用户要发布自定义的插件，应该保证插件的开放性和封闭性

1.允许定义默认设置

把其中的参数默认值作为$.fn.color对象的属性单独设计，然后借助jQuery.extend()覆盖原来的参数选项即可。

在color()函数中，$.extend()方法能够使用参数options覆盖默认的default属性值，如果没有options值，那就使用

default属性值

 1 <script src="../jquery-1.11.3.min.js"></script>
 2     <script>
 3         (function($){
 4             $.fn.extend({
 5                 color:function(options){
 6                     var defaults={
 7                         bcolor:"white",
 8                         fcolor:"black"
 9                     };
10                     $.extend(defaults,options);
11                     this.each(function(){
12                         $(this).css('color',options.fcolor);
13                         $(this).css('background',options.bcolor);
14                     });
　　　　　　　　　　　　　  return this;
15                 }
16             })
17         })(jQuery);
18         $(function(){
19             $("p").color({
20                 bcolor:"blue",
21                 fcolor:"red"
22             })
23         })
24 
25     </script>
26 </body>

插件设计基本格式

 1 <script>
 2    (function($){
 3             $.fn.插件名=function(options){
 4                 var defaults={
 5 
 6                 };
 7                 var options=$.extend(defaults,options);
 8                 return this.each(function(){
 9                     
10                 })
11             }
12    })(jQuery);
13 </script>

 1 <script>
 2     (function($){
 3         $.fn.extend({
 4             tab:function(options){
 5                 var defaults={
 6 
 7                 }
 8                 var options=$.extend(defaults,options);
 9                 return this.each(function(){
10                     
11                 })
12             }
13         })
14     })(jQuery);
15 </script>

日常所遇，随手而记。