JS库封装

最新推荐文章于 2022-11-06 14:03:53 发布

itwangyang520

最新推荐文章于 2022-11-06 14:03:53 发布

阅读量924

点赞数 1

分类专栏： js封装 web WEB前端知识 JavaScript的拷贝继承继承原型继承作用域

本文链接：https://blog.csdn.net/itwangyang520/article/details/90573081

版权

WEB前端知识同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

web

20 篇文章 0 订阅

订阅专栏

JavaScript的

17 篇文章 0 订阅

订阅专栏

1.入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //给页面中所有的div设置字体颜色为红色
    //$("div").css("color","red")

    //1、要封装的这个库应该是一个独立的单元：模块化
    //  -->独立：a、不依赖任何其他第三方库
    //          b、里面的东西大部分也是与世隔绝的，只有:$、jQuery

    (function(global){
        //global保存了window对象的引用

        function jQuery(){

        }

        //window.$ = window.jQuery = jQuery;

        //相当于：
        global.jQuery=jQuery;
        global.$=jQuery;
    })(window)
</script>
</html>

02-入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
</body>
<script>
    //给页面中所有的div设置字体颜色为红色
    //$("div").css("color","red")

    (function(global){

        function jQuery(selector){

            //1、获取页面中所有的元素
            //2、把这个元素放在一个特定的对象中

            const elements = document.getElementsByTagName(selector);
            //这样的话，随着$()操作频次的增加，会产生无数个相同的css方法，造成内存浪费
            elements.css=()=>{

            }
            return elements;
        }

        window.$ = window.jQuery = jQuery;
    })(window)

    
    $("div").css()
    $("p")
    $("span")
    $("img")
    $("input")
</script>
</html>

03-入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
</body>
<script>
    //给页面中所有的div设置字体颜色为红色
    //$("div").css("color","red")

    (function(global){

        function jQuery(selector){

            //1、获取页面中所有的元素
            //2、把这个元素放在一个特定的对象中

            const elements = document.getElementsByTagName(selector);
            //这样的话，随着$()操作频次的增加，会产生无数个相同的css方法，造成内存浪费
            return elements;
        }

        //解决方案，把DOM操作的方法都放在了原形中，这样看似可以正常访问，但是依然存在问题：破坏了原生的对象结构
        //-->
        HTMLCollection.prototype.css=()=>{
            console.log('css方法');
        }

        window.$ = window.jQuery = jQuery;
    })(window)

    
    $("div").css()
</script>
</html>

04-入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>

    <div class="header">123</div>
</body>
<script>
    //给页面中所有的div设置字体颜色为红色
    //$("div").css("color","red")

    (function(global){

        function jQuery(selector){

            //1、获取页面中所有的元素
            //2、把这个元素放在一个特定的对象中

            
            //这样的话，随着$()操作频次的增加，会产生无数个相同的css方法，造成内存浪费
            return new F(selector);
        }

        //jquery对象的构造函数
        function F(selector){
            //把DOM元素放到这个对象中
            const elements = document.getElementsByTagName(selector);
            //为了让这些元素可以在css方法中进行访问，所以需要把这些元素放在对象上面进行传递
            this.elements = elements;
        }
        F.prototype.css=function(name,value){
            for(let i = 0;i<this.elements.length;i++){
                let element = this.elements[i];
                element.style[name]=value;
            }
        }

        

        window.$ = window.jQuery = jQuery;
    })(window)

    
    $("div").css("color","red")
    $(".header").css("backgroundColor","pink")
    $("#inputId").css("backgroundColor","black")
</script>
</html>

05-入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>

    <span class="header">123</span>
    <input type="text" id="inputId">
</body>
<script>
    //给页面中所有的div设置字体颜色为红色
    //$("div").css("color","red")

    (function(global){

        function jQuery(selector){

            //1、获取页面中所有的元素
            //2、把这个元素放在一个特定的对象中

            
            //这样的话，随着$()操作频次的增加，会产生无数个相同的css方法，造成内存浪费
            return new F(selector);
        }

        //jquery对象的构造函数
        function F(selector){
            //jquery内部封装了一个Sizzle引擎来获取DOM元素

            //把DOM元素放到这个对象中
            const elements = document.querySelectorAll(selector)
            //为了让这些元素可以在css方法中进行访问，所以需要把这些元素放在对象上面进行传递
            this.elements = elements;
        }
        F.prototype.css=function(name,value){
            for(let i = 0;i<this.elements.length;i++){
                let element = this.elements[i];
                element.style[name]=value;
            }
        }

        

        window.$ = window.jQuery = jQuery;
    })(window)

    
    $("div").css("color","red")
    $(".header").css("backgroundColor","pink")
    $("#inputId").css("backgroundColor","black")
</script>
</html>

06-入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>

    <span class="header">123</span>
    <input type="text" id="inputId">
</body>
<script>
    //给页面中所有的div设置字体颜色为红色
    //$("div").css("color","red")

    (function(global){

        function jQuery(selector){

            //1、获取页面中所有的元素
            //2、把这个元素放在一个特定的对象中
            return new F(selector);
        }

        //jquery对象的构造函数
        function F(selector){
            //把DOM元素放到这个对象中
            const elements = document.querySelectorAll(selector)
            //jquery为了后续的DOM操作的方便，将这些获取到的DOM元素全部放在了对象自己身上，让自己变成了一个就像数组一样，可以使用for循环进行遍历，我们把这种对象特性称之为【伪数组】

            //实现把这些所有DOM元素都添加到对象自己身上
            for(let i = 0;i<elements.length;i++){
                //ele：DOM元素
                this[i] = elements[i];
            }
            this.length=elements.length;
            
        }

        F.prototype = {
            constructor:F,
            //此时的css方法还是雏形，后续完善
            css(name,value){
                for(let i = 0;i<this.length;i++){
                    let element = this[i];
                    element.style[name]=value;
                }
            }
        }

        

        window.$ = window.jQuery = jQuery;
    })(window)

    
    $("div").css("color","red")
    $(".header").css("backgroundColor","pink")
    $("#inputId").css("backgroundColor","black")

    //实现的结果：没需要需要new一个对象，但是对象的方法是共用的
    var $1=$("div");
    var $2=$("div");
    console.log($1 == $2); //2个对象，false
    console.log($1.css == $2.css); //同一个方法，true

    //jquery对象不可能相同，后续，内存优化介绍如何适当地解决这种jquery对象消耗的内存
</script>
</html>

07-入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>

    <span class="header">123</span>
    <input type="text" id="inputId">
</body>
<script>
    (function(global){

        function jQuery(selector){

            //1、获取页面中所有的元素
            //2、把这个元素放在一个特定的对象中
            var _init=jQuery.prototype.init;
            return new _init(selector);
            
            //等价于：
            //return new jQuery.prototype.init(selector);
        }

        jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                //把DOM元素放到这个对象中
                const elements = document.querySelectorAll(selector)

                for(let i = 0;i<elements.length;i++){
                    this[i] = elements[i];
                }
                this.length=elements.length;
                
            },
            //此时的css方法还是雏形，后续完善
            css(name,value){
                for(let i = 0;i<this.length;i++){
                    let element = this[i];
                    element.style[name]=value;
                }
            }
        }

        //此时创建的jquery是init构造函数的实例
        //css方法在jquery.prototype对象中
        //-->为了让jquery对象可以访问到css方法
        //  -->让init的原型继承自jQuery.prototype
        jQuery.prototype.init.prototype = jQuery.prototype;

        //-->1、创建了一个init的对象
        //-->2、执行css方法
        //  -->找对象本身有没有css方法，并没有
        //  -->找对象的原型：init.prototype -->jquery.prototype
        //  -->发现jquery.prototype中有一个css方法

        

        window.$ = window.jQuery = jQuery;
    })(window)

    
    $("div").css("color","red")
    $(".header").css("backgroundColor","pink")
    $("#inputId").css("backgroundColor","black")

    //实现的结果：没需要需要new一个对象，但是对象的方法是共用的
    var $1=$("div");
    var $2=$("div");
    console.log($1 == $2); //2个对象，false
    console.log($1.css == $2.css); //同一个方法，true

    //jquery对象不可能相同，后续，内存优化介绍如何适当地解决这种jquery对象消耗的内存
</script>
</html>

08-入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>

    <span class="header">123</span>
    <input type="text" id="inputId">
</body>
<script>
    (function(global){

        function jQuery(selector){

            //1、获取页面中所有的元素
            //2、把这个元素放在一个特定的对象中
            return new jQuery.fn.init(selector);
        }
        
        //给jquery添加了一个fn属性，fn属性等价于prototype属性
        jQuery.fn = jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                //把DOM元素放到这个对象中
                const elements = document.querySelectorAll(selector)

                for(let i = 0;i<elements.length;i++){
                    this[i] = elements[i];
                }
                this.length=elements.length;
                
            },
            //此时的css方法还是雏形，后续完善
            css(name,value){
                for(let i = 0;i<this.length;i++){
                    let element = this[i];
                    element.style[name]=value;
                }
            }
        }

        //此时创建的jquery是init构造函数的实例
        //css方法在jquery.prototype对象中
        //-->为了让jquery对象可以访问到css方法
        //  -->让init的原型继承自jQuery.prototype
        jQuery.fn.init.prototype = jQuery.fn;

        

        window.$ = window.jQuery = jQuery;
    })(window)

    
    $("div").css("color","red")
    $(".header").css("backgroundColor","pink")
    $("#inputId").css("backgroundColor","black")

    //实现的结果：没需要需要new一个对象，但是对象的方法是共用的
    var $1=$("div");
    var $2=$("div");
    console.log($1 == $2); //2个对象，false
    console.log($1.css == $2.css); //同一个方法，true

    //jquery对象不可能相同，后续，内存优化介绍如何适当地解决这种jquery对象消耗的内存
</script>
</html>

09-extend方法.1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>

    <span class="header">123</span>
    <input type="text" id="inputId">
</body>
<script>
    (function(global){

        function jQuery(selector){

            //1、获取页面中所有的元素
            //2、把这个元素放在一个特定的对象中
            return new jQuery.fn.init(selector);
        }
        
        //给jquery添加了一个fn属性，fn属性等价于prototype属性
        jQuery.fn = jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                //把DOM元素放到这个对象中
                const elements = document.querySelectorAll(selector)

                for(let i = 0;i<elements.length;i++){
                    this[i] = elements[i];
                }
                this.length=elements.length;
                
            },
            //此时的css方法还是雏形，后续完善
            css(name,value){
                for(let i = 0;i<this.length;i++){
                    let element = this[i];
                    element.style[name]=value;
                }
            }
        }

        //此时创建的jquery是init构造函数的实例
        //css方法在jquery.prototype对象中
        //-->为了让jquery对象可以访问到css方法
        //  -->让init的原型继承自jQuery.prototype
        jQuery.fn.init.prototype = jQuery.fn;

        jQuery.extend = function(...args){
            //这里的extend方法参数并不确定
            //所以建议不要指定形参，通过函数内置对象arguments来进行操作

            console.log(args);

            const target = args[0];

            //进行对象拷贝，需要将第二个参数及其后面的所有参数中的属性遍历添加到第一个参数中
            for(let i = 1;i<args.length;i++){
                //每一个实参：对象
                let arg = args[i];
                //取出对象中的每一个属性
                for (let key in arg) {
                    //把该属性添加到第一个参数中
                    target[key] = arg[key];
                }
            }

            return target;
        }

        

        window.$ = window.jQuery = jQuery;
    })(window)

    var p = {};
    $.extend(p,{a:10},{b:20},{c:30})

    //$.extend：
    
    // var obj={ name:"xxx",age:18}
    // var obj3={ gender:"女"}
    // var obj2={};

    //将obj、obj3中的属性一一的遍历添加到obj2对象中
    //$.extend(obj2,obj,obj3)


    //作业：使用es6中的对象扩展运算符改写extend方法
</script>
</html>

10-extend方法.2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>

    <span class="header">123</span>
    <input type="text" id="inputId">
</body>
<script>
    //$("div")
    (function(global){

        function jQuery(selector){

            //1、获取页面中所有的元素
            //2、把这个元素放在一个特定的对象中
            return new jQuery.fn.init(selector);
        }
        
        //给jquery添加了一个fn属性，fn属性等价于prototype属性
        jQuery.fn = jQuery.prototype = {
            constructor:jQuery,
            //init是一个构造函数
            //-->构造函数内部的this指向init的实例
            init:function(selector){
                //把DOM元素放到这个对象中
                const elements = document.querySelectorAll(selector)
                
                //为了让css方法中可以访问到DOM元素，所以需要把elements里面的元素存放在this中
                for(let i = 0;i<elements.length;i++){
                    this[i] = elements[i];
                }
                this.length=elements.length;
                //对象结构：{ 0:div,1:div,2:div,length:3 }
                
            },
            //此时的css方法还是雏形，后续完善
            css(name,value){
                for(let i = 0;i<this.length;i++){
                    let element = this[i];
                    element.style[name]=value;
                }
            }
        }

        //此时创建的jquery是init构造函数的实例
        //css方法在jquery.prototype对象中
        //-->为了让jquery对象可以访问到css方法
        //  -->让init的原型继承自jQuery.prototype
        jQuery.fn.init.prototype = jQuery.fn;

        jQuery.fn.extend = jQuery.extend = function(...args){
            //2个extend方法区别在于：
            //1、接收数据的对象发生了变化
            //  -->$.extend：第一个实参
            //  -->$.fn.extend：this
            //2、提供数据的对象发生了变化：
            //  -->$.extend：第二个参数及其后面的参数
            //  -->$.fn.extend：所有的参数

            //后面的拷贝过程都是一样的

            let target,source=[];

            source=[...args];
            
            //判断2种情况       
            //  $.extend    -->jQuery.extend 方法调用形式
            if(this === jQuery){
                //$.extend
                target=args[0];
                
                source.splice(0,1); //删除第一个元素
            }else{
                //$.fn.extend
                target = this;
            }
            
            //实现拷贝部分的逻辑：
            source.forEach(function(item,index){
                //item：就是每一个数据源对象（提供数据的对象）
                
                //取出item对象中的每一个属性：for...in
                Object.keys(item).forEach((key)=>{
                    //key就是对象中每一个属性名
                    target[key]=item[key];
                })
            });

            return target;


        }

        

        global.$ = global.jQuery = jQuery;
    })(window)

    var p = {};
    $.extend(p,{a:10},{b:20},{c:30})

    //第二个extend方法：其实就是为了给
    //$.fn.extend：这是编写jquery插件的核心方法
    //-->功能就是把这些方法添加到原型中
    $.fn.extend({
        dateTimePicker(){

        },
        getDate(){

        }
    })
</script>
</html>

这个代码是，一步一步调试过来的，需要一个一个文件来复习！

itwangyang520

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS库封装

1.入口函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
复制链接

扫一扫