烈风裘的前端技能

切图

• Photoshop
  • 切图插件Cutterman
  • 标注插件Parker
  • 图片压缩ImageOptim/HummingBird

HTML

• HTML 基础
  • 基础标签技术性
  • 语义化及SEO
  • meta属性 - 移动端viewport设置
  • 块级元素/行内元素
• HTML 媒体
• HTML API
  • SSE/Web Works/拖放(了解)
  • 存储/定位/全屏/页面状态(是否当前浏览)
• 全局属性
  • contenteditable（是否允许编辑）
  • draggable（是否允许拖动）
  • drapzone（被拖动的目标被拖放到元素中会发生什么）
  • hidden
  • spellcheck（拼写检查）
  • id/class/title/dir/tabindex/lang
• HTML 图形 - SVG/Canvas(了解)
• 快速编辑 Emmet

CSS

• CSS选择器(了解写法对浏览器性能的开销)

• CSS核心点

  • 浮动与清除浮动
  • 居中
  • 透明滤镜
  • 布局
    • display/position
    • float
    • flex
    • overflow

• 基础样式

  • 背景/边框/文本/字体/连接/表格/轮廓/3D
  • 用户界面
    • 盒模型
  • transform 变换
    • transform（二维变换，平移、缩放、扭曲）
    • transforn-origin
  • transition 过度
    • transition-property：检索或设置对象中的参与过渡的属性[all]
    • transition-duration
    • transition-timing-function
    • transition-delay
  • animation 动画

• CSS引用方式

  • 外部样式表
  • 内部样式表
  • 内联样式表

• 常用布局 (了解HTML书写顺序对网页渲染性能的影响)

• CSS hack (常用的有总结)

• CSS前处理器

  • Scss

• CSS后处理器

  • PostCss/Autoprefix

• BEM命名法(面向对象的CSS)

JavaScript

• Js引用方式
  • 外部/内联
• Script异步加载方式
  • async - 异步下载, 下载完毕后立即执行
  • defer - 异步下载, 等待DOM解析完毕触发DOMContentLoaded事件之前
• 数据类型
  • 数值类型
  • 引用类型
    • Object
    • Array 基础属性/方法
    • Date 基础属性/方法
    • RegExp 常用实例
    • String 基础属性/方法
  • 类型检测 - typeof/instance of/Object类型拆分
  • 深浅拷贝 (总结过)
• 函数
  • 理解this
  • 作用于及作用域链
  • 类 (原生写法/ES6)
  • call/apply - 绑定this的
  • 闭包
  • 模块化 - ES6
• Math - 常用方法
• DOM
  • DOM基础操作(需要不定时查看文档)
  • 事件绑定/代理/队列
• BOM
  • 获取浏览器参数
• JSON - 对象的深拷贝
• 其他
  • setTimeout 异步
  • setInternal/requestAnimationFrame
  • try/catch
• ES6 (掌握及使用了70%)
• 加密库 - md5/base64/sha1

综合

• 页面性能优化及调试(雅虎军规)
• 缓存处理
• 调试
  • PC: Chrome
  • Mobile: 微信开发者工具/二维码/
  • 线上抓包: Charles
  • API测试: Postman
• 跨域处理

前端自动化

• Gulp(很熟悉, 能直接写任务)
• Webpack(知道原理, 正在使用)
• 依赖管理: npm/cnpm/yarn

IDE: WebStorm/Brackets

版本管理

• SVN(CornerStone)
• Git(SourceTree/GitHub Desktop)

框架

• jQuery/zepto
• Angular1.x/Vue2.x
• Leaflet
• IONIC1.x
• Lodash/Moment/...

软技能

• 写作能力(正在锻炼)
• 协作(能一个人做完的不交给两个人做)
• 沟通(需要磨合)

想学的

• Weex
• IONIC 2.x
• Nodejs - 达到熟练的程度

今年计划

• Vimo: 基于Vue2.x的移动端Hybrid框架(完成40%)
• Vida: 基于Vue2.x的桌面框架(未开进行)
• 深入了解Nodejs的中途岛模式(未开进行)
• 发布50篇技术文章(不是硬性的)