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

1. 微信小程序开发流程

   初始化

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