手撸jQuery源码：入口函数

最新推荐文章于 2021-04-04 21:55:14 发布

bzcoder

最新推荐文章于 2021-04-04 21:55:14 发布

阅读量245

点赞数

分类专栏： jQuery源码文章标签： jquery

本文链接：https://blog.csdn.net/qq_44353287/article/details/109356860

版权

jQuery源码专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html部分代码：

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</body>
<script src="dquery.js"></script>
<!-- <script src="jquery1.12.4.js"></script> -->
<script>
    //1.传入 空 null undefined NaN 0 false 返回空的jQuery对象
     console.log($(""));
     console.log($(null))
     console.log($(undefined))
     console.log($(NaN))
     console.log($(0))
     console.log($(false))
   //传入方法
    var test = function(){};
    $(test);

    //2.传入字符串

    //2.1传入代码片段 会将创建好的dom元素存储到jQuery对象中返回
    console.log($("<p>1</p><p>2</p><p>3</p>"))
    console.log($("   <p>1</p> <p>2</p><p>3</p>  "))

    //2.2传入选择器  会找到所有的元素存储到jQuery对象中返回
    console.log($('p'))

    //3.传入数组

    //3.1传入真数组
    console.log($([1,2,3,4,5]))
    //3.2传入伪数组
    var likearr = {0:"a",1:"b",2:"c",length:3};
    console.log($(likearr));

    //4.其他类型
    //4.1 传入对象  将传入的对象存储到jQuery中保存
    function Person(){};
    console.log($(new Person()));
    //4.2传入dom元素  将传入的dom元素存储到jQuery中保存
    console.log($(document.createElement('div')));
    //4.3传入基本数据类型  将传入的基本数据类型存储到jQuery中保存
    console.log($(123));
    console.log($(true));
</script>

自建dQuery代码：

(function(window,undefined){
    //函数入口  selector为传入的值
    var dQuery = function(selector){
        //调用dQuery原型中的init方法
        return new dQuery.prototype.init(selector);  
    }
    //函数原型
    dQuery.prototype = {
        constructor:dQuery,
        //首先判断传入的值
        init:function(selector){
            //0.去除字符串两端的空格  否则结果为空
            selector = dQuery.trim(selector);
            //1.传入 空 null undefined NaN 0 false 返回空的jQuery对象
             if(!selector){
                //return this;  //优化：this可放到最后
             }
             //传入方法
             else if (dQuery.isFunction(selector)) {
                 console.log("function");
             }
             //2传入字符串
             else if(dQuery.isString(selector)){
                 //2.1判断是不是代码片段
                 if(dQuery.isHtml(selector))
                {
                   //1.根据代码片段创建所有元素
                   var temp = document.createElement("div");
                   temp.innerHTML = selector;
                 /* 
                   //2.将创建好的一级元素添加到jQuery中
                   for(var i=0;i<temp.children.length;i++){
                       this[i] = temp.children[i];
                   }
                   //3.给jQuery对象添加length属性
                   this.length = temp.children.length; 
                 */
                //第二三步的巧妙方法：
                   [].push.apply(this,temp.children);  
                   //4.返回加工好的this(jQuery)
                   //return this;
                }
                //2.2判断是不是选择器
                else{
                    //1.根据传入的选择器找到所有的元素
                    var res = document.querySelectorAll(selector);
                    //2.类似上面的2 3步
                    [].push.apply(this,res)
                    //3.返回加工上的this
                   // return this;
                }
             }
             //3.传入数组
            /*  else if(typeof selector ==="object" &&
             "length" in selector &&
             selector !=window */
             else if(dQuery.isArray(selector)
             ){ 
                //真伪数组区分可以靠toString()方法
                //真数组toString得到逗号连接的字符串，伪数组得到[object,object]
                //3.1传入真数组
                /* if(({}).toString.apply(selector) === "[object Array]"){
                    //转换为伪数组
                    [].push.apply(this,selector);
                    return this;
                }
                //3.2传入伪数组
                else{
                    //将伪数组转换为真数组
                    var arr = [].slice.call(selector);
                    //将真数组转换为伪数组
                    [].push.apply(this,arr);
                    return this;
                } */
                //优化代码
                //将伪数组转换为真数组
                var arr = [].slice.call(selector);
                [].push.apply(this,selector);
                //return this;
             }
             //4.除上述类型以外
              else{
                  this[0] = selector;
                  this.length = 1;
                  //return this;
              }
              return this;
        }
    }
    //封装判断字符串和代码片段的方法
    dQuery.isString = function(str){
        return typeof str === "string";
    }
    dQuery.isHtml = function(str){
        return str.charAt(0) == "<" && 
        str.charAt(str.length-1) == ">" &&
        str.length >=3
    }
    //封装判断对象 数组 window的方法
    dQuery.isObject = function(sel){
        return typeof sel === "object"
    }
    dQuery.isWindow =function (sel){
        return sel === window;
    }
    dQuery.isArray = function(sel){
        if(dQuery.isObject(sel)&&
            !dQuery.isWindow(sel)&&
            "length" in sel){
                return true;
            }
        return false;
    }
    //去除传入字符串的空格
    dQuery.trim = function (str){
        if(!dQuery.isString(str)){
            return str;
        }
        if(str.trim){
            return str.trim();
        }else{
            return str.replace(/^\s+|\s+$/g,"")
        }
    }

    //将init方法原型指向dQuery
    dQuery.prototype.init.prototype = dQuery.prototype;
    //定义全局变量dQuery 和 $，就可以使用$()的方式调用该js库
    window.dQuery = window.$ = dQuery;
})(window);

bzcoder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手撸jQuery源码：入口函数

html部分代码：<body> <p>1</p> <p>2</p> <p>3</p></body><script src="dquery.js"></script><script> //1.传入空 nul
复制链接

扫一扫

专栏目录