jQuery原理（入口函数）

最新推荐文章于 2024-09-22 22:13:15 发布
最新推荐文章于 2024-09-22 22:13:15 发布
阅读量396 收藏 1
点赞数
分类专栏： # jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sviptzk/article/details/106890058
版权

基本结构

jQuery的基本结构如下：

(function (window, undefiend) {
    var jQuery = function () {
        return new jQuery.fn.init()
    }
    jQuery.prototype = {
        constructor: jQuery
    }

    jQuery.fn.init.prototype = jQuery.prototype
    window.jQuery = window.$ = jQuery
})(window);
/* 其中fn指代的是原型，因此以上结构可以转换成以下结构 */
(function (window, undefiend) {
    var jQuery = function () {
        return new kjQuery.prototype.init();
    };
    jQuery.prototype = {
        constructor: jQuery,
    };

    jQuery.prototype.init.prototype = jQuery.prototype;

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

  1. jQuery的本质是一个闭包

    为了避免多个框架的冲突

  2. jQuery如何让外界访问内部定义的局部变量

    windows.xx = xxx

  3. jQuery为什么要给自己传递一个window参数

    • 为了方便后期压缩代码
    • 为了提升查找的效率

  4. jQuery为什么要给自己传递一个undefiend参数

    • 为了方便后期压缩代码
    • IE9以下的浏览器undefined可以被修改，为了保证内部使用的undefined不被修改，所以需要接收一个正确的undefined

入口函数测试

  1. 传入 '' null undefined NaN 0 false

    返回空的jQuery对象

    console.log($())
console.log($(''))
console.log($(null))
console.log($(undefined))
console.log($(NaN))
console.log($(0))
console.log($(false))

    image-20200621153915653

  2. 字符串

    • 代码片段

      会将创建好的DOM元素存储到jQuery对象中返回

      console.log($('<p>1</p><p>2</p><p>3</p>'));

      image-20200621155130041

    • 选择器

      会将找到的所有元素存储到jQuery对象中返回

      console.log($('li'));

      image-20200621155220061

  3. 数组

    会将数组中存储的元素依次存储到jQuery对象中立返回

    var arr = [1, 2, 3, 4, 5, 6];
console.log($(arr));
var likeArr = { 0: "lnj", 1: "33", 2: "male", length: 3 };
console.log($(likeArr));

    image-20200621155259905

  4. 其他类型（对象、DOM元素、基本数据类型等）

    会将传入的数据存储到jQuery对象中返回

    function Person() { }

console.log($(new Person()));

console.log($(document.createElement('div')));

console.log($(123));
console.log($(true));

    image-20200621155438227

入口函数-代码实现

接收参数的实现：在创建时接收一个参数，并且传递给init即可。这样init就可以接收这个参数。

var kjQuery = function (selector) {
    return new kjQuery.prototype.init(selector);
};

接下来的方法只需要在init中定义即可。

kjQuery.prototype = {
    constructor: kjQuery,
    init: function (selector) {

    },
};

  1. 传入 '' null undefined NaN 0 false

    if (!selector) {
    return this;
}

  2. 处理函数

    判断是否为函数，如果是则将传入的参数作为ready的回调函数传入。

    isFunction: function (selector) {
    return typeof selector === "function";
},

    // 2. 方法处理
else if (kjQuery.isFunction(selector)) {
    kjQuery.ready(selector);
}

    在ready函数中需要判断页面是否加载，由于IE不支持addEvem=ntListener方法添加事件，因此判断页面是否加载只能使用readyState判断页面加载状态。当页面加载完成后在进行添加事件的操作。

    ready: function (fn) {
    // 判断DOM是否加载完毕
    if (document.readyState == "complete") {
        fn();
        //   判断是否含有addEventListener方法
    } else if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function () {
            fn();
        });
    } else {
        //   IE兼容
        document.attachEvent("onreadystatechange", function () {
            if ((document.readyState = "complete")) {
                fn();
            }
        });
    }
},

  3. 字符串

    在这里需要判断是否是字符串并且需要去掉字符串两端的空格。但判断是否为字符串后边可能也会用到，因此定义一个静态方法，通过类名调用。方便后边的操作

    kjQuery.isString = function (str) {
    return typeof str === "string";
};

    去掉两端的空格在传入时去掉即可。同样定义一个静态方法

    // 0 去除字符串两端的空格
selector = kjQuery.trim(selector);
kjQuery.trim = function (str) {
    if (!kjQuery.isString(str)) {
        return str;
    }
    if (str.trim) {
        return str.trim();
    } else {
        // IE兼容处理方案
        return str.replace(/^\s+|\s+$/g, "");
    }
};

    • HTML代码

      判断是否为HTML与判断字符串一样，后边也可能会用到，因此定义一个静态方法。

      kjQuery.isHTML = function (str) {
    return (
        str.charAt(0) == "<" &&
        str.charAt(str.length - 1) == ">" &&
        str.length >= 3
    );
};

      else if (kjQuery.isString(selector)) {
    // 2.1 判断是否是代码片段
    if (kjQuery.isHTML(selector)) {
        // 1. 根据代码片段创建所有的元素
        var temp = document.createElement("div");
        temp.innerHTML = selector;
        // 2. 创建好的一级元素添加到对象
        for (var i = 0; i < temp.children.length; i++) {
            this[i] = temp.children[i];
        }
        // 3. 给jQuery对象添加length属性
        this.length = temp.children.length;
        // 4. 返回加工好的this(jQuery)
        return this;
    }
    // 2.2 判断是否是选择器
}

      其中第二三步可以修改为如下写法：

      [].push.apply(this, temp.children);

      通过apply改变push的this，这样就不会push到数组里，而是push到this（此时为kjQuery对象）中。

    • 选择器

      // 2.2 判断是否是选择器
else {
    // 1. 根据传入的选择器找到对应的元素
    var res = document.querySelectorAll(selector);
    // 2. 将找到的元素添加到kjQuery
    [].push.apply(this, res);
    // 3. 返回加工好的this
    return this;
}

  4. 数组

    注意：但凡将自定义数组转换为真数组或伪数组都先转换为真数组

    else if (
    typeof selector === "object" &&
    "length" in selector &&
    selector != window
) {
    //   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;
    }
}

    以上代码可优化为如下：

    新增静态方法

    kjQuery.isObject = function (selector) {
    return typeof selector === "object";
};
kjQuery.isWindow = function (selector) {
    return selector === window;
};
kjQuery.isArray = function (selector) {
    if (
        kjQuery.isObject(selector) &&
        !kjQuery.isWindow(selector) &&
        "length" in selector
    ) {
        return true;
    }
    return false;
};

    else if (kjQuery.isArray(selector)) {
    var arr = [].slice.call(selector);
    [].push.apply(this, arr);
    return this;
}

  5. 其他类型（对象、DOM元素、基本数据类型等）

    else {
    this[0] = selector;
    this.length = 1;
    return this;
}

真伪数组转换

  1. 真数组转换为伪数组

    var obj = {},arr=[];
[].push.apply(obj,arr);

  2. 伪数组转换为真数组

    var obj = {};
var arr = [].slice.call(obj)

入口函数-extend方法

通过extend方法来为对象或类添加方法。

  1. 调用extend方法，传入一个对象。

    function kjQuery() { }
kjQuery.extend({
    isTest: function () {
        console.log('test');
    }
})

  2. 在extend方法的实现中，遍历传入的对象，并将值添加到类身上作为类的方法。

    /* 为类和对象添加方法 */
kjQuery.extend = kjQuery.prototype.extend = function (obj) {
    for (var key in obj) {
        this[key] = obj[key];
    }
};
/*
/* 为类添加方法 */
kjQuery.extend = function (obj) {
    // this指向kjQuery
    console.log(this);
    for (var key in obj) {
        // kjQuery[key] = obj[key]
        this[key] = obj[key]
    }
}
/* 为对象添加方法 */
kjQuery.extend.prototype = function (obj) {
    // this指向实例化对象
    console.log(this);
    for (var key in obj) {
        // kjQuery[key] = obj[key]
        this[key] = obj[key]
    }
}
    */

  3. 通过类名调用方法

    kjQuery.isTest()

    image-20200621191222466

  4. 通过对象调用方法

    var k = new kjQuery();
k.extend({
    isDemo: function () {
        console.log('demo')
    }
})
k.isDemo()

    image-20200621193649802

因此可以将之前定义的静态方法改为如下写法：

kjQuery.extend = kjQuery.prototype.extend = function (obj) {
    for (var key in obj) {
        this[key] = obj[key];
    }
};
kjQuery.extend({
    isString: function (str) {
        return typeof str === "string";
    },
    isHTML: function (str) {
        return (
            str.charAt(0) == "<" &&
            str.charAt(str.length - 1) == ">" &&
            str.length >= 3
        );
    },
    trim: function (str) {
        if (!kjQuery.isString(str)) {
            return str;
        }
        if (str.trim) {
            return str.trim();
        } else {
            // IE兼容处理方案
            return str.replace(/^\s+|\s+$/g, "");
        }
    },
    isObject: function (selector) {
        return typeof selector === "object";
    },
    isWindow: function (selector) {
        return selector === window;
    },
    isArray: function (selector) {
        if (
            kjQuery.isObject(selector) &&
            !kjQuery.isWindow(selector) &&
            "length" in selector
        ) {
            return true;
        }
        return false;
    },
    isFunction: function (selector) {
        return typeof selector === "function";
    },
    ready: function (fn) {
        // 判断DOM是否加载完毕
        if (document.readyState == "complete") {
            fn();
            //   判断是否含有addEventListener方法
        } else if (document.addEventListener) {
            document.addEventListener("DOMContentLoaded", function () {
                fn();
            });
        } else {
            //   IE兼容
            document.attachEvent("onreadystatechange", function () {
                if ((document.readyState = "complete")) {
                    fn();
                }
            });
        }
    },
});

完整代码

至此入口函数部分编写已经完成，下边是工具库的全部代码。

(function (window, undefiend) {
  var kjQuery = function (selector) {
    return new kjQuery.prototype.init(selector);
  };
  kjQuery.prototype = {
    constructor: kjQuery,
    init: function (selector) {
      /*
        
        
        代码片段:会将创建好的DOM元素存储到jQuery对象中返回
        选择器: 会将找到的所有元素存储到jQuery对象中返回
        3.数组:
        会将数组中存储的元素依次存储到jQuery对象中立返回
        4.除上述类型以外的:
        会将传入的数据存储到jQuery对象中返回
    */
      // 0 去除字符串两端的空格
      selector = kjQuery.trim(selector);
      // 1.传入 '' null undefined NaN  0  false, 返回空的jQuery对象
      if (!selector) {
        return this;
      }
      // 2. 方法处理
      else if (kjQuery.isFunction(selector)) {
        kjQuery.ready(selector);
      }
      // 3.字符串:
      else if (kjQuery.isString(selector)) {
        // 2.1 判断是否是代码片段
        if (kjQuery.isHTML(selector)) {
          // 1. 根据代码片段创建所有的元素
          var temp = document.createElement("div");
          temp.innerHTML = selector;
          //   // 2. 创建好的一级元素添加到对象
          //   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);

          // this是kjQuery
          // 4. 返回加工好的this(jQuery)
        }
        // 2.2 判断是否是选择器
        else {
          // 1. 根据传入的选择器找到对应的元素
          var res = document.querySelectorAll(selector);
          // 2. 将找到的元素添加到kjQuery
          [].push.apply(this, res);
          // 3. 返回加工好的this
        }
      }
      // 3 数组
      else if (kjQuery.isArray(selector)) {
        /*
        //   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, arr);
      }
      // 4. 其他类型
      else {
        this[0] = selector;
        this.length = 1;
      }
      return this;
    },
  };
  kjQuery.extend = kjQuery.prototype.extend = function (obj) {
    for (var key in obj) {
      this[key] = obj[key];
    }
  };
  kjQuery.extend({
    isString: function (str) {
      return typeof str === "string";
    },
    isHTML: function (str) {
      return (
        str.charAt(0) == "<" &&
        str.charAt(str.length - 1) == ">" &&
        str.length >= 3
      );
    },
    trim: function (str) {
      if (!kjQuery.isString(str)) {
        return str;
      }
      if (str.trim) {
        return str.trim();
      } else {
        // IE兼容处理方案
        return str.replace(/^\s+|\s+$/g, "");
      }
    },
    isObject: function (selector) {
      return typeof selector === "object";
    },
    isWindow: function (selector) {
      return selector === window;
    },
    isArray: function (selector) {
      if (
        kjQuery.isObject(selector) &&
        !kjQuery.isWindow(selector) &&
        "length" in selector
      ) {
        return true;
      }
      return false;
    },
    isFunction: function (selector) {
      return typeof selector === "function";
    },
    ready: function (fn) {
      // 判断DOM是否加载完毕
      if (document.readyState == "complete") {
        fn();
        //   判断是否含有addEventListener方法
      } else if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function () {
          fn();
        });
      } else {
        //   IE兼容
        document.attachEvent("onreadystatechange", function () {
          if ((document.readyState = "complete")) {
            fn();
          }
        });
      }
    },
  });
  kjQuery.prototype.init.prototype = kjQuery.prototype;

  window.kjQuery = window.$ = kjQuery;
})(window);
Dreamy.TZK
关注
专栏目录
【jQuery】jQuery入口函数传入不同参数测试
Elltor
10-13 333
也许大家每天都用jQuery，但是否分析过jQuery入口函数传入各个值后的返回值，下面是测试的过程及总结。 传入""、null 、undefined、NaN、0、false 空对象，返回值均为jQuery对象jQuery.fn.init 字符串，一般是选择器，返回匹配的对象（封装的jQuery对象）。 HTML代码片段：会将创建好的DOM元素存储到jQuery对象中返回选择器, 会将找到的所有元素存储到jQuery对象中返回。 数组， 会将数组存储的元素一次存储到jQuery对象中。
jq原理——2-入口函数
肖的博客
08-21 332
原生jq总结 /* 原生$()中传入数据显示： 1、原生jq传入 '' null undefined NaN 0 false 会返一个空的jQuery对象给我们 2、原生jq传入 html片段'&amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;1&amp;amp;amp;amp;amp;lt;/P&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt
jQuery入口函数的实现机理
车联网开发的博客
08-14 488
据说jQuery是一个22岁的 小伙子写的，听了不由得竖起大拇指。为什么jQuery可以如此的简化javascript代码呢，那么今天先从入口函数说起。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery入口函数实现机理&lt;/title&amp
jQuery 入口函数 详解
最新发布
yuzhochaojiwudib的博客
09-22 543
不知道大家还有没有印象，我们在学习原生 JS 的 BOM 时，由于HTML元素在 script 标签的后方，因为代码自上而下运行而导致的报错情况，当时我们有两种解决方法，第一种是方法是 load，第二种方法是 DOMContentLoaded。，相当于原生 JS 中的 window，其实 $ 只是 jQuery 的别称，我们在开发编写代码时可以使用 jQuery 来代替 $，或者使用 $ 代替 jQuery，第二种：$( document ).ready( function( ) { XXXX })
JQuery的入口函数
程序猿小九九的博客
03-01 1841
JQuery和JavaScript的入口函数比较，以及JQuery的$符号使用冲突的解决办法
jQuery 原理 → 入口函数的实现
镜花水月
06-30 137
jQuery 原理->入口函数的实现 一、入口函数——>返回值分析 1、传入 ‘’、null、undefined、NaN、0、false 返回值：空对象； 2、传入 html 片段 将创建好的DOM元素存储到jQuery对象中并返回； console.log($(‘p1’)); 3、传入选择器 将找到的所有元素存储到jQuery对象中并返回； console.log($(‘li’)); 4、传入数组 将数组中元素依次存储到jQuery对象中并返回； 5、传入伪数组 将数组中元素依次存储
利用JQuery的load函数动态加载其它页面的内容的实现代码
12-09
jQuery的`$`符号是其主要的入口点，用于选择DOM元素并执行操作。 在给定的示例中，我们看到一个简单的HTML结构，其中包含一个`<div>`元素（ID为`load_content`），这个元素将作为加载其他页面内容的目标。页面中...
jQuery构造函数init参数分析
12-02
在jQuery中，`$`符号是其主要的入口点，但它实际上只是`jQuery`函数的一个别名。当我们使用`$()`或`jQuery()`时，我们实际上是调用了jQuery的构造函数。然而，真正的构造函数是`init`，它隐藏在`jQuery.fn.init`中。...
jQuery原理-入口函数
Boreas的博客
06-26 598
jQuery基本结构 (function( window, undefined ) { var jQuery = function( ) { return new jQuery.prototype.init( ); } jQuery.prototype = { constructor: jQuery } jQuery.prototype.init.prototype = jQuery.prototype; window.jQue
jQuery源码解读：选择器与入口函数解析
本文主要探讨了jQuery库中的选择器机制，包括基本选择器、层次选择器、过滤选择器以及表单选择器等，并通过代码示例解析了它们的工作原理。 在jQuery库中，选择器是核心功能之一，用于在DOM树中定位并操作指定的...
[jQuery原理] jQuery入口函数
DeathDomain的博客
06-26 262
入口函数测试 传入 ‘’ null undefined NaN 0 false 会返回一个空的jQuery对象给我们 console.log($()); console.log($('')); console.log($(null)); console.log($(undefined)); console.log($(NaN)); console.log($(0)); console.log($(false));   传入html片段 会将创建好的DOM元素存储到jQuery对象中返
jQuery入口函数
weixin_50652993的博客
08-08 342
jQuery入口函数一、jQuery入口函数格式二、jQuery的顶级对象jQuery对象与DOM对象的区别jQuery对象和DOM对象的互相转换jQuery对象转换为DOM对象DOM对象转换为jQuery对象 一、jQuery入口函数格式 $(function(){ //... }); 其中，函数内容只需要等到DOM结构渲染完毕就饿可以执行，不必等待所有资源加载完成。 入口函数的另一种格式 $(document).ready(function(){ //... }); 二、jQuery的顶级对象
jq入口函数的作用_从零玩转jQuery-入口函数
weixin_42298727的博客
01-14 482
jQuery入口函数jQuery与JavaScript加载模式对比多个window.只会执行一次, 后面的会覆盖前面的window.=function(){alert("hellolnj1");//不会显示}window.=function(){alert("hellolnj2");//会显示}多个$(document).ready()会执行多次,后面的...
jQuery的入口函数
热门推荐
bigxuyang的博客
08-23 1万+
一、jQuery入口函数 入口函数1：$(function(){ });入口函数2：$(document).ready(function(){ });意思是：一旦dom结构渲染完毕即可执行内部代码。二、和window.onload的区别 区别1：jQuery入口函数可以书写多次，window.onload只能书写一次； 区别2：执行的时机不同，jQuery的入口，一旦我dom结
jQuery中$原理实例分析
10-18
`$`符号是jQuery的核心，它是整个库的入口点。本文将深入解析jQuery中`$`的原理和机制。 首先，我们来探讨外层沙箱及命名空间的概念。在jQuery的源代码中，为了防止全局变量污染，jQuery使用了一个立即执行函数...
jQuery之入口函数
06-15 178
入口函数就当页面加载完成才执行入口函数，这就避免了我需要操作DOM，但是DOM还没有渲染就已经执行了JS操作DOM的代码。
jQuery 入口函数
u013068184的博客
07-26 231
jQuery 入口函数: (document).ready(function()//执行代码);或者(document).ready(function()//执行代码);或者(document).ready(function(){ // 执行代码 }); 或者 (function(){ // 执行代码 }); JavaScript 入口函数: window...
jquery 入口函数
weixin_30905981的博客
04-06 273
jQuery 入口函数: $(document).ready(function(){ // 执行代码 }); 或者 $(function(){ // 执行代码 }); JavaScript 入口函数: window.onload = function () { // 执行代码 } 　　 jQuery 入口函数与 JavaScri...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值