day16-jQuery扩展以及自执行函数的应用

一、前言

　　今天我们来学习一下jquery的扩展，比如说我们想自己封装一些jquery的类库，或者自定义一个juqery的方法。我定义一个函数：　　

1
$.shuaigaogao()

 　　当然这个在jquery里面是没有的，那我们如何自定义一个呐？

二、jquery扩展

2.1、extend扩展

1
2
3
4
5
6
7
8
9
10
//定义
$.extend({
    "函数名" : function(){
        //js代码
    }
});
 
 
//调用
$.函数名();

Eg：

1
2
3
4
5
6
7
8
$.extend({
    "sbh" : function(){
        return "sb";
    }
});
 
var v = $.sbh(); //sbh函数使我们自己定义的
alert(v);

2.2、fn.extend扩展

1
2
3
4
5
6
7
8
9
//定义
$.fn.extend({
   "函数名" : function(){
       //js代码
   }
});
 
//调用
$("选择器").函数名();

Eg：

1
2
3
4
5
6
7
8
$.fn.extend({
   "sbh" : function(){
       return "sbh";
   }
});
 
var v = $("#i1").sbh();//sbh函数是自己定义的
alert(v);

三、 自执行函数解决冲突

假如我们在工作中遇到这种情况：就是说如果你用jquery扩展，或者在百度上找到别人写的jquery扩展，如果遇到两个名字是一样的，和全局变量也是一样的，那咋办呐？如下图这种情况：

这种情况我们该咋办呐？如果引用的话，你必须还得导入该js。

1
<script src="plugin01.js"></script>

这种情况，我们写一个自执行函数：

1
2
3
4
5
6
7
8
9
10
11
(function(args){
 
    var status = 1;
 
    args.extend({
               "sbh" : function(){
                   return "sbh";
               }
    });
 
})(jQuery); //这边也可以传入 $ 

 这样的话就解决了，全局变量的问题。

1
2
3
4
5
6
7
(function(args){
 
    var status = 1;
 
   //封装函数
 
})(jQuery);
posted @ 2018-05-24 14:56  东郭仔  阅读(105)  评论(0)    收藏  举报