随着最近几年来互联网的迅猛发展和普及, web 前端工程师已经成为互联网时代软件产品研发中不可缺少的一种专业的研发角色. 总是会看到很多人问, 我现在想学习 Web 前端开发该如何下手? 学习路线是怎样的? 今天这篇文章, 来说说我自己对 Web 前端开发学习的理解, 并结合一些面试中会常问到的问题来谈谈, 如何才能在 Web 前端开发坑中, 爬的游刃有余?
一, 基础
首先前端的基础, 相信大家闭着眼睛都能知道 html+CSS+JavaScript, 但是它们的轻重缓急该如何去选择呢? 在学习优先级上 HTML> CSS> Javsscript, 之所以这么排并不是因为 JavaScript 最不重要, 而是因为 HTML 和 CSS 的学习上可以不用花太多时间, 而且 JavaScript 是前端一切学习的基础.
HTML 与 CSS 可以在一起学习, 因为 HTML 的标签只有配合 CSS 样式才能达成优美的页面效果, 没有 CSS 的页面只能是很多年前的门户网站的样子. 随着 HTML5 和 CSS3 的普及, 以及浏览器对它们的支持, 越来多的产品都选择用 HTML5 开发, HTML5 甚至可以直接作为一个前端开发方向.
学习了 HTML 后, 面对这样的问题, 应该不会被难到.
cookie,localStorage,sessionStorage 的区别;
HTML5 新特性 canvas 标签;
浏览器缓存机制, 各有什么优缺点?
如何看待 HTML5 的一些新特性?
学习了 CSS 之后, 面对这样的问题, 也应该不会被难到.
元素水平垂直居中的实现;
浏览器的几种盒模型;
行内元素与块级元素;
元素相对定位与绝对定位;
伪元素: before 与::before 差别以及用途;
学习了 JavaScript 后, 面对这样的问题, 应该不会被难到.
常见的闭包问题, 比如 for 循环内部执行输出函数;
this 关键字输出问题;
常用的事件类型;
Ajax 建立过程, 常用的状态码;
JavaScript 内存回收机制;
二, 框架
说到框架学习, 如果说 JS 框架的话, 相信很多人一定会脱口而出 jQuery, 这是很多当初进入前端开发领域一定会学习的内容, 我也不例外. 但是现在却并不会推荐把很多的时间放在学习 jQuery 上, 因为如果你深入学习之后会发现, 对于 jQuery 的使用已经变少了. 下面小编细细来说.
针对 HTML 布局上, 当然 Bootstrap 是不能少的, 我们不用把每个类都研究的很透彻, 但是对于常用的 class 一定要熟练使用.
针对字体图标库上, 推荐使用 font-awaresome, 还有某宝图标库 iconfont, 都包含了非常实用的图标. 其实重点想说的是对于前端 MVVM 框架的学习, 相信很多人都知道就是 AngularJS,vue,React.
那么针对这些新兴的框架, 我们该如何学习呢?
首先有一点, ES6 是一定要去学习的, 在 Vue2.X,AngularJS2,React 中都对 ES6 提供了原生的支持, 以后很多新的特性肯定也会使用 ES6 的语法去编写.
AngularJS
AngularJS 在由 AngularJS1 升级到 AngularJS2 以后, 完全是一个新的东西, 原来在 AngularJS1 中的 controller,service,filter 等内容在 AngularJS2 中都变成一个个的 module,component. 所以如果还没学过 AngularJS 部分内容的同学可以直接选择学习 AngularJS2. 但是需要注意的是 AngularJS2 是以 Typescript 语言编写的, 所以对 Typescript 的学习就必不可少了.
Vue
小编认为 Vue 学习是相对来说成本比较低的框架, 目前官方文档已经很详细, 关于 Vue 全家桶的内容像 Vue-resource,Vue-router,Vuex 等越来越完善, 而且在 GitHub 上开源是项目也有很多, 可以很容易掌握.
React
React 采用了 Virtual DOM 这一个很独特的概念, 提高了页面渲染的效率. 但是也是由于 Virtual DOM 的存在, 在编程方式上, React 和 Vue,AngularJS 稍有不同, 如果习惯了 Vue 开发, 可能还不太习惯 React 的开发.
在针对框架层面, 在学习之后, 应该能回答下面这些问题.
AngularJS 和 Vue 的双向数据绑定的实现;
Vuex 工作机制;
React 的 Virtual DOM 基本实现, 如何自己实现一个 Virtual DOM;
三, 算法模块化 & 组件化
前端开发已经从原来的整体化开发发展到现在的模块化开发, 甚至是组件化开发, 开发过程愈发精细, 讲求的是代码的可复用性. 以前一个页面从上到下一次编写的过程, 现在已经发展为先将页面进行拆分成模块甚至是组件, 不同的人关注不同的模块, 组件, 提高开发效率. 在模块化开发中, 不得不提到 CommonJS,AMD 和 CMD 规范, 并且有不同的实现, 比如 RequireJS. 对于模块化编程的规范已经有很多的文章有讲到, 可以认真去学习下.
四, 构建工具
前端开发是离不开构建工具的, 自己写的代码如何打包压缩, ES6 的代码如何编译成 JS,Sass,Less 代码如何编译成原生 CSS, 这些都是构建工具去完成的. 有了构建工具, 可以极大的提高我们的开发速度, 这里不得不提到的就是 gulp+Webpack.
gulp 是一种任务驱动型的构建工具, 通过管道处理数据流, 提高了数据处理速度, 而且其提供的一系列插件也很方便使用.
而 Webpack 的作用就是把所有浏览器端需要发布的静态资源做相应的准备, 比如资源的解析, 合并和打包, 它提供了强大的加载器和插件机制, 例如 vue-loader 提供了对 vue 的支持, babel-loader 提供了对 ES6 的支持. 其他的构架工具还有工程化构建的 Yeoman,Slush,FIS 等.
在学习了常用的构建工具后, 应该可以回答出下面的问题.
Gulp 和 Webpack 的不同;
Webpack 打包速度比较慢, 可能原因是什么? 有没有什么解决办法?
五, 全栈
Web 前端开发到最后就是要走全栈开发的道路了, 全栈开发以 Node.JS 作为服务端语言, 基于 Node.JS 实现的服务端框架有 Express,KOA, 目前也发展的越来越成熟. 既然讲到全栈开发, 肯定会通过服务端语言操纵数据库, 因此对于数据库的知识也肯定要掌握的.
给自己半年的时间去尽心尽力的学习 Web 前端开发, 按照上面的学习路线, 一步一步来, 扎实掌握 Web 前端发技术才是找到好工作的重要法宝!
如果大家对编程, Web 前端感兴趣, 想要了解学习, 打算深入了解这个行业的朋友, 可以加下我们的前端学习扣 qun :767273102, 不论你是学生还是想转行的朋友, 我都欢迎, 不定期分享干货, 网页制作, 网站开发, Web 全栈开发, 从 0 基础开始的的 HTML+CSS+JavaScript.jQuery,Ajax,node,angular 框架等到移动端 HTML5 的项目实战 [视频 + 工具 + 系路线图] 都有整理, 分享给小伙伴: 学习前端我们是认真的
来源: http://www.jianshu.com/p/098c3ee6330d