封装和优化插件
--封装插件
(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>