烈风裘的前端技能

• 切图

  • 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篇技术文章(不是硬性的)