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>
View Code

 

 

 

 

posted @ 2018-03-22 19:54  幽谷兰花  阅读(222)  评论(0)  编辑  收藏  举报