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

更新时间:2018-09-19 10:16:53点击次数:324次

微信小程序开发流程

初始化

  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 
      				
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
    • 配置文件

      • 项目配置 
        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 = ...; ... }
        						
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
    • 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 
        						
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
    • 默认值 
      解构赋值允许指定默认值 

      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" ]
      				
      • 1
      • 2
      • 3
      • 4
      • 5
  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;
          } // ... };
      				
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
    • 实现私有方法的三种思路 
      • 在命名上加以区别
      • 索性将私有方法移出模块,模块内部的所有方法都是对外可见
      • 利用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!"
        						
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
    • 在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中 
      • 如若不在方括号中,属性的键名就是字符串,而非代表的symbol值 

        // ES6 增强对象写法 
        let obj = { 
        [s](arg) { ... } 
        }; 
    • Symbol 作为属性名,以 Symbol 值作为名称的属性,不会被常规方法遍历得到 
      • Object.getOwnPropertySymbols方法才可以,本质上来讲也不是私有属性,只是看起来像(鸭子模型,看起来像鸭子它就是鸭子)

小结

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

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息