欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-07 10:34:48
...

  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