写给郭·蝎子莱莱的前端入门

前言

第一次接触计算机的时候是在懵懵懂懂孩提时代，那时对计算机的影响是这是一个非常酷的游戏机，比之前玩过的小霸王体验都好。有了第一次的初体验，对计算机留下了很深的印象。偶然的机会，父亲给家里购买了一台在现在看来性能极差的计算机。我便一发不可收拾的坐在了电脑前玩起了各种网络游戏，依稀记得最喜欢玩的就是qq幻想这个游戏。

之后的日子里，对计算机的把玩成为我生活的一部分。

到上大学之前，我依然非常酷爱计算机游戏，高中时最喜欢的一款就是英雄联盟，无数个日日夜夜伏在电脑桌前敲敲打打。结果也是可想而知的，我来到了我做梦都没想到会来到的现在的大学–xx科技大学。

…

大学的时光是短暂的，当初的圆圆胖胖的小伙子现在也马上临近毕业了。回想在学校里这些日子，有过悲痛欲绝，也有过欢声笑语，这些都是属于我的美好的回忆。

本篇文章主要是说一些关于我的学习经历，希望能对学弟学妹们有所帮助。

前端之始

我第一次真正接触前端是在18年6月，在我最敬爱的王老师的推荐下，我加入学院一位老师的团队。
面试的时候，和我同去的一共有三名同届同学，我的专业是计算机科与技术，另外两位同学都是软件工程专业。在我的料想中，我应该是竞争不过软件工程的两位同学的，但是出乎意料的是，我与另外两位一位同学被选中了。
我所在的专业与软件工程专业有非常大的差异。在当时，我在课内学到的编程语言仅限C和JAVA两门语言，其他的都只是略微了解。
在与团队沟通过后，我与一名本校研究生负责项目的移动端架构与实现。非常不巧的是，与我组队的研究生同学是从电信学院相关专业的，而我也只是一个编程刚刚入门的小菜鸟。
在老师的指导下（其实也就是向别人打听了一下跨平台怎么实现），我们使用了apache cordova作为项目的主要开发技术。

这里有必要介绍一下cordova，它是使用html+css+javascript来构建跨屏web应用的一个框架，使用该框架我们就能编写一套代码来在多个终端运行，属于跨平台开发解决方案。该技术仅限了解，不需要具体掌握。

项目开始时，作为一个把前端三剑客都没有掌握的开发小学生，我遇到了第一个难题，如何对项目进行构建。思考良久，我凭借着对需求的理解，写出了一部分页面，在此基础上，我和周学长经过反复查找资料，最终做出了页面的主体架构。但是，大量的问题随之而来，开发android端需要调用系统的api，iOS暂且不谈，由于项目使用h5，所以没有办法直接调用系统的api，这个问题需要用到开头提过的apache cordova技术，他可以提供一些插件，使得android部分api可以供js调用。由于技术的落后和插件水平的参差不齐，我们在开发过程中多次受挫。

更令人头痛的事情到来了，主项目使用了微软的WCF作为后台服务，在这我就得吐槽一下这个所谓的WCF，能够搜索到的资料屈指可数，而且没有可以完全借鉴的实例，在其上搭建提供给移动app的web服务简直不可能（百度不到，我也不会）。后来我们果断使用了php作为移动app的后台，问题迎刃而解。后来还遇到了一个最常见的问题–前端跨域。这个问题可以让后端解决，小项目直接添加过滤器即可。

···

前端的开始到这里就讲述完毕了，这是一段悲伤的故事。
顺便说一句，这个项目后面我就没做了?，全部留给了周学长。

真正的开始

在上一个项目结束之后，偶然的机会我了解到了Vue，在此之前，我并不知道这是一个什么样的语言。简单了解之后，惊讶于他的编程思想，使得前端开发非常便捷快速，逻辑之上也更符合开发需要。因此 我便暗暗下决心要掌握这个js框架。

bilibili是一个极佳的学习网站，它包含了许多好心网友上传的学习视频，只要简单搜索一下就能找到不少相关知识（可能涉及版权，在这里建议大家不要收藏不要点赞，植树为为后人遮阳）。

18年一月，我在家中学习了Vue的基础知识，我很真诚的说，刚开始接触的时候，我真的对这个js框架感觉很蒙圈，它涉及到了很多我不曾了解和听过的概念，例如提出了组件和路由的概念（真的，那时我真的不知道这些概念），我花了良久的时间去吸收消化（好吧，其实是在刷b站）。寒假结束时，我基本学习完了Vue的基础知识，并且做了一些简单的demo。这时我爆发出了一个惊人的想法，重构之前的暑假的项目。后面想了想，这个工作量非常大，仅仅一个js文件就上千行，将其分离出来难度极高，为什么难度极高？因为那时当初什么都不懂写的，现在看上去就像一坨?，看都不想看，这就是为什么我说我爆发了一个惊人 的想法。

···

偶然的机会我又加入了王老师的团队去开发用于义工管理的义工管理系统，在此之前，王老师曾经找过我来做，可我当时就是个菜鸟，就给鸽了，缘分真是妙啊。

当时正好在学习Vue，就索性使用Vue来做前端的构建。项目需求很简单，经过思考之后，我使用了Element-UI来作为项目的UI框架，省去了造轮子的时间（自己造出来的轮子不一定好看和实用）。可是令人尴尬的是，后端的同学出了岔子，在限定的时间内没有完成接口并且已完成的借口也有多个bug，导致我这里有点怠工，一直拖到了开学之后才勉强完成。

在这里顺便推荐一个工具，在线mock，可以在后端没有给出接口的情况测试前端功能，不会影响项目的整体开发进度。（我当时就没用，因此浪费了好多时间）。

无止境的补充学习

前端学习是没有止境的，它的迭代速度之快不禁让人咂舌。短短几年时间，跨平台开发框架层出不穷，从当初的cordova到后来的react，到现在的flutter，让人眼花缭乱，还有那些其他不曾出名和广泛使用的跨平台开发框架，这种现象是后端语言无法想象的（快速迭代意味着更多的学习投资）。

学习路线

• HTML

• CSS

• JavaScript

• TypeScript

• Node.js

• Vue.js

• UI框架

  • Element-UI(Vue)
  • bootstrap(universal)
  • antDesign(all)

• react.js

• webpack

• dart(flutter前提)

• flutter

  上面列表前三项是所有基础，非常重要。其中HTML是文档的骨架，JavaScript描述了文档的行为，CSS画出了文档的细节、外貌和漂亮程度。
  那么TypeScript是什么？了解·JavaScript这门语言之后，我们就会知道，它是一个弱类型的语言。学过C/C++的同学都知道，其中的每个变量或者函数过程都需要显示声明其类型，例如：

int x;
int function(){
	//function body
}	

var a=233;
function func(x){
	//function body or statement
}

TypeScript是JavaScript的超集，他将js做了更多的处理，使得语言描述更加规范更加严格。
在多个社区中，TypeScript已经被越来越多的人推荐使用，因此掌握TS在未来是非常有竞争力的（不光我一个人这么认为）。

Node.js又是什么呢，它是一个JavaScript运行环境，使用了Google的V8引擎。这里提到Node.js是想使用其中包管理工具npm，在更高阶的前端开发中使用较多，是目前前端开发工程师必备技能。当然Node.js还有其他更重要的功能，例如可以作为服务器的搭建工具，目前比较流行的Node.jsweb服务器框架有koa2和express，有兴趣的同学可以额外了解。

Vue.js是一个渐进式的JavaScript的框架，是由国人编写的目前阶段较为流行和主流的前端开发框架，目前主要使用Vue2.x，不过马上Vue3就会到来，它兼容TypeScript语法，做出了诸多改善，相信在未来可以和react相提并论，强烈建议掌握。

为什么要介绍UI框架呢，一个网页的ui风格是及其重要的，个人是很难造出让人满意且好看的轮子的。因此大多数开发建议使用UI框架，可以大大缩短开发周期，还能使页面美观可靠，吸引更多的游客。
bootstrap是目前最为流行的ui框架，推荐指数?????，不仅仅是在Vue.js和react中使用。
Element-UI是有饿了么团队开源的ui框架，页面简洁美观大气，推荐掌握。
antDesign是由淘宝团队开发并开源使用的ui框架，提供了多个框架的ui，推荐指数????

react是我目前在学的JavaScript框架，我很惊诧于他的成熟以及多平台的兼容，例如可能同时开发android和iOS两个平台的应用，可以很方便的调用其相关平台的系统api，目前国内多数大厂均使用了react，有很好的就业前景，需求也很大，掌握级别高于Vue。

webpack是目前前端比较流行的打包工具，例如在Vue和reactCLI搭建的项目中均需要使用webpack作为其项目的打包工具。至于为什么需要打包，这里提供一个字眼JSX，读者可以自己理解，这里不再赘述。

dart和flutter是现阶段在全球极为火爆的框架，学会它你就学会了多个平台的开发技术，其高性能的表现引得越来越多的前端开发人员去学习，作为Google的重量级产品，有很强的学习潜力。

后言

学习就像是搞建筑，地基永远是最重要的，在前端学习中，HTML5+CSS+JavaScript是非常重要的，没有这个基础，就不能谈及有所建树。
在此祝愿大家学习愉快。
如果有问题可以电邮至cedarsy@outlook.com
或者联系qq534443403.