上任鹅城

const { getOptions } = require('loader-utils')
const { validate } = require('schema-utils')
const { transform} = require('@babel/core')
const { promisify } = require('util')

// 将回调函数转换为基于promise的函数
const transformAsync = promisify(transform)
// 校验配置
const babelSchema = require('./schemas/babelSchema.js')

/*
 * Loader通常是一个函数
 * source: 对于第一个执行的loader为资源的内容，非第一个执行的loader为上一个loader的执行结果
 *
module.exports = function (source) {
    // 获取loader的配置
    const options = getOptions(this)
    // 校验配置：成功时往下运行，失败时停止运行报出错误
    validate(babelSchema, options, {
        name: 'babelLoader'
    })
    // 异步返回结果
    const callBack = this.async()
    // 调用transform方法进行转码并返回
    transformAsync(source, options)
        .then(({ code }) => callBack(null, code))
        .catch(err => {callBack(err)})
}

module.exports = {
    type: 'object',
    properties: {
        presets: {
            type: 'array'
        }
    },
    // 是否可以有未定义的附加属性
    addtionalProperty: true
}

...
module: {
   rules: [ 
     { 
       test: /\.js$/, 
       use: { 
         loader: 'babelParse.js', 
         // 配置参数
         options: { 
           presets: ['@babel/preset-env'] 
         } 
       }
     }
   ]
 },
 resolveLoader: {
   // 寻找loader所在位置
   modules: ['node_modules', path.resolve(__dirname, 'loaders/')]
 },
 ...

const express = require('express')
const path = require('path')
const proxy = require('http-proxy-middleware')

const app = express()

// 解决跨域：开发环境前端服务通过proxy代理转发请求。
// 跨域问题是由于浏览器的同源策略，在node环境没有跨域问题。
app.use('*', proxy({ target: 'http://xx.xx.xx.xx:xxxx', changeOrigin: true }));

function onError(error) {
    if (error.syscall !== 'listen') {
      throw error;
    }
  
    var bind = typeof port === 'string'
      ? 'Pipe ' + port
      : 'Port ' + port;
  
    // handle specific listen errors with friendly messages
    switch (error.code) {
      case 'EACCES':
        console.error(bind + ' requires elevated privileges');
        process.exit(1);
        break;
      case 'EADDRINUSE':
        console.error(bind + ' is already in use');
        process.exit(1);
        break;
      default:
        throw error;
    }
}

function onListening() {
    var addr = app.address();
    var bind = typeof addr === 'string'
      ? 'pipe ' + addr
      : 'port ' + addr.port;
    console.log('Listening on ' + bind);
}

app.on('error', onError);
app.on('listening', onListening);
// 开发环境前端请求自己启动的服务端口，在本地express服务中做代理转发
app.listen(8080)

const express = require('express')
// superagent是一个轻量的Ajax API，服务器端（Node.js）客户端（浏览器端）均可使用
const superagent = require('superagent')
// nodejs的抓取页面模块，实现了核心jQuery的子集
const cheerio = require('cheerio')
const app = express()

app.get('/', (req, res, next) => {
    superagent.get('https://www.zhipin.com/wuhan/')
        .end((err, data) => {
            // 错误优先处理
            if (err) return next(err)
            // 将获取到dom绑定到$上，后面可以直接用$以jQuery的方式操作dom
            const $ = cheerio.load(data.text);
            const conpanys = []
            $('.conpany-text').each((index, element) => {
                conpanys.push($(element).find('h4').text())
            });
            res.send(conpanys)
        })
})

app.listen('9999', () => {
    console.log('http://localhost:9999');
})

class Promise {
    constructor (execute) {
        /**
         *  Promise实例状态值（3种）: 1.pending; 2.fulfilled; 3.rejected。
         *  状态改变方式（2种）：1.pending -> fulfilled; 2.pending -> fulfilled。
         *  注意：一旦状态改变，不可逆。
         */
        this.PromiseState = 'pending'
        // Promise实例结果: 存储成功时返回的终值（eventual value）和失败时返回的拒因（reason）。
        this.PromiseResult = null
        /**
         * 应用场景：当Promise执行函数为异步时，存储then方法的回调函数，
         * 等异步执行完后，根据状态在resolve或reject函数中在去执行。
         * 因为每一个Promise实例可以有多个then方法，所以存储回调的对象属性值是一个数组。
         * 因为异步执行的结果未知，所以成功回调和失败回调都要存储起来，
         * 数组的每一项都是一个对象：{ onResolve: 成功回调, onReject: 失败回调 }。
         */
        this.callBacks = []

        /**
         * 使用方式：在Promise执行函数中，将成功的值作为参数调用resolve函数
         * 执行函数里的内置方法，主要作用有三个：
         * 1.改变Promise实例状态： pending -> fulfilled；
         * 2.改变Promise实例结果： this.PromiseState = data；
         * 3.实现Promise的状态不可逆，具体做法是只当状态为pending时才改变状态和结果。
         */
        const resolve = (data) => {
            if (this.PromiseState !== 'pending') return
            this.PromiseState = 'fulfilled'
            this.PromiseResult = data
            // Promise的then方法是异步执行的，回调函数执行放在定时器里面来实现。
            setTimeout(() => { this.callBacks.forEach(item => item.onResolve())}, 0)
        }

        /**
         * 使用方式：在Promise执行函数中，将失败的原因作为参数调用reject函数
         * 执行函数里的内置方法，主要作用有三个：
         * 1.改变Promise实例状态： pending -> rejected；
         * 2.改变Promise实例结果： this.PromiseState = data；
         * 3.实现Promise的状态不可逆，具体做法是只当状态为pending时才改变状态和结果。
         */
        const reject = (data) => {
            if (this.PromiseState !== 'pending') return
            this.PromiseState = 'rejected'
            this.PromiseResult = data
            // Promise的then方法是异步执行的，回调函数执行放在定时器里面来实现。
            setTimeout(() => { this.callBacks.forEach(item => item.onReject())}, 0)
        }

        // 用try...catch...来处理执行函数运行抛出错误
        try {
            execute(resolve, reject)
        } catch (e) {
            reject(e)
        }
    }

    then (onResolve, onReject) {
        /**
         * then方法主要做的事情有四个：
         * 1.接收两个函数作为参数，分别是成功回调和失败回调；
         * 2.返回一个新的Promise实例，可以链式调用；
         * 3.当前面的Promise状态改变时，then方法根据其最终状态，选择特定的回调函数执行；
         * 4.回调函数返回值不同，分三种情况：
         *   *抛出异常，状态为失败，结果为失败返回的拒因；
         *   *返回结果不是Promise实例，状态为成功，结果为成功返回的终值；
         *   *返回结果是Promise实例，返回为这个Promise的结果。
         */

        /**
         * then方法支持参数可以不传，当成功回调不传的时候，默认赋值为一个函数，
         * 这个函数做的事情就是把上一个Promise的返回结果，传递给下一个then方法。
         */
        onResolve = typeof onResolve === 'function' ? onResolve : res => res

         /**
         * then方法支持参数可以不传，当失败回调不传的时候，默认赋值为一个函数，
         * 这个函数做的事情就是抛出错误原因，实现异常穿透。
         */
        onReject = typeof onReject === 'function' ? onReject : err => { throw err } 
        
        return new Promise((resolve, reject) => {
            /**
             * 根据回调函数返回的结果，执行相应内置函数来改变then函数返回的Promise实例状态和结果值
             */
            const handle = (cbType) => {
                // 使用try...catch...来捕获成功回调函数执行中的异常
                try {
                    // 执行成功回调，获取then方法成功回调的返回结果。
                    const res = cbType(this.PromiseResult)
                    if (res instanceof Promise) {
                        res.then(resolve, reject)
                    } else {
                        resolve(res)
                    }
                } catch (e) {
                    reject(e)
                }
            }

            switch (this.PromiseState) {
                // Promise实例的执行函数是同步的，状态为fulfilled。
                case 'fulfilled':
                    // Promise的then方法是异步执行的，回调函数执行放在定时器里面来实现。
                    setTimeout(() => { handle(onResolve) })
                    break;
                // Promise实例的执行函数是同步的，状态为rejected。
                case 'rejected':
                    // Promise的then方法是异步执行的，回调函数执行放在定时器里面来实现。
                    setTimeout(() => { handle(onReject) })
                    break;
                // Promise实例的执行函数是异步的，状态为pending。
                default:
                    // 往回调里面添加成功回调和失败回调
                    this.callBacks.push({
                        /**
                         * 等上一个Promise状态改变时，来根据key执行相对应的value函数
                         */
                        onResolve: () => handle(onResolve),
                        onReject: () => handle(onReject)
                    })
            }
        })
    }

    catch (onReject) {
        // 只需要调用then方法，成功回调传空即可
        return this.then(null, onReject)
    }

    static resolve (value) {
        /**
         * 返回结果为Promise实例，有两种情况：
         * 1.参数是Promise实例，返回为这个Promise的结果；
         * 2.参数不是Promise实例，状态为成功，结果为参数。
         */
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(resolve, reject)
            } else {
                resolve(value)
            }
        })
    }

    static reject (value) {
        /**
         * 返回结果为Promise实例，状态为失败，结果为参数
         */
        return new Promise((resolve, reject) => {
            reject(value)
        })
    }

    static all (promises) {
        /**
         * 接收的参数为一个由Promise实例组成的数组
         * 返回结果有两种情况：
         * 1.参数中的Promise实例结果都为成功，状态为成功，并将实例终值按原顺序拼凑成一个数组，作为all返回的Promise实例终值；
         * 2.参数中的Promise实例结果有一个失败，状态为失败，并将第一个失败的拒因，作为all返回的Promise实例据因。
         */
         return new Promise((resolve, reject) => {
            let count = 0
            const values = new Array(promises.length)
            for (let i = 0; i < promises.length; i++) {
                Promise.resolve(promises[i]).then(res => {
                    count++
                    values[i] = res
                    console.log('count', count)
                    if (count === promises.length) {
                        resolve(values)
                    }
                }, err => {
                    reject(err)
                })
            }
        }) 
    }

    static race (promises) {
        /**
         * 接收的参数为一个由Promise实例组成的数组
         * 返回一个Promise实例，结果由第一个完成的Promise实例决定
         */
         return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                Promise.resolve(promises[i]).then(res => {
                    resolve(res)
                }, err => {
                    reject(err)
                })
            }
        })
    }
}

export default Promise

var a = 1;
var b = a + 1;

{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "a"
                    },
                    "init": {
                        "type": "Literal",
                        "value": 1,
                        "raw": "1"
                    }
                }
            ],
            "kind": "var"
        },
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "b"
                    },
                    "init": {
                        "type": "BinaryExpression",
                        "operator": "+",
                        "left": {
                            "type": "Identifier",
                            "name": "a"
                        },
                        "right": {
                            "type": "Literal",
                            "value": 1,
                            "raw": "1"
                        }
                    }
                }
            ],
            "kind": "var"
        }
    ],
    "sourceType": "script"
}

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar(); // 1

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope(); // local scope
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()(); // local scope

console.log(Object.prototype.__proto__ === null) // true

function Person() {}
var person = new Person();
console.log(person.constructor === Person); // true

person.constructor === Person.prototype.constructor

const debounce = (fn, delay) => {
    let timer = null
    /**
     * 返回值也是一个函数，函数内部的变量就是局部变量，可以避免造成全局污染；
     * 注意：这里不能使用箭头函数，因为后面会用到this。
     */
    return function () {
        // 存储参数
        let args = arguments
        /**
         * 除了第一次timers为null,后续函数的调用timer都有值；
         * 这一步要做的是清除目前正在进行的定时器，即使时间到了也不能执行回调函数；
         * 注意：clearTimeout(timer)执行之后，timer的值没变。
         */
        if (timer) clearTimeout(timer)
        // 将新的定时器赋值给timer
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
}

const throttle = (fn, delay) => {
    let timer = null
    /**
     * 返回值也是一个函数，函数内部的变量就是局部变量，可以避免造成全局污染；
     * 注意：这里不能使用箭头函数，因为后面会用到this。
     */
    return function () {
        // 存储参数
        let args = arguments
        /**
         * timer为null的两种情况：
         * 1.第一次执行函数timer初始值为空；
         * 2.每次定时器到时间了，执行回调时会将timer赋值为空。
         */
        if (!timer) {
            timer = setTimeout(() => {
              	/**
                 * 注意：这里直接将timer是赋值为null，而不是使用clearTimeout，
                 * 还是因为clearTimeout(timer)执行之后，timer的值没变
                 */
                timer = null
                fn.apply(this, args)
            }, delay)
        }
    }
}

function throttle_2(fn, delay) {
    let previous = 0;
    return function () {
        // 存储参数
        let args = arguments
        const nowTime = Date.now()
         /**
         * 执行的两种情况：
         * 1.第一次执行函数previous为0，nowTime-0>delay；
         * 2.距离上一次执行时间超过了delay。
         */
        if (nowTime - previous > delay) {
            fn.apply(this, args)
            previous = nowTime
        }
    }
}