我的前端之路 -5 JavaScript 是魔法-优快云博客

本文链接：https://blog.youkuaiyun.com/u013716711/article/details/143317247

在这里插入图片描述

前情提要：软件实验室里新成立了两个新项目组，一组是欧阳、袁胖、小刘，二组是路申、李友、小光。小光所在的二组正式接手计算机学院官网改版项目，原来负责的师哥交接后随后外出实习。软件实验室里也热闹了许多。小光也开始投入首页轮播图的开发，同时也开始相关的技术探索。

三天后

小光了解到 XXX 学校的网站轮播的头图是用 js 写的，于是最近几天都在恶补 js 基础知识。
晚上，寝室里，小光带着耳机抱着那本 web 标准在啃，耳机里放着轻快的音乐，而小光的眼睛却没离开书本。
所谓web标准，简单来说可以分为结构（html），表现（css）和行为（JavaScript）
结构主要是有html标签组成，在页面body里面我们写入的标签都是为了页面的结构。表现即是css样式表。通过css可以让结构标签变得更具美感。行为指的是页面与用户具有一定的交互，主要是有js组成。
而小光学习的核心就是 js 的部分，小光一页一页的翻阅着，光看枯燥的文字和干涩的代码，有些难懂。一晚上小光也只是大概知道 js 可以做什么。
夜晚的大学男寝异常热闹，寝室是一个三室一厅的套件，小光所在的房间有着另外三个室友。寝室的床都在上铺，而床的下面则是书桌和柜子。三个套件的门都是打开的，能听到隔壁寝室打游戏的吵闹声。而小光的寝室里，小光坐在床上带着耳机看书，其他三个人都在各自的电脑前。
小光的四个室友分别是肖博、夜猫子、二娃和耗子。
二娃对着电脑也在学习 PS，在给女朋友 P 照片，小光学习 PS 的起因也是跟着二娃一起尝试 P 照片开始的。
夜猫子是名副其实的夜猫子，晚上总是最晚睡，上午总是不见起来，每天最重要的任务就是看修仙小说以及追漫画。
耗子喜欢打篮球，一边笑嘻嘻的凑在夜猫子旁边看着电脑上更新的最新漫画，一遍是不是的看着手机上的信息。
还有正对着 QQ 聊天的肖博，数学是班上数一数二的高手，高数成绩一直拔尖，而最让周围人佩服的是，他能同时交往不同的女朋友，虽然不可取，不过也得到了个调侃的外号，时间管理大师。
小光合上书，从床上跳下来，凑到夜猫子的旁边 “看啥呢，海贼的漫画更新了？”
说着一起融入到讨论漫画剧情的氛围中…

js 如何实现轮播图

学习东西要知道其背后原理是怎样的，知己知彼，才能举一反三。
第二天下午没有课，肖博拉着小光去自习室，寝室里要说泡图书馆时间最久的就数肖博了，要说大学课程里和数学相关的问题，就没有能难得住他的。尽管如此肖博还是经常去图书管和自习室研究，当然更多时候是约上妹子一起去。
今天下午小光依然在读《web 标准》除此之外，小光又在图书馆借到一本犀牛书《Javascript 权威指南》
小光带上二耳机，轻快的音乐继续想起，手上在一张草稿纸上写写画画，思考着技术方案。
Javascript 可以操作页面的 dom 结构，可以给元素添加样式，可以给元素加上动画样式，渐渐的，技术方案逐渐清晰。“可行” 小光心里想着，马老师的任务说不定很快就能交差。
其实早在几天前，小光就在网上搜到差不多的技术方案。但一知半解遇到问题也不知道该如何下手，所以最近几天小光一直在研究和学习，想要理解背后的原理。
钻到书里确实有效，总之已经学了个七七八八。
小光伸了伸背，看看旁边的肖博，他正在研究着教材，在一个本子上奋笔疾书。小光也拿起犀牛书继续读了起来。

jquery 更是魔法

转眼又到了周末。这天小光与李友、路申如约而至，一同踏进了软件实验室。几位师兄早已在那里，埋头调试着程序。
三人简短地交流了各自的进度，却发现项目中还有许多功能尚未完成。于是，他们立刻投入到了紧张的开发工作中。
小光开始将这一周所学的知识点付诸实践，尝试编写原生JavaScript代码。但很快，他就发现手动编写原生JS代码不仅繁琐，而且复杂难解。从获取元素、设置动画、计算轮播到计算位移，代码量越是增加，他的思路就越是混乱。
经过近两个小时的奋战，小光感到一阵崩溃，头皮发麻，感到前所未有的挫败感。
在绝望中，他打开了浏览器的搜索引擎，输入了“如何用JS简单实现轮播图？”的问题。网页上，一个排名靠前的答案吸引了他的注意——jQuery轮播组件。
要知道，你所遇到 99% 的技术问题，都有前人遇到过，并解决过。所以当你不知所措时，可以问一问搜索引擎。
原来，现成的解决方案就在眼前，他何必要费尽心思去编写复杂的原生代码。
社区里提供的这个现成组件，只需在页面上引入jQuery的JS库和slider组件的JS代码，就能用极少的代码量实现轮播效果。
小光再次被深深震撼。如果说他之前学习的JavaScript像是念诵一系列咒语来让事物动起来的魔法，那么jQuery简直就是哈利波特挥动魔杖一样简单快捷。
有一种踏破铁鞋无觅处，得来全不费功夫的即视感。这一次，不到一个小时，小光就完成了demo的编写。
当项目组的三人再次聚在一起对比进度时，小光展示的三张轮播图动画效果赢得了路申和李友的赞叹。
“这个效果太赞了！”路申笑嘻嘻地盯着屏幕，眼中满是欣赏。
李友也不禁附和：“你牛掰”
面对技术难题，如果你不知所措，不妨站在巨人的肩上看看，你的困惑，也许早有前人踩过无数遍。jQuery 又一个新的名词，深深印在小光的脑袋里。

三人组

在计算机科学与技术软件工程专业里，李友和路申是一对老乡，他们都来自山东，为人开朗豪爽。两人都是Java的忠实拥趸，对代码的热爱让他们在课堂上总是坐在一起，课后也是经常凑在一起交流经验。
李友擅长算法和数据结构，而路申对设计模式和框架有独到的见解。他们互相补充，相互学习。
在一次编程课上，兄弟俩把自己折腾的自学项目拿给马老师看，赢得了马老师的认可。
他俩和小光之前其实并不是一个小圈子的，但因为软件实验室这个契机，三个人逐渐成为了朋友。路申和李友逐渐认可小光在前端上的能力，小光也和他们俩之间的配合越来约默契。
对于现在手上的项目，单打独斗可不是明智之举，三人群策群力才是更快完成任务的捷径。
小光未来将学到的下一课，就是前后端伙伴之间的协同，很多难搞的事情，是需要有值得信赖的同伴才能做成的。

乒乓球

紧张的神经总需要松一松，换换脑子会让效率更高，忙了一上午的三人来到运动场。
乒乓球桌上，小光和路申正在激烈的对决，已经到了赛点，李友在一旁记分。
路申一记强劲的发球开局，球如离弦之箭般射向小光。小光迅速后退，用他的横板以一个完美的弧线将球抽回。球在桌上划过一道白光。路申不慌不忙，一计反手一击，球以一个弧线反弹回去。
小光紧张的盯着小球，迅速调整姿态，用力一推，球如同子弹般射出，可惜力量过大，小球飞出了台面。
“李友到你了，我正好休息一会” 小光擦着汗。
小光坐在一旁的台阶上，大口喝着矿泉水，这时一个瘦高的身影窜到小光旁边，是耗子，耗子刚从篮球场打球回来。
“这几天都难得看到你人，今天有时间出来打乒乓球” 耗子一手转着篮球，一手勾搭在小光的肩膀上。
“最近有点忙的” 小光坏笑着撞了撞耗子 “你不也忙得很，好几天找不到人”。
别人不知道，同寝室的小光可知道，最近耗子认识了一个大一学妹，每天可忙的不得了。
李友看到耗子说到：“耗子来不来，咱们双打”
耗子马上如释重负的看向李友 “好好好”