小程序开发之wepy中的ES6知识

微信小程序开发流程

初始化
1. 前置条件
  - 服务端完成相应的接口开发
  - 申请小程序个人帐号
  - PostMan 和 API
2. 安装微信开者工具
  - 插件模式
  - 快速启动模板模式
  - 空项目初始化
    - 自动生成 project.config.json
3. 小程序基础环境
  - 初始化WePY
    - 原生格局
      - 配置 json
      - 模板 wxml
      - 样式 wxss
      - 交互逻辑 js
  - 安装WePY
```
// 全局安装或更新WePY命令行工具
npm install wepy-cli -g
// 查看项目模板
wepy list
// 初始化项目(默认模板开启了promise,async,function等)
wepy init standard miapp
// 进入项目目录，安装依赖
npm install
// 开启实时编译
wepy build --watch
```
  - 配置文件
    - 项目配置
      project.config.json内含程序入口
      - "miniprogramRoot": "./dist"
    - wepy编译配置
      - wepy.config.js
    - 开发工具勾选不验证ssL之类
4. wepy目录结构
  - src 代码编写目录
  - src/app.wpy 框架项目的入口文件
  - src/pages 小程序页面
  - dist 小程序运行代码目录（该目录由WePY的build指令自动编译生成)
5. 小程序开发流程
  - wepy框架在编辑器内编码
  - 开发工具负责调试
预备知识
1. 语法提案流程
  - Stage 0 - Strawman 展示阶段
  - Stage 1 - Proposal（征求意见阶段）
  - Stage 2 - Draft（草案阶段）
  - Stage 3 - Candidate（候选人阶段）
  - Stage 4 - Finished（定案阶段）
2. 转码器
  - babel 将ES6转码为ES5
  - .babelrc
    设置转码规则和插件
  - babel-register 模块
    改写require命令，为它加上一个钩子，对require命令加载的文件实时转码
  - babel-core 模块
    使用Babel 的 API 进行转码
  - babel-polyfill
    转换新的 JavaScript 句法（syntax），而不转换新的 API
  - Traceur 转码器
3. let 与 const
  - let变量
    - 只在let命令所在的代码块（{}）内有效。
    - for循环
      - 设置循环变量的那部分是一个父作用域
      - 循环体内部是一个单独的子作用域
    - 不存在变量提升
    - 暂时性死区（temporal dead zone，简称 TDZ）
      - let 变量凡在声明之前使用会报错
    - 同一块域内，不允许重复声明
  - 块级作用域存在的意义
    - 防止内层变量可能会覆盖外层变量
    - 避免用来计数的循环变量泄露为全局变量
    - 块级作用域的出现，使立即执行函数表达式（IIFE）不再必要
```
    // IIFE 写法
    (function () {
    var tmp = ...;
    ...
    }());

    // 块级作用域写法
    {
    let tmp = ...;
    ...
    }
```
  - const 常量
    - 声明一个只读的常量
    - 只在声明所在的块级作用域内有效
    - 只能在声明的位置后面使用
    - 不可重复声明
  - const 常量本质
    - 该变量指向的那个内存地址所保存的数据不得改动
      - 数值、字符串、布尔值简单数据，等同于常量
      - 复合类型的数据对象和数组，const只能保证这个指针是指向另一个固定的地址
4. 解构赋值
  - 数组
    - 模式匹配
      let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4]
    - 嵌套赋值
    - 数据结构具有 Iterator 接口
```
    function* fibs() {
        let a = 0;
        let b = 1;
        while (true) {
            yield a;
            [a, b] = [b, a + b];
        }
    }

    let [first, second, third, fourth, fifth, sixth] = fibs();
    sixth // 5
```
  - 默认值
    解构赋值允许指定默认值
    let [foo = true] = []; foo // true
  - 对象
    - 对象的属性没有次序，变量必须与属性同名，才能取到正确的值
      let { bar, foo } = { foo: "aaa", bar: "bbb" } foo // "aaa" bar // "bbb"
    - 对象解构赋值模式VS变量区分
5. 数组的扩展
  - 扩展运算符…
    将一个数组转为用逗号分隔的参数序列
```
    console.log(...[1, 2, 3])
    // 1 2 3

    [...'hello']
    // [ "h", "e", "l", "l", "o" ]
```
6. ES6 其它
  - Proxy 修改某些操作的默认行为
  - Reflect 拿到语言内部的方法
  - Promise pending fulfilled rejected
  - Map和Set数据
    - Map 普通对象的键只能是字符串，但map可以是值：值形式
    - Set 不允许重复项，支持集合运算（类似redis）
  - Generator函数返回一个遍历器对象
7. ES6类的私有性
  - 私有方法(ES6不提供，通过变通方法模拟实现)
    利用symbol值的唯一性
```
    const bar = Symbol('bar');
    const snaf = Symbol('snaf');

    export default class myClass{

    // 公有方法
    foo(baz) {
        this[bar](baz);
    }

    // 私有方法
    [bar](baz) {
        return this[snaf] = baz;
    }

    // ...
    };
```
  - 实现私有方法的三种思路
    - 在命名上加以区别
    - 索性将私有方法移出模块，模块内部的所有方法都是对外可见
    - 利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值
  - 私有属性提案
    - 在属性名之前加#, @已经被留给了 Decorator
  - 箭头函数中的this会与定义域的父级绑定
8. Symbol
  - 表示独一无二的值，是值而非对象，不能添加属性。
  - 作为属性名的Symbol
    - 防止某一键不小心被改写或覆盖
    - Symbol 值作为对象属性名时，不能用点运算符
```
    let mySymbol = Symbol();
    // 第一种写法
    let a = {};
    a[mySymbol] = 'Hello!';

    // 第二种写法
    let a = {
        [mySymbol]: 'Hello!'
    };

    // 第三种写法
    let a = {};
    Object.defineProperty(a, mySymbol, { value: 'Hello!' });

    // 以上写法都得到同样结果
    a[mySymbol] // "Hello!"

    const mySymbol = Symbol();
    const a = {};

    a.mySymbol = 'Hello!';
    a[mySymbol] // undefined
    a['mySymbol'] //  "Hello!"
```
  - 在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中
    - 如若不在方括号中，属性的键名就是字符串，而非代表的symbol值
      // ES6 增强对象写法 let obj = { [s](arg) { ... } };
  - Symbol 作为属性名，以 Symbol 值作为名称的属性，不会被常规方法遍历得到
    - Object.getOwnPropertySymbols方法才可以，本质上来讲也不是私有属性，只是看起来像（鸭子模型，看起来像鸭子它就是鸭子）
小结

js中有许多似是而非的东西，明明严格意义上来讲，没这玩意儿。但为了装，他总是模仿，让不知底细的你信以为真，用的时候报错，还莫名奇妙。

小程序开发之wepy中的ES6知识

微信小程序开发流程

初始化

预备知识

小结

猜你喜欢