jq_$.extend和$.fn.extend插件开发和方法的封装
--------杂谈--------
随着使用的使用js和jq使用的越来越娴熟,也就是说日常产品经理给的一些需求,已经在自己的能力范围内了。空出来了一点时间,来研究如何优化你的代码,
不管是性能上,还是美观上,都应该有一个更好的提升。你决定做这件事的时候,就应该用最大的努力,去做到最好,给自己最好的答案。要是每天浑浑噩噩
的混日子,老来想必会后悔吧。特别是在工作中,一定要做好,做好了就有人看到,自然利益什么的就会向你靠。或者不单单是金钱,还有爱情呢。所以一定
要做最好的自己。做最好的自己。
-------技术段--------
下面写的都是我自己在开发中的一些理解,当然想法也是在参考别人的思想后自己总结的一套,忘君喜欢。
$.extend这个是JQ提供的添加静态内容的方法,在开始开发的时候你会掂量着这个功能如何实现,是的,你在掂量的时候就应该把一整个页面的功能一个一个
的细分成一个个方法,这个方法实现这个小功能,那个方法实现那个小功能。思路会清晰很多。
$.fn.extend是添加动态内容的一个方法,像什么click,hover等一些事件就可以封装在其中。
代码示例:
1 (function() { 2 //添加一个静态方法 3 $.extend({ 4 add: function(a, b) { 5 return a + b; 6 } 7 }); 8 //添加动态方法 9 $.fn.extend({ 10 alertWhileClick: function() { 11 $(this).hover(function() { 12 console.log($(this).val()); 13 }) 14 } 15 }); 16 $("#input1").alertWhileClick(); 17 console.log($.add(3, 4)) 18 })(jQuery)
注意此代码是有顺序的,先引入JQ,封装的方法在前面,而最后才是调用的方法,不然事件是不会其效果的。
全部代码:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> 7 <title></title> 8 </head> 9 10 <body> 11 <input type="text" name="input1" id="input1" value="wushuhongshigehuaidan" /> 12 <script type="text/javascript"> 13 (function() { 14 //添加一个静态方法 15 $.extend({ 16 add: function(a, b) { 17 return a + b; 18 } 19 }); 20 //添加动态方法 21 $.fn.extend({ 22 alertWhileClick: function() { 23 $(this).hover(function() { 24 console.log($(this).val()); 25 }) 26 } 27 }); 28 $("#input1").alertWhileClick(); 29 console.log($.add(3, 4)) 30 })(jQuery) 31 </script> 32 </body> 33 34 </html>
“世界是个叙述者, 而我们却蒙上黑布, 嗤之以鼻。”