从原生JS实现jQuery的一个API中体会其设计思想

栏目: jQuery · 发布时间: 5年前

内容简介:根据统计,全世界大约有80~90%的网站直接或间接地使用了jQuery,鉴于它如此流行,所以每一位前端工程师都应该了解和学习它。那如何才能快速理解jQuery呢?读源代码又太繁琐,所以这里利用原生JS来实现jQuery中的addClass这个API,通过实现此过程来体会jQuery的设计思想,力求简单易懂。函数在全局变量中创建一个对象,用来储存封装后的函数,这就是命名空间(名字前面统一加一个前缀)

根据统计,全世界大约有80~90%的网站直接或间接地使用了jQuery,鉴于它如此流行,所以每一位前端工程师都应该了解和学习它。那如何才能快速理解jQuery呢?读源代码又太繁琐,所以这里利用原生JS来实现jQuery中的addClass这个API,通过实现此过程来体会jQuery的设计思想,力求简单易懂。

封装函数

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

实现这个函数

函数 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)
  }
}
复制代码

命名空间

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

window.jQuery = {}
jQuery.addClass = addClass

jQuery.addClass('div', 'red')
复制代码

整理之后

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.addClass('div', 'red')
复制代码

将node放到前面

node.addClass(classes)
复制代码

方法一:扩展 Node 接口,直接在 Node.prototype 上加函数

Node.prototype.addClass = function(){
   ...
}
复制代码

方法二:新的接口 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)
      }
    }
  }
}

let node2 = jQuery('div')
node2.addClass('red')
复制代码

第二种叫做「无侵入」。

进一步完善

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

window.jQuery = function(nodeOrSelector){
  let nodes = {}
  if(typeof nodeOrSelector === 'string'){
    let temp = document.querySelectorAll(nodeOrSelector)
    for(let i=0;i<temp.length;i++){
      nodes[i]=temp[i]
    }
    nodes.length = temp.length
  }else if(nodeOrSelector instanceof Node){
    nodes = {
      0:nodeOrSelector,
      length:1
    }
  }
  nodes.addClass = function(classes){
    for(let i=0;i<nodes.length;i++){
      nodes[i].classList.add(classes)
    }
  }
  return nodes
}
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
复制代码

封装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)
    })
}
复制代码

如果觉得文章对你有些许帮助,欢迎在 我的GitHub博客 点赞和关注,感激不尽!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Learning PHP 5

Learning PHP 5

David Sklar / O'Reilly / July, 2004 / $29.95

Learning PHP 5 is the ideal tutorial for graphic designers, bloggers, and other web crafters who want a thorough but non-intimidating way to understand the code that makes web sites dynamic. The book ......一起来看看 《Learning PHP 5》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具