相关技术

最近整理了部分前端的技术点,可以做为初学这部分的童靴的一个学习清单:

  • vue-router:Vue.js 官方路由。与 Vue.js 内核深度整合,让构建单页应用易如反掌。
  • vue-resource:通过 XMLHttpRequest 或 JSONP 发起请求并处理响应。
  • vue-loader:webpack下loader插件 可以把.vue文件 输出成组件
  • vuex:一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构。它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护、可理解的状态。
  • vue-devtools:Chrome 开发者工具扩展,用于调试 Vue.js 应用。
  • ES6:包含了许多新的语言特性,它们将使JS变得更加强大,更富表现力。
  • webpack:一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
  • gulp:一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
  • less/sass/stylus: CSS 预处理器框架。
  • PostCSS: 提供了一个解析器,它能够将 CSS 解析成抽象语法树(AST)。
  • Flexbox: 让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)
  • Media Query: 包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。

Vue

  • 1.实例属性、方法与代理属性、方法 vue实例生命周期
  • 2.插值/绑定表达式/指令(带有前缀 v- 的特性)/缩写
  • 3.计算属性 vs $watch
  • 4.样式绑定:对象与数组语法的用法 对象语法与计算属性的结合
  • 5.条件渲染与列表渲染
  • 6.方法与事件处理器 修饰符
  • 7.表单控件绑定
  • 8.过渡
  • 9.组件:数据传递/父子通信/分发内容
  • 10.计算属性的缓存依赖
  • 11.自定义指令/过滤器
    Tips: 受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除,可以使用 $set(key, value) 实例方法

Vue-router

  • 1.嵌套路由配置方法
  • 2.路由对象属性以及路由的匹配规则
  • 3.一些常见路由配置项的含义
  • 4.配合webpack异步载入组件
  • 5.切换钩子函数
  • 6.路由API

Vue-Resource(官方现在推荐axios)

    1. 用法
      1
      2
      3
      4
      5
      6
      7
      get(url, [options])
      head(url, [options])
      delete(url, [options])
      jsonp(url, [options])
      post(url, [body], [options])
      put(url, [body], [options])
      patch(url, [body], [options])
  • 2.拦截器

  • 3.结合ES6

Vue-loader

  • 1.vue组件编写细则

    1
    <template>, <script> and <style>
  • 2.配置文件的规则:预处理器、Loader高级配置、导出CSS文件等

  • 3.带域的CSS、PostCSS 和 Autoprefixer、热加载
  • 4.生产环境、静态检查、测试等工作流

Vuex

  • 1.一些常用的概念,State/Getters/Mutations/Actions
  • 2.vuex工作流
    用户在组件中的输入操作触发 action 调用;
    Actions 通过分发 mutations 来修改 store 实例的状态;
    Store 实例的状态变化反过来又通过 getters 被组件获知。
  • 3.一些特定规则:
    应用 state 存在于单个对象中;
    只有 mutation handlers 可以改变 state;
    Mutations 必须是同步的,它们做的应该仅仅是改变 state;
    所有类似数据获取的异步操作细节都应封装在 actions 里面。
    组件通过 getters 从 store 中获取 state,并通过调用 actions 来改变 state。

ES6

  • 1.let、const 与var的区别
  • 2.箭头函数
  • 3.模板字符串以及增加的新的API(Math + Number + String + Array + Object APIs)
  • 4.表达式解构
  • 5.原生的模块化
  • 6.类
  • 7.对象字面量扩展语法
  • 8.参数:默认参数、不定参数 和 重命名参数的处理
  • 9.新的数据结构:Set 和 WeakSet Map 和 WeakMap
  • 10.生成器(Generator)
  • 11.Promise
  • 12.Symbol
  • 13.Proxy

webpack

  • 1.了解CommonJS和AMD的相关规范
  • 2.代码分割及相关配置:单文件入口和多文件入口
  • 3.内嵌样式表
  • 4.去重、分块、压缩、混淆等相关配置及优化

gulp

  • 1.关于package.json配置文件
  • 2.处理gulp任务的常用相关命令
  • 3.熟悉gulpfile.js文件
  • 4.掌握gulp API: src/dest/task/watch
  • 5.编写自定义任务,熟悉常用插件

Sass

  • 1.安装和编译
  • 2.变量
  • 3.嵌套
  • 4.文件导入
  • 5.混合
  • 6.继承
  • 7.运算符
  • 8.函数
  • 9.条件判断及循环

Flexbox

  • 1.水平主轴和垂直交叉轴
  • 2.常用的6个容器属性

    1
    2
    3
    4
    5
    6
    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content
  • 3.常用的6个项目属性

    1
    2
    3
    4
    5
    6
    order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self
  • 4.常见布局:骰子布局、网格布局、圣杯布局、输入框布局、悬挂式布局、固定底栏、流式布局

媒体查询

  • 1.媒体类型(media type)/媒体特性(media feature)的表达式
  • 2.逻辑运算符:and,逗号,not ,only
  • 3.一些常用方法:排他(exclusive)覆盖(overriding)移动端优先(Mobile first)PC优先(desktop first)
移动开发者/技术爱好者/喜欢开源与分享,欢迎关注微信公众号MobDevGroup,移动开发在线分享:MobDevGroup,我会长期分享干货在上面。