轻轻松松本身写一个jquery库-要不要尝尝？

2024年2月8日 64次阅读 来源: 前端大彬哥

jQuery是如今最盛行的JavaScript东西库。
据统计，现在全球57.3%的网站运用它。也就是说，10个网站内里，有6个运用jQuery。假如只考核运用东西库的网站，这个比例就会上升到惊人的91.7%。

因而，常常我们看到一些前端口试会有这么一条请求，入拉勾的雇用：

https://www.lagou.com/jobs/99… 通晓 Javascript,jQuery

https://www.lagou.com/jobs/31… 熟习业界经常使用Javascript剧本库（如prototype、jQuery、YUI、mootools等），熟习前端工程化本地化开辟处理方案

https://www.lagou.com/jobs/16… 熟习jquery和prototype的JavaScript类库；

https://www.lagou.com/jobs/18… 熟习最少一种JS框架或许对JS言语控制较深；

人人看到他们的工资都很高，两眼放光，一看自身的事情经验也相符，然则一看到上面这些话，就无法的关掉网页或许心虚了。

由于你大部分时刻运用jquery是如许的:

你们公司的项目须要一个轮播图或许选项卡或许一个功用，你不会写，然后直接百度，正好发明一个jquery插件可以用，你看了下api文档，然后改了几个参数，功用跑通了，然后你最先检察元素，修正款式，然后你想这个等项目完了，我肯定好好研讨研讨，然后就没有然后了，一不小心两年过去了，好像自身须要的功用都能从网上找到插件，然则一点都不熟习jquery更不用说通晓了，由于你两年的时刻都没有尝试懂它，你只是插件的参数修正工，或许代码搬运工。

有人会说，不是的先生，我尝试着学了，然则

我想尝试着写一个插件，却发明不会写，看了几篇文章不知道怎么做，看到有人解读jquery源码，终究下定决心好好看看了，效果一打开源代码就懵圈了，基础看不懂，就那末摒弃了。或许一个源码解读视频好几十个，几个月过去了，我照样再等等吧。

这，像不像事情两三年照旧苦恼的你？

实在深切jquery的难点不在手艺自身，可以说jquery的架构异常清楚，入手起来异常简朴，而你进修的拦路虎是：

1.缺乏必要的基础知识铺垫，你懂不懂匿名函数自实行，jquery第一句代码你都看不邃晓为何人家那末做。
2.缺乏系列的体系化的教程，你刚尝试着去模仿他人敲的东西，效果一不小心卡住了，却不邃晓为何。
3.缺乏实时的指导，你卡了两个小时，一晚上过去了自信心也没了，这时刻假如有个人或许几句话就处理了你的题目。
4.缺乏自信心和准确的进修库体式格局。一提到源码就觉得很深邃学不会，只是大神的专利，我照样学会用吧，然后看文档成为了软件运用者而不是软件开辟者。

好，说了这么多我们就看看自身写一个jquery库，有无你想一想的那末难。

一、拔取DOM元素

jQuery的中心是经由过程种种选择器，选中DOM元素，可以用querySelectorAll要领模仿这个功用。

var $ = document.querySelectorAll.bind(document);

这里须要注重的是，querySelectorAll要领返回的是NodeList对象，它很像数组（有数字索引和length属性），但不是数组，不能运用pop、push等数组特有要领。假如有须要，可以斟酌将Nodelist对象转为数组。

myList = Array.prototype.slice.call(myNodeList);

二、DOM操纵

DOM自身就具有很雄厚的操纵要领，可以庖代jQuery供应的操纵要领。

　尾部追加DOM元素。

     // jQuery写法
　　(parent).append((child));
　　// DOM写法
　　parent.appendChild(child)

头部插进去DOM元素。

　　// jQuery写法
　　$(parent).prepend($(child));
　　// DOM写法
　　parent.insertBefore(child, parent.childNodes[0])

删除DOM元素。

　　// jQuery写法
　　$(child).remove()
　　// DOM写法
　　child.parentNode.removeChild(child)

三、事宜的监听

Element.prototype.on = Element.prototype.addEventListener;

四、类操纵

jQuery的addClass要领，用于为DOM元素增加一个class。


　　$('body').addClass('hasJS');

DOM元素自身有一个可读写的className属性，可以用来操纵class。
　

    HTML 5还供应一个classList对象
　　document.body.classList.add('hasJS');
　　document.body.classList.remove('hasJS');
　　document.body.classList.toggle('hasJS');
　　document.body.classList.contains('hasJS');

扼要的说了一下，自身写jquery库的一些手艺处理方案，哪一个东西人人看不懂呢？所以并非你不努力或许学不会，而是你进修体式格局和进修的内容不稳健，

经由过程我一上午的解说，然后下昼已可以简朴的完成一个jquery库了，然后在现实项目中不断完善和实用它，那末你手里也会有一个精致的jquery库，而且是自身写的，这个时刻你还会由于熟习最少一种JS框架或许对JS言语控制较深对着好的事情时机望而生畏吗？

给自身一个时机，只需一天，或许你的事情状况和人生会因而而转变，

微信：leolau2012（加请说明进修）

期待你的提高。

    原文作者：前端大彬哥
    原文地址: https://segmentfault.com/a/1190000009431441
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞