jQuery的大致实现原理

twohappy 发布于2019-08-22 18:48 / 3345人阅读

摘要：进一步完善给个缩写并且使其可以是节点或者选择器可将所有的添加一个可将所有的变为封装按照的思路封装一个函数升级一下满足规则

封装一个函数

function addClass(classes){}//可将所有输入的标签的class添加一个类

再封装一个函数

function setText(text){}//可将所有输入标签的textContent变为text

实现这两个函数

第一个函数addClass()是输入一个类名，给选中的所有标签添加一个类，所以要用到classList.add()，具体实现如下

function addClass(node, classes) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].classList.add(classes)
  }
}

第二个函数setText()输入文本，修改选中标签中的文本，所以要用到textContent()，具体实现结果如下

function setText(node, text) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].textContent = text
  }
}

命名空间

在全局变量中创建一个对象，用来储存封装后的函数，这就是命名空间（名字前面统一加一个前缀）

window.jQuery = {}
jQuery.addClass = addClass
jQuery.setText = setText

jQuery.addClass("div", "red")
jQuery.setText("div","hi")

整理之后

window.jQuery = {}
jQuery.addClass = function(node, classes) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].classList.add(classes)
  }
}
jQuery.setText = function(node, text) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].textContent = text
  }
}

jQuery.addClass("div", "red")
jQuery.setText("div", "hi")

将node放到前面

node.addClass(classes)
node.setText(text)

1、方法一：扩展 Node 接口，直接在 Node.prototype 上加函数

Node.prototype.addClass = function(){
   ...
}
Node.prototype.setText = function(){
   ...
}

2、方法二：新的接口 BetterNode

window.jQuery = function(node) {
  return {
    element: node,
    addClass: function(classes) {
      var allTag = document.querySelectorAll(node)
      for (let i = 0; i < allTag.length; i++) {
        allTag[i].classList.add(classes)
      }
    },
    setText: function(text) {
      var allTag = document.querySelectorAll(node)
      for (let i = 0; i < allTag.length; i++) {
        allTag[i].textContent = text
      }
    }
  }
}

let node2 = jQuery("div")
node2.addClass("red")
node2.setText("hi")

第二种叫做「无侵入」。

进一步完善

给个缩写并且使其可以是节点或者选择器

window.jQuery = function(nodeOrSelector){
  let nodes = {}
  if(typeof nodeOrSelector === "string"){
    let temp = document.querySelectorAll(nodeOrSelector)
    for(let i=0;i
封装ajax
按照jQuery的思路封装一个ajax函数
window.jQuery.ajax = function(url, method, body, success, fail) {
    let request = XMLHttpResquest()
    request.open(method, url)
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                success.call(undefined, request.responseText)
            } else if (request.status >= 400) {
                fail.call(undefined, request)
            }
        }
    }
    request.send(body)
}
升级一下满足promise规则
window.jQuery.ajax = function({
    url,
    method,
    body,
    headers
}) {
    return new Promise(function(resolve, reject) {
        let request = XMLHttpResquest()
        request.open(method, url)
        for (let key in headers) {
            let value = headers[key]
            request.setRequestHeader(key, value)
        }
        request.onreadystatechange = () => {
            if (request.readyState === 4) {
                if (request.status >= 200 && request.status < 300) {
                    success.call(undefined, request.responseText)
                } else if (request.status >= 400) {
                    fail.call(undefined, request)
                }
            }
        }
        request.send(body)
    })
}

云服务器 GPU云服务器 volatile的实现原理回调的原理、实现与应用 jquery选择器原理队列实现原理

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

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

javaScript链式调用原理以及加法实现

摘要：相信很多小伙伴在面试的过程中都被问过链式调用的原理，甚至有些面试官还会让你用其实现例如加法操作，举例第一次看到这个题目时，或许你没有什么头绪，不要紧，让我们慢慢来首先，大家还是否记得在使用时，我们会经常这样去操作一个节点这是怎么做到的原理很相信很多小伙伴在面试的过程中都被问过js链式调用的原理，甚至有些面试官还会让你用其实现例如加法操作，举例： add(1)(2)(3) //6...

LuDongWei 2019-08-20 15:10 评论0 收藏0
jQuery 源码系列（十）hooks 的原理

摘要：欢迎来我的专栏查看系列文章。算是中一个非常可以借鉴的用法，以前听到这个概念是非常恐惧的，当看了源码，弄懂原理之后，发现超级有意思。参考源码分析钩子机制属性操作源码学习本文在上的源码地址，欢迎来。欢迎来我的专栏查看系列文章。 hooks 在英语中的意思表示钩子或挂钩，在 jQuery 中也有 hooks 这么一个概念，它的功能在考虑到一些兼容性和其它特殊情况的条件下，优先考虑这些特殊情...

nihao 2019-08-20 14:36 评论0 收藏0
webpack组织模块的原理 - 打包Library

摘要：所以你编译后的文件实际上应当只输出，这就需要在配置里用来控制这样上面的模块加载函数会在返回值后面加一个，这样就只返回的部分。之前一篇文章分析了Webpack打包JS模块的基本原理，所介绍的案例是最常见的一种情况，即多个JS模块和一个入口模块，打包成一个bundle文件，可以直接被浏览器或者其它JavaScript引擎执行，相当于直接编译生成一个完整的可执行的文件。不过还有一种很常见的...

legendmohe 2019-08-22 15:15 评论0 收藏0
JavaScript学习

摘要：和，前者是过滤选择器而后者是子代选择器。第三章中的操作查找节点想要查找元素节点或者是属性节点，就是通过前一章学习的选择器获取相应元素的文本，或者是通过选择器属性名获取某元素相应属性的值。 About Javscript record the thing which maybe forgetten 原生JavaScript Javascript DOM document.writ...

J4ck_Chan 2019-08-19 17:57 评论0 收藏0
仿淘宝的放大镜效果

摘要：本次文章的主要内容是介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂的小功能，实际上原理却是非常的简单，下面我们学习一下淘宝放大镜效果是如何实现的。前言这一段时间事情挺多的，一直没有时间写文章。这两天稍微闲了一些，就趁这会闲工夫写一篇文章。本次文章的主要内容是介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂...

wuyangnju 2019-08-20 18:14 评论0 收藏0