前端之路何其漫漫~
说明:本篇文章原是写给学弟学妹的,但想来花的功夫确实不少,就把此篇文章当做自己的一个阶段性总结文章了,会保持长期更新。
总的来说HTML并不难,甚至可以说很无脑……HTML的标签个人觉得过一遍就得,知道什么时候该用什么标签就可以了,因为在以后的开发中打交道最多的就是各种各样的标签,想不熟都难。就像现在我写这篇文章用的Markdown一样,只是几个标签的反复应用。那么html的学习就相对来说很自由了,可以跟着w3schoolW3school网址过一遍标签,网上也有很多其它网站做这个的,像菜鸟教程,慕课网视频之类的都可以用,等熟练了就可以去国外看看一些前端的新技术,像MDN,W3cschool(国际),stackoverflow(最大的程序员问答网站)。
HTML重点
一个网页,我们把它分为结构层(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重点
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的要求写代码),浏览器会感觉很操蛋的,那这个交流就很不成功,即使呈现出了想要的页面,以后想要优化的话就比较费力了。 附上几个学习地址:慕课网视频;W3School;我这里还有极客学院的视频有要的可以找我拷。给大家总结下JavaScript的重点吧:
现在的前端并不是纯粹的前端,绝大数都已经叛变了!我们口口声声宣称着要实现前后端分离(实际上这才是开发的终极目标),但在实际开发中往往不能分离,所以基本每一个前端都会学一门后台语言,比较热门的后台语言有:PHP,Java,Python,Node;PHP运用的最为广泛,Java适合开发大型网站(什么是大型网站呢,就类似于淘宝那种满天的图片数据那种),现在世界上80%网站还是用的PHP的,所以PHP尽量了解下(这估计是你们下学期考虑的事了),Node就是js(和js的语法啥的一毛一样),不过它多了一个模块,弥补了js的缺陷,关于模块....不知道你们理解不理解,像java有类文件,Python有import机制,PHP有require和include。现在不懂Node的前端是很尴尬的,所以以后有机会也要了解下的。Node我也还在学习中,按下不表;
后端重点
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不好用,那只能说明你还不会用它)。附上学习地址:慕课视频,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出版的前端方面的书都买来看看;