一步一步DIY jQuery库3-引入sizzle引擎

最新推荐文章于 2019-12-16 11:23:39 发布

TechFE

最新推荐文章于 2019-12-16 11:23:39 发布

阅读量855

点赞数

分类专栏：前端 jquery 文章标签： jquery 库

本文链接：https://blog.csdn.net/future_todo/article/details/52740319

版权

本文是DIY jQuery系列的第三篇，主要介绍如何引入Sizzle引擎并将其改造为模块化，以及如何扩展jQuery以支持链式操作和记录检索历史。通过改造Sizzle，将搜索结果转换为DOM集合类数组对象，并实现find方法。同时，讨论了pushStack方法用于记录检索的jQuery对象，以及未来实现中需要考虑的上下文和重复DOM问题。

摘要由CSDN通过智能技术生成

【注】所有代码挂在我的github上

在前两篇的基础上，正式引入sizzle引擎，这里不详细介绍sizzle引擎。

我们在前两篇的jQuery.fn.init的方法是

var init = function(jQuery){
   
    jQuery.fn.init = function (selector, context) {
   
        if (!selector) {
            return this;
        } else {
            var elem = document.querySelector(selector);
            if (elem) {
                this[0] = elem;
                this.length = 1;
            }
            return this;
        }
    };

    jQuery.fn.init.prototype = jQuery.fn;
};

这里得到的结果是个数组，而不是我们需要的类数组结构的DOM集合HTMLCollection

1.引入Sizzle引擎

下载Sizzle，将sizzle.js文件复制在src/sizzle中，并且改造Sizzle成模块化的

//1-头部注释
//(function( window ) { 

//2-最后尾部注释
/*if ( typeof define === "function" && define.amd ) {
    define(function() { return Sizzle; });
// Sizzle requires that there be a global window in Common-JS like environments
} else if ( typeof module !== "undefined" && module.exports ) {
    module.exports = Sizzle;
} else {
    window.Sizzle = Sizzle;
}
// EXPOSE

})( window );*///修改点2

//3-增加
export default Sizzle;

同时增加一个初始化文件src/sizzle/init.js

import Sizzle from './sizzle.js';

var selectorInit  = function(jQuery){
   
    jQuery.find = Sizzle;  // Sizzle 赋予静态接口 jQuery.find
}

export default selectorInit;

我们可以在jquery源码中找到全部将sizzle赋值的语句，这些我们暂时先不管