2015-2016前端架构体系技术精简版

本文作者：IMWeb ouven 原文出处：IMWeb社区 未经同意，禁止转载

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动画

• transform
• animation
• transiction
• 3D加速与动画加速
• 动画库
• 缓动函数速查表： http://www.xuanfengge.com/easeing/easeing/
• Ceaser： http://xuanfengge.com/easeing/ceaser/
• cubic-bezier：http://cubic-bezier.com/

 **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

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