前端知识体系

前端知识

  • 前言:这是一篇介绍前端知识体系的文章,如果介绍不全还请斧正
    下面这张前端指示图是从github搬移而来
    image

图片的形式具有诸多的不便。缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,但是这张图上的技术仍然活跃在前端的各个角落。

切页面

可能我们最熟悉的就是切页面,也就是我们最常说的"切片"。什么是切片呢,简单来说切片就是将一张静态的设计图还原成一个静态的HTML文件。切片通常会带有一些页面静态效果,比如选项卡、轮播等,静态的HTML通常不会与后端交互,简单来说就是不会使用ajax或者置标等功能。
从图中来看切页面需要HTML、CSS、PhotoShop等技能,PS用来测量、获取图标,HTML用来完成页面骨架,CSS用来绘制页面的皮肤。其实图中少了Javascript,因为无论多简单的效果都需要JS的支持。

编程语言

对于前端来说最重要的编程语言就是HTML、CSS和JavaScript。目前很火热的VUE、Angular、React等都是JS的扩展框架;ES6是JS的下一代语言标准;TypeScript是JS的超集这些是目前来说对于JS比较火的概念。对于CSS来说老牌的BootStrap是其最著名的框架,CSS3是CSS的新一代标准,LESS和SASS是对于CSS的预处理语言,它们可以让写CSS有种写“程序”的感觉。H5是HTML的下一代标准,也是对于HTML最火的概念。
前端的发展越来越面向对象,新的框架、标准引入了很多后端的理念(类、泛型等等),图中显示的NodeJS是在服务端运行的JavaScript。

测试工具

截止目前,个人觉得最好的调试工具就是浏览器的控制台。上图中罗列到的工具使用过Firebug(一个火狐浏览器的扩展程序,目前已经停止更新,已经被Firefox 内置工具 devtools替代)和IETester(用来模拟低版本IE浏览器兼容问题的软件),其他罗列的调试工具由于没有用到过这里也不做介绍

开发工具

无论是前端还是后端,很多的开发工具都是通用的。Notepad++、Ecplise、IntelliJ IDEA这些后端常用的工具都能用来开发前端。对于前端来说,现在流行的开发工具有:轻量的sublime Text、功能强大的webStrom、写代码和弹钢琴一样的Atom、微软的Visual Studio等等(还有很多没用过的编辑工具就不在这里介绍了)。电脑好的推荐使用webStrom,电脑一般的使用其他三个都可以。。

前端标准/规范

在上文中已经提到了前端规范有ES6、HTML5和CSS3都是前端最新的标准,W3C提供了前端的HTML/XHTML、 CSS、XML、DOMBOM等标准。单独把DOM和BOM附上介绍链接是因为它们两与ECMASCRIPT共同组成了JS。
Commonjs是为了前端缺少模块化的概念而应运而生的,它希望js可以在任何地方运行,不只是浏览器中;AMD规范也是为javascript模块化加载而生的。
HTTP标准这里就不多做介绍了。

性能

性能这块了解的不是很多,只用过HttpWatch抓过包,可能是因为目前做的系统并发量并不高,代码里没有死循环或者堆栈溢出就能满足需求了,这里就不多做介绍了。

编程知识储备

上文中说过,现在前端框架发展借鉴了越来越多的后端技术,越来越面向对象,图中的设计模式与编程模式等由于本人水平也无法很清楚的解释,这里就不多做介绍了。

浏览器兼容性

浏览器兼容性也是一个困扰前端工程师的问题,所谓兼容性问题大部分都是出在页面样式上,而出现问题最多的也是IE浏览器。这里有些段子都是调侃IE浏览器的。因为现在很多的机关单位电脑老旧,而他们又是我们主要服务的客户,那么调试浏览器兼容性也是一个必备的技能。对于低版本的IE浏览器可以用CSS的Hack来解决,对于其他浏览器有针对其内核的特殊写法

前端框架/库

现在的前端框架/库如雨后春笋般欣欣向荣,上图中的大部分框架都是以前的老牌框架,现在也不是很推荐再去接触(除了jQuery)。现在比较火的框架已经在上文中提到了,VUE、Angular、React等,发展历程也从MVC模式发展到MVVM模式。。。

剩下的内容

上图中剩下的几大部分,我个人不能很好地介绍,这些东西如果有兴趣大家可以自己去查询一下。前端在这几年发展的十分迅速,很多程序员也想转行做前端,对于前端来说入门很简单,做到优秀却很难,前端是一个比较"细"的工种。上文是基于个人理解做出的一点解释,希望能有所帮助。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,294评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,780评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,001评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,593评论 1 289
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,687评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,679评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,667评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,426评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,872评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,180评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,346评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,019评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,658评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,268评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,495评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,275评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,207评论 2 352

推荐阅读更多精彩内容