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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lestat's blog

webview调用小程序支付流程

最近在做一个叫资源树的小型商城项目,其中有一个场景需要在小程序中嵌入的web-view内向小程序发起支付请求完成支付,折腾了一天,在网上各种经验的帮助下总算搞定...

3605
来自专栏QQ会员技术团队的专栏

Vue.js前后端同构方案之准备篇—代码优化

作者简介:王鹤,高级前端工程师,隶属于腾讯SNG增值产品部。主要负责QQ个性化业务的功能开发及技术优化。业务时间喜欢折腾设计、产品,新技术、理财等。品牌「爱财记...

2018
来自专栏互联网杂技

Hybrid App开发者一定不要错过的框架和工具

最近开始给网站的移动版本做技术选型,发现了很多好玩的东西,写出来给大家分享下。 ionicFramework 我是hybrid app的忠实粉丝和大力倡导者,从...

2754
来自专栏Python中文社区

用Python实现微信接口(二)

專 欄 ❈爱撒谎的男孩,Python中文社区专栏作者 博客:https://chenjiabing666.github.io ❈ 群消息 增加了三个键值,如下...

7188
来自专栏Java学习网

13 年的 Bug 调试经验总结

编码 下面这些都是我经历过的会导致难点bug的问题: 1.事件顺序。在处理事件时,提出下列问题会很有成效:事件可以以不同的顺序到达吗?如果我们没有接收到此事件会...

3035
来自专栏java一日一条

13 年的 Bug 调试经验总结

在《Learning From Your Bugs》一文中,我写了关于我是如何追踪我所遇到的一些最有趣的bug。最近,我回顾了我所有的194个条目(从13岁开始...

842
来自专栏移动开发之家

移动端跨平台开发的深度解析

 跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,...

904
来自专栏nice_每一天

Java编程思想

《Java 编程思想》这本书赢得了全球程序员的广泛赞誉,即使是最晦涩的概念,在Bruce Eckel的文字亲和力和小而直接的编程示例面前也会化解于无形。从Jav...

902
来自专栏魏琼东

使用Lua脚本语言开发出高扩展性的系统,AgileEAS.NET SOA中间件Lua脚本引擎介绍

一、前言      AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速...

2046
来自专栏Golang语言社区

13 年的 Bug 调试经验总结

在《Learning From Your Bugs》一文中,我写了关于我是如何追踪我所遇到的一些最有趣的bug。最近,我回顾了我所有的194个条目(从13岁开始...

3036

扫码关注云+社区