比较全面的前端技能树 —— 你需要学到什么?

语言基础

JavaScript:
作用域链、闭包、运行时上下文、this
原型链、继承
NodeJS基础和常用API

CSS:
选择器
浏览器兼容性及常见的hack处理
CSS布局的方式和原理(盒子模型、BFC、IFC等等)
CSS 3,如animation、gradient、等等

HTML:
语义化标签

进阶

JavaScript:
异步控制(Promise、ES6 generator、Async)
模块化的开发方式(AMD、CMD、KMD等等)
JavaScript解释器的一些相关知识
异步IO实现
垃圾回收
事件队列
常用框架使用及其原理

jQuery:基于选择器的框架,但个人认为不能叫框架,应该算工具库,因为不具备模块加载机制,其中源码很适合阅读钻研
AngularJS/Avalon等MVVM框架:着重理解MVVM模式本身的理念和双向绑定的实现,如何解耦
underscore:优秀的工具库,方便的理解常用工具代码片段的实现
polymer/React: 组件化开发,面向未来,理解组件化开发的原理
CSS和HTML:主要是CSS3的特性和HTML5的特性,以及浏览器处理的流程和绘制原理

DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程
解析HTML、CSS、JavaScript时造成的阻塞
HTML5相关
SVG及矢量图原理
Canvas开发及动画原理(帧动画)
Video和Audio
flex box布局方式
icon fonts的使用

常用NodeJs的package:
koa
express
underscore
async
gulp
grunt
connect
request

一些理念:
响应式Web
优雅降级、渐进增强
don`t make me think
网页可用性、可访问性、其中的意义
SEO搜索引擎优化,了解搜索引擎的原理
SPA的好处和问题

性能优化:
减少请求数量(sprite、combo)
善用缓存(application cache、http缓存、CDN、localstorage、sessionstorage,备忘录模式)
减少选择器消耗(从右到左),减少DOM操作(DOM和JavaScript解释器的分离)
CSS的回流与重绘

项目

版本管理:(首推Git,用过Git都不会想用SVN了)
Git:本地版本管理的机制
SVN:远程中心的版本管理机制
自动化构建:主要就是less、模板、coffee等的预处理以及对代码压缩和合并
Gulp:基于流构建,速度快、模块质量好
Grunt:独立任务构建,速度慢,配置蛋疼,灵活性高
预处理和模板引擎
less:语法简单,但功能有限
jade、ejs、velocity等模板引擎,各有各的长处
coffee:python工程师最爱,我没用过
环境搭建:主要是将线上代码映射到本地,并在本地启动一个demo服务器,至于模拟数据的mock,见仁见智了
本地代理:ihosts
自动化测试:在业务较为稳定的情况下,可以通过自动化测试来减少测试的事件,但需求较多的时候,维护测试用例的成本会很高,可能用自动化测试会起到反效果
jasmine
mocha
生态系统
npm
bower
spm
搭建一个属于自己的博客
git pages
hexo
jekyll
未来

Web Componets:面向未来的组件化开发方式
HTML模板
Shadow DOM
Custom Elements
HTML Import
移动端Native开发:这也是需要了解的,以后前端工程师会经常地和webview打交道,也要了解native开发
其他

有些东西不是考敲码就能弄好的,我参与实习的时候感受到了很多,这些是我遇到的也是我感觉自己做的不好的地方

对于业务的思考:我个人这方面非常欠缺,所以放在最前面,在敲码前要多思考业务
交流和沟通能力:这个非常重要,前端同时需要与项目经理、产品、交互、后台打交道,沟通不善会导致很多无用功,延缓项目
知识管理、时间管理:input和output的平衡,output是最好的input。如何做好分享,参与社区,做好交流,作好记录
对新技术的渴望,以及敢于尝试

(0)

相关推荐

  • 为什么 Web 开发人员需要学习一个 JavaScript 框架?

    原文链接 可能当我们结束本文时,一个新的 Javascript 框架已经在某处启动了.但这确实不在我们的控制范围内.因此,我们应该简单地继续我们所拥有的.至少,由于免责声明,我们可以确定我们不是在发明 ...

  • Angular、React 和 Vue 三大框架,Web 开发该如何选择?

    终端研发部 1周前 前言 随着社交媒体和用户生成内容的爆炸式增长,互联网正在向更好的方向发展.为了跟上时代发展的步伐,提供更好的交互性,开发人员开始构建库和框架来简化交互式站点的构建.2006 年,J ...

  • [周汇总] 前端面试每日3+1(周汇总2019.07.28)

    <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每日3+1题,以面试题来驱动学习,每天进步一点! 让努力成为一种习惯,让奋斗成为一种享受! 相信 坚 ...

  • 刘雯太会穿了!不愧是走在潮流前端的女人,学着穿轻松凹出超模感

    刘雯作为时尚界的顶级模特,拥有超多资源的她是时尚界的宠儿,刘雯如今在超模界的地位无可撼动,走出国门走向世界舞台的她,在娱乐圈中积攒了大量的人脉,拥有一米八大长腿的刘雯,除了T台上的造型,刘雯私底下的私 ...

  • 自学网络安全,最应该先学的五大技能树是什么?(附学习路线图)

    前言: 近几年网络安全事件频发,国家对于互联网信息安全和互联网舆情的重视程度不断提升有关,全球网络安全岗位缺口达500万,中国约100万,产业人才需求逐年增加,网络安全行业的相关岗位成为炙手可热的职业 ...

  • 想学HTML该从何入手?web前端HTML终极指南

    学HTML从哪入手? 自学的话,首先要理解html的作用.html,hypertext markup language,超文本标记语言,用来展示网页中的内容.同时 HTML 也是我们学习前端开发的基础 ...

  • 学了web前端竟然因为没有经验找不到工作?这太搞笑了吧

    好烦啊,学了web前端找不到工作,都要有经验的,怎么办啊? 我觉得吧,其实真正的技术是不怕没钱赚的,也不怕没有工作的,主要是因为你的技术没有很好的展示出来,如果你想要找web前段工作,那么至少你在网上 ...

  • 你究竟可以从生信技能树学到多少

    上一期是: 生信故事会之中年大妈的自我救赎 下面是yiran的分享 今天在整理电脑的时候,看到很多以前的PPT,word以及.R的代码,打开的瞬间,很多记忆都回到脑海中,其实也没有很久,可能三年或者两 ...

  • 大前端知识体系整理(一)——各级别工程师的技能树

    前言 本文为笔者回顾前端开发历程的一份总结和梳理,是对自己走过的路进行的复盘.想要总结出一些普适的规律,一是用来自己反思和规划未来,二是为后来人做一些力所能及的帮助.本文虽是作者原创,但肯定也看过其他 ...

  • 可能你也怀疑,5G时代下,学web前端培训会有什么影响?

    5G时代已经成为了大家讨论的热点话题,除此之外5G还能带动自动驾驶.物联网.车联网.工业互联网.人工智能.智能家居.智慧城市等行业,将会飞速发展.5G对IT行业的影响是首当其冲的,那么对于Web前端开 ...

  • 零基础如何学web前端开发?

    那么零基础如何学web前端开发?现在人们的生活都离不开互联网,各大行业也纷纷向互联网方向发展.关注前端的人也越来越多,有的是对前端技术网站开发感兴趣,还有的是羡慕其前端开发人员的高薪资,许多大学生也因 ...

  • 学web前端好找工作吗 就业方向有哪些

    web前端开发工程师已成为当下炙手可热的岗位之一,大中型企业对前端开发人才的需求量与日俱增,所以学完web前端还是比较好找工作的. 1web前端就业方向 1.web前端工程师:web前端工程师是最基本 ...