谈谈jquery的实现

bergwhite 发布于2019-08-20 16:05 / 1556人阅读

摘要：最近写了些移动端的项目，在端操作，必不可少。在用这些库的时候，经常会想该如何实现这样的写法呢看了很多源码的分析，又看了很多实例，终于算是明白了。打开控制台打印一个就会发现属性完整代码简易的实现。

</>复制代码 
最近写了些移动端的项目，在PC端操作dom，jQuery必不可少。但是在移动端引入jQuery就显得不合适，一是文件太大，二是不支持一些触摸。zepto.js是移动端的jQuery，体积很小，支持触摸。在用这些库的时候，经常会想该如何实现这样的写法呢？看了很多jquery源码的分析，又看了很多实例，终于算是明白了。

$(selector)是如何实现的？

原生JS查找dom元素一般会用到这些

</>复制代码 
    var dom = document.getElementById("#dom")
    dom.style.color="";//设置css
    //移动端完全可以抛弃jquery，querySelectorAll是一个很强大的选择器
    var d=document.querySelectorAll(".dom")

我们仔细的想一下，jQuery的这种写法，$(selector),到底是什么？由原生的js操作dom我们肯定会想到，$(selector)返回的对象中一定是有dom元素？那么如何实现？我们现在看下jQuery的源码。

</>复制代码 
  var jQuery = function(selector, context) {
        // The jQuery object is actually just the init constructor "enhanced"
        // 看这里，实例化方法 jQuery() 实际上是调用了其拓展的原型方法 jQuery.fn.init
        return new jQuery.fn.init(selector, context, rootjQuery);
    }

我们再往下看代码：

</>复制代码 
 jQuery.prototype.init.prototype = jQuery.prototype;

在一步步找jQuery.prototype.init

</>复制代码 
jQuery.prototype = {
        constructor: jQuery,
        length: 0,
        selector: "",
        init: function (selector) {
        
        }

原来return new jQuery.fn.init(selector, context, rootjQuery);jQuery.fn.init的prototype指向了jquery,这样也就返回了jQuery对象！！！

下面的init方法和jquery有点不一样，但也是实现了。首先要考虑以下两个问题

jQuery(selector)要保存dom元素，当元素是个ID选择器时很容易理解，当selector不是id选择器时，或者就是一个dom标签

如何储存jQuery(selector)里的dom对象

init方法

</>复制代码 
 init: function (selector) {
            var elm;
            //当没有选择的dom元素时，返回对象本身 mTouch(),mTouch(null)
            if (!selector) {
                return this;
            }
            if (typeof selector == "object") {
                var selector = [selector];
                for (var i = 0; i < selector.length; i++) {
                    this[i] = selector[i];
                }
                this.length = selector.length;
                return this;
            } else if (typeof selector == "function") {
                mTouch.ready(selector);
                return;
            }
            if (selector.charAt(0) == "#" && !selector.match("s")) {
                this.selector = selector;
                selector = selector.substring(1);
                elm = doc.getElementById(selector);
                this[0] = elm;
                this.length = 1;
                return this;
            } else {
                elm = doc.querySelectorAll(selector);
                var len = elm.length;
                for (var i = 0; i < len; i++) {
                    //保存dom元素
                    this[i] = elm[i];
                }
                this.selector = selector;
                this.length = len;
                return this;
            }
        }

从上面的代码，我们可以看到this[i]=ele[i]

</>复制代码 
  jQuery.prototype = {
        constructor: mTouch,
        //dom元素的个数
        length: 0,
        selector: "",
        init: function (selector) {
        }
   }

关键点就是用length标记$(selector)中有多少个selector！这样才可以进行dom操作，总之一句话，还是要操作每个选择的dom。

打开控制台打印一个console.log($(selector))就会发现length属性

完整代码：简易的jquery实现。

mTouch
代码参考
你不需要jQuery

</>复制代码 
此代码仅供学习使用，建议不要在生产中使用

云服务器 GPU云服务器谈谈对php的理解 jquery实现滑动 jquery实现div拖动 jquery实现遮罩层

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82701.html

谈谈前端工程化 js加载

摘要：当年的加载在没有前端工程化之前，基本上是我们是代码一把梭，把所需要的库和自己的代码堆砌在一起，然后自上往下的引用就可以了。而且对于前后端的技术要求较高，所以对于项目未必是最有效的方案。当年的 js 加载在没有前端工程化之前，基本上是我们是代码一把梭，把所需要的库和自己的代码堆砌在一起，然后自上往下的引用就可以了。那个时代我们没有公用的cdn，也没有什么特别好的方法来优化加载j...

paulli3 2019-08-23 17:15 评论0 收藏0
谈谈ES6前后的异步编程

摘要：回调函数这是异步编程最基本的方法。对象对象是工作组提出的一种规范，目的是为异步编程提供统一接口。诞生后，出现了函数，它将异步编程带入了一个全新的阶段。更多详情点击http://blog.zhangbing.club/Ja... Javascript 语言的执行环境是单线程的，如果没有异步编程，根本没法用，非卡死不可。为了解决这个问题，Javascript语言将任务的执行模式分成两种...

fizz 2019-08-22 18:25 评论0 收藏0
前端面试整理

摘要：新布局基本数据类型，几种种也是返回类型非负区别创建对象的方式闭包的理解原型链原理手写判断是一个数组深拷贝原生操作创建元素删除元素你觉得有哪些好处还用过什么工具库事件委托事件理解规范怎么写插件怎么给数组原型添加方法怎么合并两个对象常 h5 html5 新api storage geolocation history webworker indexDB websocket can...

yvonne 2019-08-23 14:31 评论0 收藏0
你需要知道面试中的10个JavaScript概念

摘要：自我学习目前有成千上万的年轻人在学习和开发，希望获得一份工作。知道的绑定规则。知道和原型属性是什么以及它们的作用。高阶函数了解函数是中的一级对象，这意味着什么知道从另一个函数返回函数是完全合法的。了解闭包和高阶函数允许我们使用的情况。翻译原文出处：10 JavaScript concepts you need to know for interviews 之前不是闹得沸沸扬扬的大漠穷...

YacaToy 2019-08-21 16:16 评论0 收藏0