首页 > 行业动态 > 正文

最全前端初学者入门路线
2017-01-10 15:01:52   来源:   评论:0 点击:

入门在我理解下的基础知识,就是我们可以写一些基本的样式,并能对页面的元素进行操作。举例来说,就是我们用Spring和JSP写了一个博客,然
入门
 
 
在我理解下的基础知识,就是我们可以写一些基本的样式,并能对页面的元素进行操作。举例
 
来说,就是我们用Spring和JSP写了一个博客,然后我们可以用jQuery来对页面进行一些简单的
 
操作,并可以调用一些API。因此,我们需要基本的HTML / CSS知识。只是要写好CSS并不是一
 
件简单的事,这需要很多实战经验。随后,我们还需要有JavaScript的经验,要不怎么做前端
 
呢?
 
同时,我们还需要对DOM有一些基础的了解,才能做一些基本的操作,如修改颜色等等。在
 
这种情况下,最简单的方案就是使用jQuery这样的工具。不过,如果可以自己操作DOM是再好不
 
过的了。
 
 
 
 
 
中级篇
 
 
中级篇就更有意思了,现在我们就需要对页面进行更复杂的操作。Ajax和JSON这两个技能是必
 
须的,当我们要动态的改变页面的元素时,我们就需要从远程获取最新的数据结果。并且我们
 
也需要提交表单到服务器,RESTful就是必须要学会的技能。未来我们还需要Fetch API,
 
ReactiveX这些技能。
 
除此我们还需要掌握好HTML的语义化,像DIV / CSS这也会必须会的技能
 
,我们应该还会使用模板引擎和SCSS / SASS。而这个层面来说,我们开始使用Node.js来完成
 
前端的构建等等的一系列动作,这时候必须学会使用命令行这类工具。并且,在这时候我们已
 
经开始构建单页面应用了。
 
 
 
 
 
高级篇
 
 
JavaScript是一门易上手的语言,也充满了相当多的糟粕的用法。几年前人们使用
 
CoffeeScript编成成JavaScript来编写更好的前端代码,现在人们有了ES6、TypeScript和
 
WebPack来做这些事。尽管现在浏览器支持不完善,但是他们是未来。同样的还有某些CSS3的特
 
性,其对于某些浏览器来说也是不支持的。而这些都是基于语言本来说的,要写好代码,我们
 
还需要掌握面向对象编程、函数式编程、MVC / MVVM / MV*这些概念。作为一合格的工程师,
 
我们还需要把握好安全性(如跨域),做好 授权(如HTTP Basic、JWT等等)。
 
 
 
工程化
 
 
这个标题好像是放错了,这部分的内容主要都是自动构建的内容。首先,我们需要有基本的构
 
建工具,无论你是使用gulp、grunt,还是只使用npm,这都不重要。重要的是,你可以自动化
 
的完成构建的工具,编译、静态代码分析(JSLint、CSS Lint、TSLint)、对代码质量进行分
 
析(如Code Climate,可以帮你检测出代码中的Bad Smell)、运行代码中的测试,并生成测试
 
覆盖率的报告等等。这一切都需要你有一个自动构建的工作流。
 
 
兼容性
 
 
虽然我们离兼容IE6的时代已越来越远了,但是我们仍然有相当多的兼容性工作要做。基本的兼
 
容性测试就是跨浏览器的测试,即Chrome,IE,Firefox,Safari等等。除此还有在不同的操作
 
系统上对同一浏览器的测试,某些情况下可能表现不一致。如不同操作系统的字体大小,可能
 
会导致一些细微的问题。
 
而随着移动设备的流行,我们还需要考虑下不同Android版本下的浏览
 
器内核的表现不致,有时候还要一下不成器的Windows Phone。除此,还有同一个浏览器的不同
 
版本问题,常见于IE。。
 
 
 
前端特定
 
 
除了正常的编码之外,前端还有一些比较有意思的东西,如CSS3和JavaScript动画。使用Web字
 
体,可惜这个不太适合汉字使用。还有Icon字体,毕竟这种字体是矢量的。不过Icon字体还有
 
一些问题,如浏览器对其的抗锯齿优化,还有一个痛是你得准备四种不同类型的字体文件。因
 
此,产生了一种东西SVG Sprite,在以前这就是CSS Sprite,只是CSS Sprite不能缩放。最后
 
,我们还需要掌握一些基本的图形和图表框架的使用。
 
 
软件工程
 
 
这一点上和大部分语言的项目一样,我们需要使用版本管理软件,如git、svn,又或者是一些
 
内部的工具。总之你肯定要有一个,而不是 2016.07.31.zip这种文件。然后,你还需要一些依
 
赖管理工具,对于那些使用Webpack、Browserify来将代码编写成前端代码的项目来说,npm还
 
是挺好用的。不过就个人来说,对于传统的项目来说我总觉得bower有些难用。我们还需要模块
 
化我们的源码文件,才能使其他人更容易开始项目。
 
 
 
调试
 
 
作为一个工程师来说,调试是必备的技能。大部分浏览器都自带有调试工具,他们都不错——
 
如果你使用过的话。在调试的过程中,直接用Console就可以输出值、计算值等等。如果你的项
 
目在构建的过程中有一些问题,你就需要debugger这一行代码了。
 
在一些调用远程API的项目里
 
,我们还需要一些更复杂的工具,即抓包工具。在调试移动设备时,像Wireshark、Charles这
 
一类的工具,就可以让我们看到是否有一些异常的请求。当然在这个时候,还有一个不错的工
 
具就是像Chrome自带的远程设备调试。对于移动网站来说,还要有Responsive视图。
 
 
测试
 
 
我遇到的很多前端工程师都是不写测试的,于是我便把它单独地抽了出现。对于一个前端项目
 
来说,正常情况下,我们要有单元测试、功能测试,还有要一些UI测试来验证页面间是否可以
 
跳转。对于依赖于第三方服务的应用来说,还要有一个Mock的服务来方便我们测试。如果是前
 
后端分离的项目,我们还需要有集成测试。
 
 
 
 
 
性能与优化
 
 
要对Web应用进行性能优化,可能不是一件容易的事,有时候我们还知道哪些地方可以优化。这
 
时候人们就可以使用Yahoo的YSlow,或者我最喜欢的Google PageSpeed来检测页面的一些问题
 
,如有没有开启GZip、有没有压缩、合并、Minify JS代码等等。
 
我们还应该借助于NetWork这
 
一类的工具,查看页面加载时,一些比较漫的资源文件,并对其进行优化。在一些情况下,我
 
们还需要借助如Chrome的Timline、Profiel等工具来查看可以优化的地方。
 
 
 
设计
 
 
前端工程师还需要具备基本的UI技能。多数情况下拿到的只是一张图,如果是一个完整的页面
 
,我们就需要快速分割页面布局。而依赖于不同的页面布局,如响应式、网格、FlexBox布局也
 
会有不同的设计。而有些时候,我们就需要自己规划,制作一个基本的线框图(Wireframe)等
 
等。
 
 
 
 
SEO
 
 
如果以搜索引擎作为流量来源,我们还需要考虑页面的内容,除非你用的是竞争排名。像
 
Sitemap可能就不是我们考虑的内容,而我们还要考虑很多点。首先,我们需要保证页面的内容
 
是对于搜索引擎是可见的,并且对应的页面还要有基本的Title、Description和Keyword。然后
 
在一些关键的字体,如栏目标题等等可以用H2之类的大字的地方就不要放过。同时在页面设计
 
的过程中,我们还需要考虑一些内部链接的建设。
 
它即可以提供页面的可见度,又可以提高排
 
名。最后,如果你是面向的是Google等支持结构化数据的搜索引擎,你还需要考虑一下
 
MicroData / MicroFormat这一类东西。



文章转自知乎



1000集前端课程视频下载大纲:http://www.icketang.com/2016/ickt_state_1028/31.html
 
本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/

相关热词搜索:前端 初学者 路线

上一篇:30个CSS3选择器的应用
下一篇:前端学习清除浮动专题

分享到: 收藏