漫谈前端之路

绝地灬酷狼 2022-09-29 14:52 190阅读 0赞

## 前言 ##

> 前端之路何其漫漫~

说明：本篇文章原是写给学弟学妹的，但想来花的功夫确实不少，就把此篇文章当做自己的一个阶段性总结文章了，会保持长期更新。

## HTML ##

总的来说HTML并不难，甚至可以说很无脑……HTML的标签个人觉得过一遍就得，知道什么时候该用什么标签就可以了，因为在以后的开发中打交道最多的就是各种各样的标签，想不熟都难。就像现在我写这篇文章用的Markdown一样，只是几个标签的反复应用。那么html的学习就相对来说很自由了，可以跟着w3school[W3school网址][W3school]过一遍标签，网上也有很多其它网站做这个的，像[菜鸟教程][Link 1],[慕课网视频][Link 2]之类的都可以用,等熟练了就可以去国外看看一些前端的新技术，像[MDN][],[W3cschool(国际)][W3cschool]，[stackoverflow(最大的程序员问答网站)][stackoverflow]。

> HTML重点
> 
> 1.  标签，span,div分清他们的特性，哪些是块级元素，哪些是行内元素;
> 2.  语义化编程,HTML5的新元素的运用;
> 3.  按照XHTML规范写代码,XHTML简单说是一种比HTML规范更加严格的HTML;
> 4.  XML，这个和HTML实际上关系不大但长得很像，了解下即可，这是一种作为数据传输的文本形式，如今用的更多的是json传输数据，XML基本已经退出历史舞台了;

## CSS ##

一个网页，我们把它分为结构层（HTML），样式层（CSS），行为层（JavaScript）。这三门语言就构成了我们平常所见到的所有的网页。需要强调的是，包括手机端网页在内都逃脱不了这三门语言，只不过是无数的前辈为了让后来人写代码更自由一点，更爽一点，自己封装了很多函数供我们调用。比如HTML ，CSS比较有名的框架[Bootstrap][],JavaScript的[jQuery][]。Bootstrap是Twitter员工设计的现在整个github上star数最多的估计就是bootstrap了，截止改动日期已经达到了96802,相信过不了多久就会突破十万了！bootstrap呢，有人说这是专门为后端设计的框架，因为它运用起来十分的简单，将文件引入后，知道它的定义效果是什么样的就能很熟练的运用，而且支持移动端，响应式布局做的很好，这是它受欢迎的很大一部分原因~关于jquery,JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）,jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。设计理念就是写更少的代码做更多的事，因此这个库用起来还是很爽的，但同样也导致很多人会用jQuery实现某个功能却不知道原生js如何实现，个人觉得原生js还是要学深的，毕竟框架和库总是在改变，但核心——JavaScript是不会变的。  
    那么CSS该如何学习呢，就一个字，敲！等你把CSS所有的坑都踩过一遍之后，CSS也就彻底出师了。在CSS3出来之前CSS就是一个纯粹的样式表，想要什么样式，直接设置就OK，但随着CSS3的推出，整个CSS好像就被打了鸡血一样，焕发着活力。因为在一定程度上它把JavaScript的活给抢了，比如简单动画，对鼠标事件的某些触发等等，很多人说CSS是其实是设计师的工具，因为他没有变量也没有条件语句，纯粹的罗列代码，很多程序员都觉得写CSS很痛苦，事实上也的确如此，所以有了sass和less等CSS预处理器，这个让CSS写起来变得爽多了~另外，CSS3的动画也是很值得研究的。

> CSS重点
> 
> 1.  明白什么是块级元素，什么是内联元素；块级元素（div, form，h1-h6,hr,p等），内联元素（span,b,a,i,img）；
> 2.  id和class选择器的理解；
> 3.  div和CSS的配合（包括叠加，定位和浮动）；
> 4.  布局，普通，自适应，响应式，流式等布局（一点点理解吧）；
> 5.  对于这张图的理解；![bVtlKv][]；
> 6.  [less][]和[sass][]的学习；
> 7.  bootstrap学习;
> 8.  CSS3动画 @keyframes;

## JavaScript ##

首先我想让大家明白的是，这门语言很好入门，况且是在大家学了一学期C语言的前提下，但同样要明白的是作为一门编程语言，想要精通这门语言绝不是一两月那么简单的。在浏览器里面有一个叫JS引擎的东西，它是用C++写出来的，而它的作用就是渲染JavaScript代码，说的通俗点，就是让浏览器知道我们所写出来的JavaScript应该如何解析。Chrome之所以让人感觉快就是因为它自己有一个牛逼的V8引擎，这是其它四个浏览器（IE，Firefox,Opera,Safari）所没有的，这个V8引擎不论解析JavaScript还是Jquery都特别的吊，所以呈现页面也就特别的快。这里需要说一下的是，浏览器解析一个网页的顺序大体上是这样的：先加载HTML标签组成DOM树（不知道DOM是啥不要紧，学完数据结构就明白了），遇到link,script然后加载相关的CSS或是JavaScript代码，这也是为什么一般script标签写在body之后的原因，因为一旦相关的DOM没有加载完而JavaScript需要对它有操作，那浏览器就要懵逼了。  
    如果说HTML和CSS给网页穿上了一件衣服的话，那么JavaScript就是在构造网页的五脏六腑了。我们在编写代码的时候一定要记住我们是在和浏览器说话，是在和浏览器交流，你要让浏览器明白你想要呈现出的效果是什么，不然你让它猜（它的确会猜，这也是HTML代码比较自由的原因，不过还是推荐大家按照XHTML的要求写代码）,浏览器会感觉很操蛋的，那这个交流就很不成功，即使呈现出了想要的页面，以后想要优化的话就比较费力了。  
    附上几个学习地址：[慕课网视频][Link 3]；[W3School][]；我这里还有极客学院的视频有要的可以找我拷。给大家总结下JavaScript的重点吧：

> 1.  如果你认为JS就是操作DOM树，弹出个警告框那么简单的话就错了，一定要抱着谦虚的态度去学（学完HTML，CSS很容易让人产生JavaScript也很简单的错觉），当然它并没有C++那么逆天，好好学还是很容易出成绩的。
> 2.  表单验证，对于表单的提交，容错性的考虑；
> 3.  网页特效，比如我们经常看到的图片轮播，菜单导航（有一部分是纯粹的CSS代码写的）等；
> 4.  数据传输，通过Ajax我们可以在不刷新网页的前提下更新网页的部分元素哦，而且通过对于数据的操作，我们可以实现诸如瀑布流，数据交换等功能。这点可以参考QQ空间网页版看好友动态，只要你往下一直翻，就有结果呈现出来。以前我们数据传输的形式是直接把php代码写在HTML文件中，但AJAX的出现打破了这一僵局，使得前后端分离的更为彻底，因为只需要一个接口，前后端定下接口也就各干各事了。
> 5.  事件触发（鼠标点击，键盘），开发WebAPP的话得考虑手机系统API的调用，和鼠标键盘时间就不一样的了，前端的API实际上只有14w+但webapp光安卓的API就有40w+,所以webapp是个大坑，在它还没法超越原生性能之前还是不要触碰的好~；
> 6.  OOP,jaascript没有传统的类的概念，所以它的很多东西实际上都是特立独行的一套，但OOP思想才是javascript的精髓，前面操作个DOM树，页面优化啥的实际上并没有多少技术含量;刚开始可能会无从下手，相信我，每个人都是这样。先从一个小demo写起来,起码\{\}得有啊;
> 7.  json，接触了OOP,学会了AJAX那么现在就得学下json了，json是一种数据格式，在页面交互中,后端会把数据以json格式返回，前端用ajax拿到后，把这个字符串进行相应的解析,从而得到我们需要的数据。到了这一步，你就可以出去找项目了，只有实践才能不断提高自己；
> 8.  闭包，这个后期很重要，也是javascript的一大特色，简单的说，闭包就是实现了在函数外调用函数内定义的局部变量的功能；
> 9.  原型链和继承，这是个很抽象的东西，但很有用处的东西，一定要深入看才行，真的，不然真的看不懂...找个角落，带上耳机，看看闭包原型链何尝不是一种乐趣呢~;
> 10. 库和框架的学习，近几年jquery不是很受待见了，这倒不是说jquery不值得学了,只是新技术层出不穷，使得jquery的优势不再明显，这实际上是个好事，一方面说明技术不断进步，另一方面也说明前端始终散发着活力。最近几年angularjs,react，Vue都是比较火的框架，有机会可以看看，你会发现写前端顿时变成了一件享受的事情，国内的框架还有dcloud,apicloud等等,这俩国人设计出来主要的方向是webapp，所以想做app的童鞋也可以尝试下，感受下一次开发多平台调用的快感~关于webapp有兴趣的可以了解下，这里按下不表。框架建议学完jquery再看;
> 11. webpack,grunt,gulp等前端构建工具的学习和使用;
> 12. ECMAscript6学习[阮一峰的日志][Link 4];
> 13. Nodejs学习;

## 后端 ##

现在的前端并不是纯粹的前端，绝大数都已经叛变了！我们口口声声宣称着要实现前后端分离（实际上这才是开发的终极目标），但在实际开发中往往不能分离，所以基本每一个前端都会学一门后台语言，比较热门的后台语言有：PHP，Java，Python，Node；PHP运用的最为广泛，Java适合开发大型网站（什么是大型网站呢，就类似于淘宝那种满天的图片数据那种），现在世界上80%网站还是用的PHP的，所以PHP尽量了解下（这估计是你们下学期考虑的事了），Node就是js(和js的语法啥的一毛一样)，不过它多了一个模块，弥补了js的缺陷，关于模块....不知道你们理解不理解，像java有类文件，Python有import机制，PHP有require和include。现在不懂Node的前端是很尴尬的，所以以后有机会也要了解下的。Node我也还在学习中,按下不表;

> 后端重点
> 
> 1.  PHP语法简单的了解;
> 2.  PHP框架了解CI,thinkphp,laravel等等;
> 3.  SQL语句学习，这个必备，虽然现在的数据库工具十分的强大，但必要的SQL语句还得懂要不怎么用PHP代码操作数据库呢~;
> 4.  Node学习，Node发展实在太快，醉的不行，现在都6.2.0版本了~;
> 5.  PHP7.0语法了解，这个具体的不太清楚,听那些后端说加了很多新的特性~;
> 6.  其它语言推荐，也可以尝试下Java写后端的感觉，试试Python，Python在写爬虫和数据处理上效率还是很给劲的~

## 其它 ##

Photoshop,身为前端工程师Photoshop肯定是要掌握的因为很多时候设计师给的图并不是切好的，我们主要自己切图，于是乎，切图也就成了我们的必备技能，切图仔的戏称由此而来。另外，会点Photoshop也可以给自己PP图，装装逼嘛~  
     git，svn的使用，连接github啊，服务器提交代码啊，还是很方便的，这个看个人，往深了也是很有意思的。  
    很多人觉得前端工程师不需要懂算法，但事实却是各大公司的面试题里都会多多少少有算法题，这门学问很深，倒也不必深入研究，术业有专攻，能把前端一层搞好就不错了，切记眼高手低~，一些比较基础经典的算法，比如快速排序算法，堆排序算法，归并排序，选择排序算法，深度优先，广度优先...等等等，试着用javascript敲一遍成就感还是很大大滴有的~~~;  
    数据结构~有算法也就有数据结构咯~栈，队列等线性表，树，图;come on,baby!  
    网络协议，我们知道OSI七层协议：物理层，数据链路层，网络层，传输层，会话层，表示层，应用层；我们所做的都是在这层皮肤上（应用层）,接触最多的就是是HTTP协议了，协议这个玩意看不见摸不着的，很抽象，我们可以用一些抓包工具抓包像Wireshark,Fiddler等抓包工具,可以很方便抓取数据，其中wireshark各种协议通吃，也是国际上认可度很高的一款抓包工具，Fiddler一般开发者用的比较多，它可以抓取HTTPS协议，而且对于前端后端交互的数据有很好的处理，深受前端开发者的喜爱~。协议这东西看起来很无用，似乎黑客用的比较多一点~但这玩意有个好处——稳定啊，不会变，整个世界都在用的就是TCP/IP，学习成本低，也不会贬值，何不拿来耍耍~另外，很多公司面试都会问本机和服务器建立连接时的三次握手具体都发生了什么~所以协议这块还是很有必要学的；  
    操作系统...以我现在的水平说不出来...没学过，不过起码得熟悉window，Linux,Mac系统的操作吧(好像还是啥都没说，留着以后补充吧);

## 前端工具 ##

作为一个前端开发者，要有适合自己的工具做开发使用，那么使用IDE还文本是编辑器，我在这里就不给建议了，刚开始的个人倾向还是文本编辑器，因为不同于其它语言，HTML有点像语言学科，需要记，使用IDE的话不太利于记忆标签。IDE的话推荐WebStorm和atom(我现在再用)，国内有一款Hbuilder（可开发webapp，配合mui,html5plus,dcloud），我用过一段时间.....很蛋疼的IDE，界面设计的很不错，也还好用，也一直在我电脑里，但不写APP的话是不会打开的....像VS,Dreamweaver之流可以体验，要是你骨骼惊奇觉得好用也可以用....并不强求；文本编辑器呢，那不用说肯定Sublime，Sublime强大的插件支持让它如虎添翼，用着用着就会发现，实际上在插件的支持下它本身就是一个IDE，但却没有IDE启动缓慢的诟病。刚开始可以各种工具（notepad++，UEditor，Vim等等）都试一下，不过我相信最后你还是会回到Sublime的怀抱的（如果你觉得Sublime不好用，那只能说明你还不会用它）。附上学习地址：[慕课视频][Link 5]，[Sublime相关博客][Sublime]；安装的话网上教程多得是，自己百一下就行。  
    说完了开发工具，再来说下调试工具，调试工具的话，Firefox有一个 插件叫Firebug很好用，也可以使用浏览器自带的开发者工具（按F12就出来了，console的使用，XHR的使用，断点调试，基本已经足够日常开发了），如果要对网页某个元素进行操作或是了解就把鼠标放到元素下面，右键检查就OK。或是直接点击左上角的箭头移动鼠标到要检查的元素上面。调试很重要，前端前辈们在很长一段时间里调试JavaScript纯粹靠运气。所以我们是很幸运的。

## 日常学习 ##

### 书籍推荐 ###

《JavaScript高级程序设计》《JavaScript权威指南》如果你要走前端这两本书是必买的，甚至整个职业生涯有这两本书就足够了，尤其是高程深入浅出很适合新手学习。  
    《JavaScript DOM编程艺术》很通俗，适合入门；  
    《锋利的jquery》jquery入门书；  
    《PHP和MySQL web开发》这本是很多人PHP的入门书籍，经典程度不亚于高程；  
    《深入浅出nodeJS》国内最好的nodejs书籍，淘宝在职大牛朴灵著作，但这本不适合入门...入门的话推荐看下面这本  
    《Nodejs开发指南》郭家宝著作;  
    《图解HTTP》通过漫画的形式讲解HTTP协议，很通俗易懂，小日本的这本书的确不错哦~  
    《HTTP权威指南》HTTP权威书籍，O'REILLY出品必属精品~条件好的话真心推荐把O'REILLY出版的前端方面的书都买来看看;

### 自媒体平台推荐 ###

作为一个程序员，我们逛的网站肯定就有偏向性咯，要说程序员聚集地肯定是Github(感兴趣的可以了解下，这里按下不表)，国内网站做的比较好的博客平台有[CSDN][]，[博客园][Link 6]，[Segmentfault][]，[V2EX][],[MDN][MDN 1]，[掘金][Link 7]等等，经常逛逛这些网站看看大牛们的博客也是很有好处的。当然像[知乎][Link 8]，[今日头条][Link 9]等类似自媒体平台，想学也是有很多文章可以看得。微信订阅号推荐：优秀网页设计，前端开发，Web开发，差评（这个主要是增长点Web之外的互联网知识），前端大全。微博账号推荐：IT程序猿，优秀网页设计，酷勤网-程序员的那点事。大家有好的媒体平台记得分享给我啊，嘿嘿。

### 前端大牛/团队推荐 ###

前端的世界变化快，但也正因为此涌现出了一批大牛，他们对新技术的学习乐此不疲，常常自发的翻译新技术文章，解释新技术要点，成为新技术的布道者。[张鑫旭][Link 10],[阮一峰][Link 11]，[嗷嗷][Link 12]，[李成银][Link 13]，[拔持][Link 14]，[聂微东][Link 15]，[囧克斯][Link 16]，[justjavac][].....还有一些牛×的前端团队,[360的奇舞团][360]，[百度FEX][FEX]，[淘宝FED][FED],[腾讯的alloy][alloy]......这些基本就是国内前端技术的最前沿了，想学新技术或是想把一个点挖深可以多关注下这些站点~

转载：https://segmentfault.com/a/1190000004573216

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 17]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[W3school]: http://www.w3school.com.cn/html/index.asp
[Link 1]: http://qctlr.cai.swufe.edu.cn/w3c/html/index.html
[Link 2]: http://www.imooc.com/view/9
[MDN]: https://developer.mozilla.org/en-US/docs/Web/JavaScript
[W3cschool]: http://www.w3schools.com/
[stackoverflow]: http://stackoverflow.com/
[Bootstrap]: http://www.bootcss.com/
[jQuery]: http://jquery.com/
[bVtlKv]: /images/20220708/c2a1ef63afda419bb7b22f2e62ef62e1.png
[less]: http://www.1024i.com/demo/less/
[sass]: http://sass.bootcss.com/docs/sass-reference/
[Link 3]: http://www.imooc.com/view/36
[W3School]: http://www.w3school.com.cn/js/
[Link 4]: http://www.ruanyifeng.com/blog/2014/04/ecmascript_6_primer.html
[Link 5]: http://www.imooc.com/view/40
[Sublime]: http://www.imjeff.cn/blog/2313/
[CSDN]: http://www.csdn.net/
[Link 6]: http://www.cnblogs.com/
[Segmentfault]: https://segmentfault.com/
[V2EX]: http://www.v2ex.com/
[MDN 1]: https://developer.mozilla.org/zh-CN/
[Link 7]: http://gold.xitu.io/explore/frontend
[Link 8]: http://www.zhihu.com/
[Link 9]: http://toutiao.com/
[Link 10]: http://www.zhangxinxu.com/
[Link 11]: http://www.ruanyifeng.com/home.html
[Link 12]: http://www.aoao.org.cn/
[Link 13]: http://www.welefen.com/
[Link 14]: http://jayli.github.io/
[Link 15]: http://www.cnblogs.com/Darren_code/
[Link 16]: http://jiongks.name/
[justjavac]: http://justjavac.com/
[360]: http://www.75team.com/
[FEX]: http://fex.baidu.com/
[FED]: http://www.taobaofed.org/
[alloy]: http://www.alloyteam.com/
[Link 17]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220708/a2b50bf503e1441da502bdd92c56bdbd.png