JS库封装

深碍√TFBOYSˉ_ 2022-01-27 09:29 225阅读 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-入口函数 #

# 03-入口函数 #

# 04-入口函数 #

# 05-入口函数 #

# 06-入口函数 #

# 07-入口函数 #

# 08-入口函数 #

# 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>

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