文档章节

2015-2016前端体系技术图谱

ouven
 ouven
发布于 2016/01/26 12:17
字数 1290
阅读 18343
收藏 528
点赞 33
评论 43

#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

ouven

粉丝 105
博文 30
码字总数 77829
作品 0
深圳
高级程序员
加载中

评论(43)

onlymeone
onlymeone
还有很多路要走


引用来自“-悟空-”的评论

引用来自“TheStars”的评论

https://github.com/JacksonTian/fks 博主大概不知道这么个地址 Star5000 Fork2333
干的漂亮 这才是实货,博主功利心太强了。@ouven

mark
m
msay

引用来自“ouven”的评论

引用来自“阿信sxq”的评论

其实这种没什么实际用处

看你在什么公司混了,以前也是觉得没什么用,因为做业务是没有难度,而且务基本进步不了的~

引用来自“阿信sxq”的评论

我不是说哪些技术本身没有用处,(当然也不赞同,我只保留意见),我说的是这种将其大而全地整理在一起的方式没有用处,不想去认真搞的,依然不会去认真搞,而本来就想去认真搞的,自然会想尽办法去认真搞,所以说没有什么用处

引用来自“ouven”的评论

嗯嗯,是这个说法~
有些虽然想认真搞, 但是这个图给了一个很好的思路. 怎么来搞, 搞得才好.
爬墙
爬墙
看到bootstrap,就不用看下去了
ouven
ouven

引用来自“sunriders”的评论

图分辨率好低,放大了全模糊了

回头我传个大的上去
sunriders
sunriders
图分辨率好低,放大了全模糊了
悟空太多啦
悟空太多啦
你的图太小啦~13
hylent
hylent
mark
北落
北落
罗列那么多,无非是想说明前端也可以高大上。但是这不是作为一名前端人员的必备,必备知识,有个十分之一就够了。
b
bestduan
好东西,楼主好文,我们前端群有大量资料,加进来一起学习吧.群435748765
前端相关整理

整理一下最近在网上收集的前端面试相关资料,包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多,就光从知乎、前端乱炖、w3cplus 等网站就能找到很多,所以针对细节不发散,仅...

Seas0n_
2016/03/01
106
0
从20世纪70年代至今,自动驾驶汽车的发展经历了哪些历史性的变革?

雷锋网(公众号:雷锋网) AI 科技评论按:本文转载自微信公众号「学术头条」,搜索「SciTouTiao」即可关注。 当今,无人驾驶技术已经成为整个汽车产业的最新发展方向。 科研院校、汽车制造厂商...

AI科技评论
07/19
0
0
领域应用 | 中医临床知识图谱的构建与应用

本文转载自公众号:e医疗。 知识图谱是近年来知识管理和知识服务领域中出现的一项新兴技术,它为中医临床知识的关联、整合与分析提供了理想的技术手段。我们基于中医医案等临床知识源,初步建...

tgqdt3ggamdkhaslzv
2017/12/12
0
0
业界 | 作为百度AI技术的集大成者,最新升级的百度大脑3.0有何亮点?

  机器之心报道   作者:高静宜      百度大脑 3.0 技术与能力一览。      7 月 4 日,一年一度的百度 AI 开发者大会在京如期举行。   大会现场,百度不仅分享了公司在 AI 技术...

机器之心
07/05
0
0
作为百度AI技术的集大成者,最新升级的百度大脑3.0有何亮点?

     百度大脑 3.0 技术与能力一览。      7 月 4 日,一年一度的百度 AI 开发者大会在京如期举行。   大会现场,百度不仅分享了公司在 AI 技术、产品与平台等方面的研究成果与最新...

机器之心
07/04
0
0
一个前端的自我修养

今天给大家分享的主题是前端的自我成长,这是一个关于成长的话题。 很多人都有这样的感觉:听了很多技术圈子的分享,有的有深度,有的循循善诱,深入浅出,但是呢,几年下来,到底哪些用上了...

xrzs
2016/03/24
377
1
阿里发布《2015-2016中国云栖创新报告》,北上杭深广排名前5

2016年1月20日,云栖大会・上海峰会于上海科技馆举办,在大会主论坛中,阿里研究院、阿里云及ITValue联合发布《2015-2016中国云栖创新报告》。 云计算成为普惠科技,数据驱动的创业变革已经发...

小云栖
2016/01/22
1K
0
观点 | 知识图谱大牛组团来阿里,他们都聊了什么?

  AI科技评论按:本文首发于“阿里技术”,AI 科技评论获授权转载。   近日,由阿里巴巴联合中国中文信息学会语言与知识计算专委会 (KG 专委) 举办的知识图谱研讨会在杭州召开。研讨会由...

AI科技评论
2017/12/27
0
0
领域应用 | 智能导购?你只看到了阿里知识图谱冰山一角

在刚刚结束的2017第四届世界互联网大会上,评选出了年度18项代表性的领先科技成果,阿里云ET大脑就是其中之一。众所周知,融合了先进的大数据、人工智能技术的阿里云ET大脑已经在智慧城市、智...

tgqdt3ggamdkhaslzv
2017/12/09
0
0
智能导购?你只看到了阿里知识图谱冰山一角

在刚刚结束的2017第四届世界互联网大会上,评选出了年度18项代表性的领先科技成果,阿里云ET大脑就是其中之一。众所周知,融合了先进的大数据、人工智能技术的阿里云ET大脑已经在智慧城市、智...

Bmo40mqfG249H
2017/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
2
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
1
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
158
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部