美文网首页
第2章 必会 ES6-7 语法特性与规范

第2章 必会 ES6-7 语法特性与规范

作者: 阿水日记 | 来源:发表于2018-11-20 13:36 被阅读0次

    2-1生成器函数

    1.自定义迭代器

    function myItrator(arr) {
        let index = 0
        return {
            next: () => {
                if (index < arr.length) {
                    return { value: arr[index++], done: false }
                } else {
                    return { done: true }
                }
            }
        }
    }
    
    const arr=['起床','刷牙','洗脸','吃饭']
    let it=myItrator(arr)
     console.log(it.next().value)
     console.log(it.next().value)
     console.log(it.next().value)
     console.log(it.next().value)
    

    2.使用generator 生成器函数

    //  generator 生成器
    function *myItrator(arr){
        for(let i=0;i<arr.length;i++){
            yield arr[i]  //遍历元素 用yield关键字处理元素
        }
    }
    
    const arr=['起床','刷牙','洗脸','吃饭']
    let it=myItrator(arr)
     console.log(it.next().value)
     console.log(it.next().value)
     console.log(it.next().value)
     console.log(it.next().value)
    

    下面通过co库来进一步了解generator 生成器

    2-2 co 库执行 promise 和 generator function

    image.png image.png

    2-4 异步函数 asyunc function 统一世界

    const fs = require('fs')
    // 第一阶段 回调函数
    function  readFile(cb) {
        fs.readFile('./package.json',(err,data)=>{
            if(err) return cb(err)
            cb(null,data)
        })
    }
     
    readFile((err,data)=>{
        err||console.log(JSON.parse(data).name)
    })
    
    // 第二阶段promise 
    function readFileAsyc(){
        return new Promise((resolve,reject)=>{
            fs.readFile('./package.json',(err,data)=>{
                if(err) reject(err)
                resolve(JSON.parse(data))
            }) 
        })
    }
    
    readFileAsyc().then(data=>{console.log(data.name)})
    
    // 第三阶段 co + generator + promisify
    const util=require('util')
    const co=require('co')
    co(function *(){
        let data = yield util.promisify(fs.readFile)('./package.json')
        console.log(JSON.parse(data).name)
    })
    
    // 第四节度 Async 统一世界
    let _readFile = util.promisify(fs.readFile)
    
    async function init(){
        let data = await _readFile('./package.json')
        console.log(JSON.parse(data).name)
    }
    init()
    

    2-5 借助 babel 编译 import 与 export

    //先全部加载fs然后 再拿到writeFile
    //必须等到代码运行时加载  运行时加载
    const { writeFile } = require('fs')
    
    //所以我们希望能在编译的时候就能获取到这个方法 静态加载  铜鼓import实现
    

    具体步骤如下:
    1.npm i babel-cli babel-preset-env -D
    2.新建.babelrc文件

    {
        "presets":[
            [
                "env":{
                    "targets":{
                        "node":"current"
                    }
                }
            ]
        ]
    }
    

    3.在package.json中新建dev配置

    "scripts": {
        "dev":"nodemon -w src --exec \"babel-node src --presets env",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
    

    4.全局安装 nodemon
    npm i nodemon -g

    然后就可以用import和export了


    image.png

    2-6 生产环境使用 babel 支持 es6-7

    1.新增build命令
    "build":"rimraf dist && babel src -s -D -d dist --presets env",
    (其中 rimraf dist 是指每次build的时候清空dist目录 npm i rimraf -D)
    2.新增babel支持es6-7
    npm install -S babel-plugin-transform-runtime babel-runtime --registry=https://registry.npm.taobao.org
    3.在babelrc中配置

    {
        "presets":[
            [
                "env":{
                    "targets":{
                        "node":"current"
                    }
                }
            ]
        ],
        "plugins":[
            [
                "transform-runtime",{
                    "polyfill":false,
                    "regenerator":true
                }
            ]
        ]
    }
    

    相关文章

      网友评论

          本文标题:第2章 必会 ES6-7 语法特性与规范

          本文链接:https://www.haomeiwen.com/subject/cahtqqtx.html