2015-2016前端体系技术图谱
博客专区 > ouven 的博客 > 博客详情
2015-2016前端体系技术图谱
ouven 发表于2年前
2015-2016前端体系技术图谱
  • 发表于 2年前
  • 阅读 18136
  • 收藏 527
  • 点赞 33
  • 评论 43

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 2015-2016前端体系技术图谱

#2015-2016前端架构体系技术

进入github查看大图

点击查看完整版

一、框架与组件

 **bootstrap等UI框架设计与实现

  • 伸缩布局:grid网格布局

  • 基础UI样式:元素reset、按钮、图片、菜单、表单

  • 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告

  • 响应式布局:布局、结构、样式、媒体、javascript响应式

  • 第三方插件:插件管理

 **jQuery、zepto使用原理以及插件开发

  • 支持amd、cmd、全局变量的模块化封装

  • $.fn.method = function(){}

 **mvc/mvvm框架原理设计,vue/angular/avalon等

  • directive设计:html、text、class、html、attr、repeat、ref,可扩展

  • filter设计:bool、upperCase、lowerCase,可扩展

  • 表达式设计:if-else等实现

  • viewmodel结构设计:例如数据,元素,方法的挂载与作用域

  • 数据更变检测:函数触发,脏数据检测、对象hijacking

 **polymer/angular2思想与设计思路

  • import技术

  • template和script引入方式

  • css样式命名空间隔离

  • 简单复用第三方库

 **reactjs原理与使用

  • virtual dom单向数据绑定

  • js执行语法方式

  • UI由状态控制

......

二、构建生态

 **grunt/gulp开发环境任务编写

  • 文件处理插件:html、scss、js、image、font、其它

  • 优化插件:雪碧图、图片压缩、iconfont构建

  • 发布替换插件

  • 打包、压缩包插件:组件自动分析

  • 白名单配置

  • 自定义插件编写

......

三、开发技巧与调试

 **fiddler加willow基础组合调试

  • 常见配置与分析

  • 结合浏览器调试

 **werien、vorlonjs远程调试,chrome inspect  **代码自动化检查fecs

......

四、html、css与重构

 **jpeg、webp、apng、bpg图片

  • 编码原理

  • 特点与优劣势

  • 适用场景

 **iconfont使用与实现原理

  • 自动打包构建方法

  • iconfont兼容性写法

  • fonthello、fontawesome、icomoon.io、iconfont.cn线上工具

 **页面响应式设计

  • layout布局响应式

  • html结构响应式

  • css样式响应式

  • image媒体响应式

  • javascript响应式

  • media query与平台判断

 **css重置

  • reset

  • nomalize

  • neat

 **sass/compass/less/postcss常用语法与使用

  • 常用语法功能

  • 组件化UI设计管理

  • 构建工具实现方案

  • 雪碧图自动合成

  • iconfont自动接入等等

 **media query与常见页面尺寸了解

  • 媒体类型引入和媒体特性引入

  • device-width适应

  • retina屏幕适应

 **em,rem原理与实现

 **code4ui、code4app、初页、maka等

  • 前端dom操作即使刷新前端页面

  • 根据dom操作生成组件config配置保存到db

  • 根据config配置使用r.js或webpack打包

  • 发布打包后输出文件

 **css3动画

 **css网格布局

  • susy

  • Responsive Grid System

  • Fluid 960 Grid(adaptjs)

  • Simple Grid

 **搜索引擎与前端SEO

  • tdk优化

  • 页面内容优化

  • 唯一的H1标题

  • img设置alt属性

  • nofollow

  • url优化

  • 统一链接

  • 301跳转

  • canonical

  • robot优化

  • robots.txt

  • meta robots

  • sitemap

  • SEO工具

  • 各种站长工具等

 **浏览器缓存种类,resources,webSQL,indexDB, localstorage,cookie,app cache,cache storage

  • store.js、cookie.js

 **UI框架

  • bootstrap、jqwidgets、semantic ui、amaze ui

  • 微信手Q ui: frozenui、weui、blend ui

  • extjs、echart图表ui

......

五、native/hybrid/桌面开发

 **ionic移动开发方案

  • 运行架构

  • hybrid混合开发

  • cordova交互

  • 离线包更新

  • 性能瓶颈

 **nativescript移动开发方案

 **react Native移动开发方案

  • 运行架构:js引擎

  • 性能缺陷与内存泄露

  • 更新机制

  • 使用场景

 **android/ios原生开发与框架

  • java

  • oc、swift

  • web与native交互

  • 屏幕旋转

  • 摇一摇

  • 录像,拍照,选取本地图片

  • 打电话,发短信

  • 电池电量

  • 地理位置

  • 日期选择

  • 开启硬件加速

 **桌面应用开发

  • nodewebkit

  • 网易Hex

  • pomelo(游戏服务器框架)

  • react desktop

  • appjs:appjs.com

......

六、前端/H5优化(另一个图已给出)

 **yslow、pagespeed

 **移动web性能优化

  • 单页面及路由实现

  • 业内著名站点案例分析

......

七、全栈/全端开发

 **express/node club + mongodb、thinkjs等框架

 **cdn与dns

  • 动态域名加速

  • cdn原理与cdn combo

......

八、研究实验

 **WebAssembly、webTRC、typescript

 **Material design规范的前端框架

  • 交互动效库

 **AMP-HTML规范

  • 使用受限HTML以及缓存技术来提高移动网络中静态内容的性能

  • 添加自定义的元素代替禁用掉的元素:amp-audio, amp-img、amp-video等

......

九、数据分析与监控

 **badjs数据上报

 **点击热力图clickHeat、heatMap

 **js加载失败优化方案

  • 失败重发机制

  • 加载源域名服务器文件

  • https反劫持

 **百度alog数据上报

......

十、其它软技能

 **axure 原型图设计

 **xmind脑图管理

 **效率管理

 **can i use、github

 **知识管理/总结分享

 **产品思维与技能

......

十一、前端技术网站

 **技术社区

  • alloyteam、html5基地

  • W3 help

 **行业会议

  • segmentfault会议

  • 深js、杭js

  • GMIC(全球移动互联网大会)

  • D2、webrebuild

  • infoQ内容、Qcon、velocity

完整版地址 http://ouvens.github.io/frontend-resource/2016/01/26/front-end-learning-list.html

共有 人打赏支持
ouven
粉丝 81
博文 26
码字总数 65384
评论 (43)
jay_
meteo 应该是meteor?
ouven

引用来自“jay_”的评论

meteo 应该是meteor?

thx
Kewin_Wang
卧槽 这图片被处理了吗 放大看不清啊
ouven

引用来自“Kewin_Wang”的评论

卧槽 这图片被处理了吗 放大看不清啊

是的,去githu上看哈,2000 star后开放源文件
Rwing
其实吧 这种文章没啥用。。。。罗列些名词而已。。。。。
秋风暮霞惋红曲
路过
ouven

引用来自“Rwing”的评论

其实吧 这种文章没啥用。。。。罗列些名词而已。。。。。

并非名词,原理也有列举,另外我博客里有文章,深入理解的有40%了,2016年打算写完,就看你愿不愿自己学了
ningyb

引用来自“Rwing”的评论

其实吧 这种文章没啥用。。。。罗列些名词而已。。。。。
确实如此
TheStars
https://github.com/JacksonTian/fks 博主大概不知道这么个地址 Star5000 Fork2333
vingzhang
干得好
ouven

引用来自“TheStars”的评论

https://github.com/JacksonTian/fks 博主大概不知道这么个地址 Star5000 Fork2333

前年就见过,含了写基础和规范,而且偏旧了,所以有些基础的我都没列~这里较多涉及较新和基本原理实现说明、甚至自动业务系统的设计原理,不是简单的罗列~结合我的博客看更好
ouven

引用来自“TheStars”的评论

https://github.com/JacksonTian/fks 博主大概不知道这么个地址 Star5000 Fork2333
而且有较多地方加了基本实现原理的概括,实际项目实践总结归纳,并不全是天马行空的写概念,当然还有一半没时间去研究展开,后面有时间也会博客里去补齐板块~
jinyb
sjskkzw
ouven

引用来自“TheStars”的评论

https://github.com/JacksonTian/fks 博主大概不知道这么个地址 Star5000 Fork2333
又过了下,那里大约50%都已经out了
Rwing

引用来自“ouvenzhang”的评论

引用来自“Rwing”的评论

其实吧 这种文章没啥用。。。。罗列些名词而已。。。。。

并非名词,原理也有列举,另外我博客里有文章,深入理解的有40%了,2016年打算写完,就看你愿不愿自己学了
嗯,确实,之前没看你的博客,看后发现博主干货挺多的,推荐一下
艾边成
@各位,原图在这里,不知道博主哪里转载的
http://static.open-open.com/news/uploadImg/20160126/20160126133319_831.png
艾边成

引用来自“Kewin_Wang”的评论

卧槽 这图片被处理了吗 放大看不清啊
原图 http://static.open-open.com/news/uploadImg/20160126/20160126133319_831.png
ouven

引用来自“艾边成”的评论

@各位,原图在这里,不知道博主哪里转载的
http://static.open-open.com/news/uploadImg/20160126/20160126133319_831.png
这个图的水印是我加的,幸好源文件没放上去,这么快就被人传到网上去了
__loong

引用来自“TheStars”的评论

https://github.com/JacksonTian/fks 博主大概不知道这么个地址 Star5000 Fork2333
啪啪啪~
ouven

引用来自“艾边成”的评论

@各位,原图在这里,不知道博主哪里转载的
http://static.open-open.com/news/uploadImg/20160126/20160126133319_831.png
这图花了大半年,你竟然说我是转载的,我xmind文件到处的,源文件在我这~
×
ouven
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: