内容简介:根据统计,全世界大约有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博客 点赞和关注,感激不尽!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 算法学习:常用设计思想
- flex设计思想和语法简介
- 16 种设计思想 – Design for failure
- 设计开发中要避免的两个坑和一种可借鉴的设计思想
- 宜信开源|Wormhole 大数据流式处理平台之设计思想
- 彻底理解OkHttp - OkHttp 源码解析及OkHttp的设计思想
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Don't Make Me Think
Steve Krug / New Riders Press / 18 August, 2005 / $35.00
Five years and more than 100,000 copies after it was first published, it's hard to imagine anyone working in Web design who hasn't read Steve Krug's "instant classic" on Web usability, but people are ......一起来看看 《Don't Make Me Think》 这本书的介绍吧!
XML 在线格式化
在线 XML 格式化压缩工具
RGB CMYK 转换工具
RGB CMYK 互转工具