怎样从前端小白到前端大神?

小云朵


这个问题等你往深的接触并有自己一定理解后你可能跟我一样会对整个前端有新的认知。

过硬的基础

这个问题可能不止一遍又一遍的强调,熟练运用( html, css, js)这并不意味着基础就扎实了。你是否会遇到这样的问题: 吐槽自己的代码为什么没有长进?吐槽新的框架出来了,可我连之前的版本还没掌握?尝试着翻阅源码奈何根本读不下去或者只是一知半解?因为这些问题都是发生在我的身上,我尝试着去扩展自己的技术栈,然后小程序也会,web app也懂,服务端也略知一二,浏览器源码...... 这些看似有着丰富经验的回答,但实则暴露了一个问题,哪一个都是只知皮毛。后来我沉下心来,重拾基础,慢慢的我代码可以做性能优化,源码似乎也看进去了。然后我发现基础往深的钻研,我似乎发现新大陆一样。接下来给大家分享一下我的学习经历; 依旧是基础,并逐步展开。

html

重新把 html 知识点并且重点是 html5 的新特性再过一遍,对常用的语义化标签,新增的 canvas,本地存储,xhr,dom,bom api进行总结归纳。然后尝试着封装一些 api,对原始 xhr 进行整理等等,对于这些知识不需要刻意去弄懂底层实现,只要能够熟练掌握并可以根据业务做到良好的扩展就可以了。

另外,这个权威指南看不下去就算了,找其中的重难点知识进行梳理。

css

我不知道以后会不会出现 css4 ,但就目前而掌握 css3 已经相当不错,在前端领域对样式掌握到手到擒来绝非易事(并不是熟练应用各种类库,插件)。我当初学习样式始于兴趣,终于瓶颈,不过目前依旧在学习嘛。学习样式最快而且最容易上手的是拿现有模板去实现交互效果。举例,以实现天猫静态页为依剧,不管你用什么前端框架做辅助( jquery),一定要手写,既锻炼了html,也能快速css,css3。如果遇到难点,查阅资料(科学上网),或者控制台查其网页实现,然后就往深层挖掘。

然后就是这本书,很有必要读一读。

JavaScript

前端的核心,从web端,到移动端,到客户端,再到服务器,都可以看到js的身影。你抱怨自己编程能力没有长进,抱怨源码读不懂都和不理解它有密切关系。js 的类型和语法、作用域和闭包、this 和对象原型链、异步和性能、es6 新特性( promise、proxy)。这些是从基础到进阶,每一块都必须深入掌握,越深越好。

不管你是否造轮子,也或者你正忙于业务开发,真正阻碍你前进的便是这些大山,去掌握它们,锻炼自己的内功。

不管你之前读的是犀牛书,红宝书还是官方web文档mdn,我现在只想推荐你认真读一下这个系列。

前面说了一大堆关于基础的问题,前端也不止这些但不管怎么说基础必须过关。

类库及框架

有了基础,相信你应该不惧目前的各类框架,mvc也好,mvp也罢,mvvm( vue, angular, react )也都ok。保持你的深度,然后扩展技术栈,这个时候你不用担心翻看源码的问题,相信你能快速掌握。

掌握node

以前端代表服务器开发node为主,你不会陌生,有了基础什么事件循环( even loop)、任务队列、异步回调,掌握它们只是时间问题,当前这些是 js 引擎和浏览器机制相关的问题。然后就是至少熟悉一种后端语言,数据库知识( sql, nosql)。

web api

掌握浏览器的渲染机制,缓存机制,安全问题,性能优化,网络io,同源策略等等

算法和设计模式

最后补充一个就是它,提示自己的逻辑思维和编程能力,算法必不可少。掌握设计模式通样可以便于我们对代码的掌握,以及性能优化,重构等工作。

没事了也刷刷题训练一下思维能力。

写在最后,说了这么多还是想重点提及的是基础。我也一直在学习,希望能够同大家一起进步。


KKXIAO


阶段一(HTML&CSS基础)

HTML:html语义化,html常用标签及其语义,html5新特性和新增常用标签

CSS:css语法、选择器,定位、浮动、盒子模型,css3新增选择器及其属性,变形、过滤、动画

Photoshop:基本应用,把psd图转为静态页面

规范:样式和结构分离,制作符合w3c标准的页面,添加注释,规范缩进

阶段二(前端基本功)

javaScript基础:基本语法,算法基础,常用数据结构,编程规范,内置对象常用方法,对象的创建方式和this用法

javaScript API:BOM操作,DOM操作,特效实现、页面布局,事件处理、浏览器兼容处理

JavaScript高级:面向对象思想,对象,json、闭包、原型、作用域链,函数的调用方式及this指向,正则表达式、面向对象理论及实践

jqurey:优势,选择器,动画,链式编程及隐式迭代,插件使用和制作

模块化:概念,演变过程,设计规范,RequireJS

阶段三(移动WEB开发初级)

HTML5&CSS3:多媒体、音频视频播放,DOM扩展、自定义属性、HTML5data,地理定位、文件读取、元素拖拽、多媒体加强,应用缓存、历史管理、web存储,CSS3选择器、新属性、2d转换、3d转换、动画

canvas:绘图命令、非零环绕原则,绘制形状、文字、图片,平移、缩放、旋转变换,ECharts数据报表

Git:命令行、基本使用、对比文件差异、还原、合并,回滚操作、远程仓库操作、GitHub创建远程仓库,github创建远程私有仓库、github和gitlab的区别,生成ssh key并添加到github和gitlab上

阶段四(移动WEB开发高级)

bootstrap:概述,栅格系统,排版、表格、表单、按钮,图片、响应式工具,组件使用

移动web:移动端屏幕介绍、浏览器介绍、操作系统介绍,chrome模拟调试、真机调试、viewport、rem、主流适配方案,手势封装、mvc、常用指令、双向绑定和单项绑定

angularjs:模块、控制器、$watch、自定义指令、jqLite、过滤器,格式化过滤、数据过滤、服务$http、前端路由、http拦截器

css框架:通过bootstrap完成响应式开发,了解常见的移动端UI框架


程序猿来如此


入门

在我理解下的基础知识,就是我们可以写一些基本的样式,并能对页面的元素进行操作。举例来说,就是我们用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)、对