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

你可能感兴趣的:(javascript)