认识jQuery extend()和jQuery.fn.extend()

素描本里的男子

于 2019-06-09 08:57:33 发布

阅读量118

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_44963099/article/details/91350317

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、认识jQuery extend()和jQuery.fn.extend()
jQuery的API手册中，extend方法挂载在jQuery和jQuery.fn两个不同对象上方法，但在jQuery内部代码实现的是相同的，只是功能却不太一样；
且看官方给出解释：
jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个文档中)；
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法)
2、理解jQuery.extend()
我们先把jQuery看成了一个类，这样好理解一些。jQuery.extend()，是扩展的jQuery这个类。
假设我们把jQuery这个类看成是人类，能吃饭能喝水能跑能跳，现在我们用jQuery.extend这个方法给这个类拓展一个能说话speak()的技能。这样的话，不论是男人，女人，xx人…等能继承这个技能（方法）了。
a.添加一个新的全局函数

    jQuery.foo = function() {   
            document.write("This is a test.");  
        };
        $.foo();

b.增加多个全局函数

   jQuery.foo = function(){
            document.write("This is a foo.");  
        };
        jQuery.bar = function(param){
            document.write("This is a bar.");  
        }
        $.foo();
        $.bar();

c. 使用jQuery.extend(object)添加全局函数

jQuery.extend({
             sayHello:function(str){
                 console.log(str+"在说话");
             }
         });
   $.sayHello("老王");

d.虽然在jQuery命名空间中，我们禁止使用javascript函数名和变量名。但仍然不可避免某些函数名或变量名将与其他jQuery插件冲突，
因此我们习惯将一些方法封装到另一个自定义的命名空间。

 $.myFun = {
            sayHello:function(str){
                console.log(str+"在您好");
            },
            sayBye:function(str){
                console.log(str+"在再见");
            }
        }
        $.myFun.sayHello("小明");
        $.myFun.sayBye("蔡徐坤");

案例:实现加减乘除插件

 $.extend({
            option: function(a, b, opt) {
                switch (opt) {
                    case "+":
                        return a + b;
                        break;
                    case "-":
                        return a - b;
                        break;
                    case "*":
                        return a * b;
                        break;
                    case "/":
                        return a / b;
                        break;
                }
            },
            fun:function(){
                console.log("heihei");
            }
        });
        
        console.log($.option(3,5,"*"));
        console.log($.option(3,5,"-"));
        console.log($.option(3,5,"*"));
        console.log($.option(3,5,"/"));
        
        $.fun();

这个扩展也就是所谓的静态方法,只跟这个类本身有关。跟你具体的实例化对象是没关系的。

3、理解 jQuery.fn.extend()
从字面理解嘛，这个拓展的是jQuery.fn的方法。jQuery.fn是啥玩意呢？


    jQuery.fn = jQuery.prototype = {
      init:funtion(selector,context){
            //.....
     }
}

所以jQuery.fn.extend拓展的是jQuery对象（原型的）的方法啊！
对象是啥？就是类的实例化嘛，例如 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲abc") ，$ (div)
那就是说，jQuery.fn.extend拓展的方法，你得用在jQuery对象上面才行啊！他得是张三李四王五痳六这些实例化的对象才能用啊。
说白了就是得这么用（假设xyz()是拓展的方法）：
$(‘selector’).xyz();
调用方法如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>


        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>
<script src="myjQuery.js"></script>
<script>
    
    $(function(){
        $.fn.extend({
            changeStyle:function(){
                $(this).css({
                    background:"red",
                    width:25,
                    height:25
                });
            }
        });
        
        $("li").eq(1).changeStyle();
    });
    
</script>

弹出框插件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #box{
                width: 350px;
                height: 400px;
                background: skyblue;
                position:absolute;
                display: none;
            }
        </style>
    </head>
    <body>
        <button>开始</button>
        <div id="box">


        </div>
    </body>
</html>
<script src="myjQuery.js"></script>
<script type="text/javascript">
    $(function() {
        $.fn.extend({
            Popplugin: function() {
                let box = $(this)[0];
                let divbtn = null;


                function setBoxPostion() {
                    box.style.display = "block";
                    box.style.left = window.innerWidth / 2 - box.offsetWidth / 2 + "px";
                    box.style.top = window.innerHeight / 2 - box.offsetHeight / 2 + "px";
                    createBtn();
                }

                function createBtn() {
                    divbtn = document.createElement("button");
                    //按钮一定要先加定位
                    divbtn.style.position = "absolute";
                    divbtn.style.width = 50 + "px";
                    divbtn.style.height = 25 + "px";
                    divbtn.innerHTML = "关闭";
                    box.appendChild(divbtn);
                    //如果要修改元素的位置,一定要让元素存在
                    divbtn.style.left = box.offsetWidth - divbtn.offsetWidth + "px";
                    closeBox();
                }

                function closeBox() {
                    divbtn.onclick = function() {
                        box.style.display = "none";
                    }
                }
                
                setBoxPostion();
            }
        });
        
        $("button").click(function(){
            $("#box").Popplugin();
        });
    });
</script>

4、两者区别总结：
4.1、两者调用方式不同：
jQuery.extend(),一般由传入的全局函数来调用，主要是用来拓展个全局函数，如 $. i n i t () ，$ .ajax();
jQuery.fn.extend(),一般由具体的实例对象来调用，可以用来拓展个选择器，例如$.fn.each();
4.2、两者的主要功能作用不同：
jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法
4.3、大部分插件都是用jQuery.fn.extend() 99%

素描本里的男子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识jQuery extend()和jQuery.fn.extend()

1、认识jQuery extend()和jQuery.fn.extend()jQuery的API手册中，extend方法挂载在jQuery和jQuery.fn两个不同对象上方法，但在jQuery内部代码实现的是相同的，只是功能却不太一样；且看官方给出解释：jQuery.extend(): Merge the contents of two or more objects together i...
复制链接

扫一扫