WEB开发者-分享WEB开发知识,让开发变得更简单!

轻轻松松自己写一个jquery库-要不要试试?

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语言掌握较深对着好的工作机会望而却步吗?

给自己一个机会,只要一天,也许你的工作状态和人生会因此而改变,

本文链接:https://www.webkfz.com/WEBkF/JavaScript/10837.html

版权声明:站内所有文章皆来自网络转载,只供分享作用,不代表本站的观点!

发表评论 共有 0 条评论)

联系客服
网站客服 业务合作 QQ
1244305267
公众号
公众号
公众号
返回顶部