leslie1943 / blog Goto Github PK

class MessageCenter {
  constructor() {
    this.message = '暂无通知'
    this.members = [] // 存放当前组的所有成员
  }

  // 获取通知消息
  getMessage() {
    return this.message
  }

  // 设置消息
  setMessage(message) {
    this.message = message
  }

  // 发送通知消息
  sendMessage(message = this.getMessage()) {
    this.message = message
    this.notifyAllObservers()
  }

  // 通知所有观察者
  notifyAllObservers() {
    this.members.forEach(member => {
      member.update()
    })
  }

  // 在成员实例化的时候,将成员添加到指定的group
  addMember(member) {
    this.members.push(member)
  }
}

// 观察者, 每个成员, 对象被实例化时被添加进 group, 被通知时执行 响应信息
class Member {
  constructor(name, group) {
    this.name = name
    this.group = group
    this.group.addMember(this) // 初始化将成员时，同时将实例添加到指定的组
  }

  // 触发观察者后动作, 发送响应信息
  update() {
    console.info(`${this.name}收到通知: ${this.group.getMessage()}`)
  }
}

let messageGroup1 = new MessageCenter()
let t1 = new Member('李妈妈', messageGroup1)
let t2 = new Member('王爸爸', messageGroup1)
let t3 = new Member('张爷爷', messageGroup1)

let messageGroup2 = new MessageCenter()
let mark = new Member('mark', messageGroup2)
let justin = new Member('justin', messageGroup2)

console.info('---------------- messageGroup1 测试 --------------')
messageGroup1.setMessage('开家长会')
messageGroup1.sendMessage()
messageGroup1.setMessage('开运动会')
messageGroup1.sendMessage()
messageGroup1.sendMessage('测试下给定消息')

console.info('---------------- messageGroup2 测试 --------------')
messageGroup2.setMessage('开饭咯')
messageGroup2.sendMessage()

fn.call(this, p1,p2,p3)
fn.apply(this, arguments)

// demo FOR apply 🚀
const dog = {
  name: 'Snoopy',
  say(first, last) {
    console.info(first + ' ' + this.name + ' ' + last)
  },
}

const cat = {
  name: 'Tom',
}

dog.say('Hello', 'World') // Hello Snoopy World
dog.say.apply(cat, ['Hello', 'World']) // Hello Tom World

// demo FOR call 🚀
const dog = {
  name: 'Snoopy',
  say(first, last) {
    console.info(first + ' ' + this.name + ' ' + last)
  },
}

const cat = {
  name: 'Tom',
}

dog.say('Hello', 'World') // Hello Snoopy World
dog.say.call(cat, 'Hello', 'World') // Hello Tom World

const Man = function () {
  this.run = function () {
    console.info('跑步.')
  }
}

const Decorator = function (old) {
  this.oldAbility = old.run

  this.fly = function () {
    console.info('飞行')
  }

  this.newAbility = function () {
    this.oldAbility()
    this.fly()
  }
}

const man = new Man()

const superMan = new Decorator(man)
superMan.newAbility()

class SuperMan extends Man {
  fly() {
    console.info('I can fly.')
  }
  newAbility() {
    super.run()
    this.fly()
  }
}

const superMan = new SuperMan()
superMan.run()

const http = require('http');
const path = require('path');
const url = require('url');

http.createServer(function (req, res) {
  const reqUrl = url.parse(req.url, true);
  switch (reqUrl.pathname) {
    case '/user':
      let blogs = require('./blog.json');
      res.setHeader('Content-type', 'text/json; charset=utf-8');
      res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
      // 需要cookie等凭证是必须
      res.setHeader('Access-Control-Allow-Credentials', true);
      res.end(JSON.stringify(blogs));
      break;
    default:
      res.writeHead(404, 'not found');
  }
}).listen(8080, (err) => {
  if (!err) {
    console.log('8080已启动');
  }
});

const http = require('http');
const path = require('path');
const url = require('url');

http.createServer(function (req, res) {
  const reqUrl = url.parse(req.url, true);
  switch (reqUrl.pathname) {
    case '/user':
      let blogs = require('./blog.json');
      res.setHeader('Content-type', 'text/json; charset=utf-8');
      res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
      // 需要cookie等凭证是必须
      res.setHeader('Access-Control-Allow-Credentials', true);

      // 新增的属性
      res.setHeader('Access-Control-Allow-Methods', 'POST, GET,OPTIONS')  // ✅✅✅ 新增的
      res.setHeader('Access-Control-Allow-Headers', 'X-PINGOTHER, Content-Type') // ✅✅✅ 新增的
      res.setHeader('Access-COntrol-Max-Age', 86400) // ✅✅✅ 新增的

      res.end(JSON.stringify(blogs));
      break;
    default:
      res.writeHead(404, 'not found');
  }
}).listen(8080, (err) => {
  if (!err) {
    console.log('8080已启动');
  }
});

 /**
          Access-Control-Allow-Origin: req.headers.origin  // 支持访问的域名
          Access-Control-Allow-Methods: POST, GET, OPTIONS:
            表明服务器允许客户端使用 POST, GET 和 OPTIONS 方法发起请求。
            该字段与 HTTP/1.1 Allow: response header 类似，但仅限于在需要访问控制的场景中使用。这是为了避免多次"预检"请求。

          Access-Control-Allow-Headers: X-PINGOTHER, Content-Type: 
            如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。
            它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

          Access-Control-Max-Age: 86400: 表明该响应的有效时间为 86400 秒，也就是 24 小时。
            在有效时间内，浏览器无须为同一请求再次发起预检请求。
            请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。
       */

app.use(async(ctx,next)=>{
  ctx.set('Access-Control-Allow-Origin',ctx.headers.orgin);
  ctx.set('Access-Control-Allow-Credentials',true);
  ctx.set('Access-Control-Request-Method','PUT,POST,GET,DELETE,OPTIONS')
  ctx.set('Access-Control-Allow-Headers','Orgin,X-Requested-With, Content-Type,Accept,cc')
  if(ctx.method === 'OPTIONS'){
    ctx.status = 204;
    return;
  }
  await next()
})

const cors = require("koa-cors");
app.use(cors());

// 原生 xml 的设置方式
var xhr = new XMLHttpRequest()
xhr.withCredentials = true;

// axios 设置方式
axios.defaults.withCredentials = true

  devServer: {
    port: 8000,
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }
  },

proxyTable: {
  '/api': {
     target: 'http://localhost:8080',
  }
},

devServer: {
    port: 8000,
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }
  }

//gzip 是目前最流行和最有效的压缩方法. 举个例子, 我用 Vue 开发的项目构建后生成的 app.js 文件大小为 1.4MB, 使用 gzip 压缩后只有 573KB, 体积减少了将近 60%.
// 下载插件 
// npm install compression-webpack-plugin --save-dev
// npm install compression

// webpack配置
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  plugins: [new CompressionPlugin()],
}

// node 配置
const compression = require('compression')
// 在其他中间件前使用
app.use(compression())

// 将图片设置成这样, 在也能不可见时图片不会加载
// <img data-src="https://avatars0.githubusercontent.com/u/22117876?s=460&u=7bd8f32788df6988833da6bd155c3cfbebc68006&v=4">

// 等页面可见时
const img = document.querySelector('img')
img.src = img.dataset.src

// webpack配置
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000, /* 图片大小小于1000字节限制时会自动转成 base64 码引用*/
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    /*对图片进行压缩*/
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

optimization: {
  	runtimeChunk: {
        name: 'manifest' // 将 webpack 的 runtime 代码拆分为一个单独的 chunk.
    },
    splitChunks: {
        cacheGroups: {
            vendor: {
                name: 'chunk-vendors',
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                chunks: 'initial'
            },
            common: {
                name: 'chunk-common',
                minChunks: 2,
                priority: -20,
                chunks: 'initial',
                reuseExistingChunk: true
            }
        },
    }
},

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>凤梨</li>
</ul>
// good
document.querySelector('ul').onclick = (event) => {
  const target = event.target
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}

// bad
document.querySelectorAll('li').forEach((e) => {
  e.onclick = function() {
    console.log(this.innerHTML)
  }
}) 

class Letter {
  constructor(name) {
    this.name = name
  }
}

// 暗恋人-小明
let XiaoMing = {
  name: '小明',
  sendLetter(proxy) {
    proxy.receiveLetter(this.name)
  }
}

// 代理人-小华
let XiaoHua = {
  receiveLetter(customer) {
    XiaoHong.listenWhenGlad(() => {
      // 当小红心情好时才送情书, 也在送情书时创建情书
      XiaoHong.receiveLetter(new Letter(customer + '的情书'))
    })
  }
}

// 女神-小红
let XiaoHong = {
  name: '小红',
  receiveLetter(letter) {
    console.info(`${this.name}收到${letter.name}`)
  },
  listenWhenGlad(fn) {
    setTimeout(() => {
      fn()
    }, 1000);
  }
}

// 委托人发送情书给代理
XiaoMing.sendLetter(XiaoHua)

const scoreList = {
  'wang': 90,
  'li': 60,
  'zhang': 100
}

const scoreProxy = new Proxy(scoreList, {
  get: function (scoreList, name) {
    if (scoreList[name] > 69) {
      console.info('输出成绩')
      console.info(scoreList[name])
    } else {
      console.info('不及格的成绩无法公示.')
    }
  },
  set: function (scoreList, name, newVal) {
    if (newVal - scoreList[name] > 10) { // 修改后分差不到10分的不能进行修改
      console.info(`${scoreList[name]}=>${newVal}`)
      scoreList[name] = newVal
    } else {
      console.info('无法修改成绩')
    }
  }
})

// get
console.info(' ------------- 测试 proxy -get  -------------')
scoreProxy['wang']
scoreProxy['li']

console.info(' ------------- 测试 proxy -set ------------- ')
// set
scoreProxy['li'] = 99
scoreProxy['li']

// 异步模式: 不会等等这个任务的结束才开始下一个任务,开启过后立即往后执行下一个任务
// 后续逻辑一般会通过回调函数的方式定义

const { info } = console

info('global begin')

setTimeout(function timer1() {
  info('timer1 invoke')
}, 1800);

setTimeout(function timer2() {
  info('timer2 invoke')

  setTimeout(function inner() {
    info('inner invoke')
  }, 1000)
}, 1000);

info('global end')


// ------------ 代码解析 ------------
// 名词: Call stack(调用栈), EventLoop(事件循环), Queue(消息队列)
/**
 * 🚀🚀🚀 调用整体代码,在调用栈压入一个匿名函数
 * 执行: info('global begin') >> 打印 >> 弹出调用栈
 * 将setTimeout(timer1)压入调用栈,由于setTimeout内部是异步调用, 所以【WebAPIs】为timer1开启一个倒计时器(放到一边)
 * timer1的计时器开启后,弹出调用栈, 代码继续往下执行
 * 将setTimeout(timer2)压入调用栈 【WebAPIs】为timer2开启一个倒计时器(放到一边)
 * timer2的计时器开启后,弹出调用栈, 代码继续往下执行
 * 执行: info('global end') >> 打印 >> 弹出调用栈
 * 清空调用栈
 *
 * 🚥🚥🚥 Event loop负责监听调用栈和消息队列
 * 一旦调用栈所有的任务都结束了
 * 事件循环(event loop)从消息队列中取出第一个回调函数压入调用栈
 * 此时消息队列(Queue)是空的
 *
 * 🚧🚧🚧 此时,timer1()和timer2(),任意一个结束后,将被放入消息队列中(Queue)
 * 从倒计时间可以得知,
 * timer2()先执行倒计时结束,将会被放入到消息队列的第1个
 * timer1()执行结束后将放入消息队列的第2位
 *
 * 一旦消息队列发生了变化, event loop就会监听到,就会把消息队列(Queue)中的第一个(timer2)压入调用栈
 * 执行timer2() => 执行同步代码 => 弹出调用栈
 * 执行异步代码,放入WebAPIs中 => 开启inner倒计时器=>弹出调用栈
 * 执行timer1() => 执行 => 弹出调用栈
 *
 * inner倒计时器结束=> 进入消息队列=> 压入调用栈=>执行=>弹出调用栈
 *
 * 直到调用栈和消息队列都没有可执行的任务了
 *
 * 🚀🚀🚀 调用栈 =>  正在执行的工作表
 * 🚥🚥🚥 消息队列 =>  待办的工作表
 *
 * JS引擎先做完调用栈中的任务=>从消息队列中再取一个任务, 以此循环,直到调用栈和消息队列都没有可执行的任务了
 *
 * JS是单线程的,但浏览器不是单线程的
 *
 * 执行代码的线程是单线程
 *
 * 所以我们不会让JS线程去等待一些任务的结束
 *
 * WebAPIs,是单独的线程执行的
 *
 * 同步模式/异步模式:不是写代码的方式,而是指的运行环境提供的API是以哪种模式工作的
 *
 * 异步模式API下达了这个任务开启的指令就继续往下执行,代码不会等待(setTimeout)结束,而是直接继续执行
 *
 */

const arr = [1,2,3,4,5]
for(let item in arr){
    console.info(item) // 0 , 1 , 2 , 3, 4 
}

const arr = [1,2,3,4,5]
for(let item of arr){
    console.info(item) //1,2,3,4,5
}

const results = [result0,result1,result2,result3,result4,result5,result6,result7,result8,result9,result10,result11]
return result[index]

// 或者
const resultMap = {
    'red': result0,
    'green': result1,
    ...
    'black': resultN
}

// 对于一些长时间运行的 JavaScript,我们可以使用定时器进行切分,延迟执行. 
for(let i = 0; i < arr.length; i++){
    process(arr[i])
}

// 取模
if (value % 2) {
	// 奇数
} else {
	// 偶数 
}
// 位操作
if (value & 1) {
	// 奇数
} else {
	// 偶数
}

// 取反
~~10.12 // 10
~~10 // 10
~~'1.5' // 1
~~undefined // 0
~~null // 0

// 位掩码
const a = 1
const b = 2
const c = 4
const options = a | b | c

// 选项 b 是否在options中
if(b & options){

}

new Date() - performance.timing.navigationStart

var data = {
    name: 'leslie',
    compony: 'xxxx'
}
// hasOwnProperty 方法不会去判断原型
console.info(data.hasOwnProperty("name")) // true
console.info(data.hasOwnProperty("hasOwnProperty")) // false
// in 方法会去判断原型
console.info('name' in data) // true
console.info('hasOwnProperty' in data) // true
// getOwnPropertyNames
console.info(Object.getOwnPropertyNames(data)) // ['name','company']
// keys
console.info(Object.keys(data)) // ['name','company']

const http = require('http');
const path = require('path');
const url = require('url');

http.createServer(function (req, res) {
  // console.info(req)
  const reqUrl = url.parse(req.url, true);
  switch (reqUrl.pathname) {
    case '/user':
      let blogs = require('./blog.json');
      res.setHeader('Content-type', 'text/json; charset=utf-8');
      res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
      // res.setHeader('Access-Control-Allow-Origin', '*');
      // 需要cookie等凭证是必须
      res.setHeader('Access-Control-Allow-Credentials', true);
      res.end(JSON.stringify(blogs));
      break;
    default:
      res.writeHead(404, 'not found');
  }
}).listen(8080, (err) => {
  if (!err) {
    console.log('8080已启动');
  }
});

// 注册组件
import LeftRight from './src/left-right'
LeftRight.install = function (Vue) {
  Vue.component(LeftRight.name, LeftRight)
}
export default LeftRight

// main.js: 安装组件
import LeftRight from '../components/left-right'
Vue.use(LeftRight)

const person = {
    name: 'leslie',
    say: function() {
        console.info(this.name, 'say')
    },
    talk() {
        console.info(this.name, 'talk')
    }
}
person.say() // leslie, say

const name = 'global name'
const say = (first, last) => {
    console.info(first,this.name, last)
}
const obj = {
    name: 'obj name'
}
say.call(obj,'one','two') // one global name two => 并未修改this的指向

/**
 *
 * @param {*} fn :callback function
 * @param {*} duration :duration time,default wait time 0.8 秒
 * @demo in vue methods:
 *      handleEvent: _debounce(function(){
 *        do something
 *      },time)
 */
export const _debounce = (fn, duration = 800) => {
  // create timer
  let timer = null
  return function () {
    // reset once call
    clearTimeout(timer)
    // create a new timer to make sure call after define time
    timer = setTimeout(() => {
      // execute callbak, the 2nd params is fn's arguments
      fn.apply(this, arguments)
    }, duration)
  }
}

/**
 * @param {*} fn: callback function
 * @param {*} duration : duration time,default wait time 1 sec
 * @demo in vue methods:
 *      handleEvent: _throttle(function(){
 *        do something
 *      },time)
 */
export const _throttle = (fn, duration = 1000) => {
  let canRun = true
  return function () {
    if (!canRun) return
    canRun = false
    // execute callbak, the 2nd params is fn's arguments
    fn.apply(this, arguments)
    setTimeout(() => {
      canRun = true
    }, duration)
  }
}

console.info(1)

async function f() {
  await new Promise(function (resolve, reject) {
    console.info(2)
    throw new Error('出错了')
  }).catch(err => { // 这里的异常捕获不会执行后续代码的执行
    console.info(3)
    console.info('执行失败了.')
  })
  console.info(4)
}

f()
// 输出结果 1,2,3,执行失败了,4

async function f() {
  try {
    // 使用 try-catch的时候,会把容易引发的异常的代码写道 try里
    await new Promise(function (resolve, reject) {
      throw new Error('出错了')
    })
    console.info('这里不会执行了')
  } catch (err) {
    console.info('异常了')
  }
}

/**
 *  💛 程序的本质: 根据输入通过某种运算获取相应的输出,程序开发过程中会涉及很多有输入和输出的函数
 *  💛 x -> f (联系、映射) -> y   y=f(x)
 *  💛 函数式编程中的函数指的不是程序中的函数(方法),而是数学中的函数(映射关系): y=sin(x) x和y的关系
 *  💛 相同的输入始终要得到相同的输出(纯函数)
 *  💛 函数式编程用来描述数据(函数)之间的映射
 */
// 💛💛💛对运算过程进行抽象💛💛💛

function once(fn){
    let done = false // 方法未执行
    return function() {
        if(!done){
            console.info('done in if', done)
            done = true // 标记这个函数已经被执行了
            // 调用 fn 的时候需要参数, arguments是调用返回的function(带有【上面带有return的那个函数】)接收的参数
            return fn.apply(this, arguments)
        } else {
            console.info('done in else', done)
        }
    }
}
// 通过once生成了一个函数pay
let pay = once(function(money){
    console.info(`支付了${money}`)
})

pay(5); // done in if false, 支付了5
pay(5); // done in else true
pay(5); // done in else true
pay(5); // done in else true

/**
 * 什么是柯里化?
 * 1：当我们的函数有多个参数的时候,可以改造这个函数
 * 2：调用这个函数只传入部分的参数调用它(这部分参数后续不会改变)并且让这个函数返回一个新的函数
 * 3：新的函数接收剩余的参数,并且返回相应的结果
 */


// 柯里化-ES6
const checkAge = base => (age => age >= base)
// 柯里化-Normal
function checkAge(base) {
  return function (age) {
    return age >= base
  }
}

const check_18 = checkAge(18)
const check_22 = checkAge(22)
info(check_18(20))
info(check_22(20))

server {
        listen 80;
        server_name leslie.test;
        location / {
            proxy_pass http://localhost:8080;
        }
}

const http = require('http');
const path = require('path');
const url = require('url');

http.createServer(function (req, res) {
  // console.info(req)
  const reqUrl = url.parse(req.url, true);
  switch (reqUrl.pathname) {
    case '/user':
      let blogs = require('./blog.json');
      res.setHeader('Content-type', 'text/json; charset=utf-8');
      // res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
      res.setHeader('Access-Control-Allow-Origin', '*');
      // 需要cookie等凭证是必须
      res.setHeader('Access-Control-Allow-Credentials', true);
      res.end(JSON.stringify(blogs));
      break;
    default:
      res.writeHead(404, 'not found');
  }
}).listen(8080, (err) => {
  if (!err) {
    console.log('8080已启动');
  }
});

class EventEmitter {
  constructor() {
    // eventMap 用来存储事件和监听函数之间的关系
    this.eventMap = {}
  }

  /**
   * # >>>>>>> 注册事件 / 订阅事件
   * type: 这里就代表事件的名称
   * handler: 代表事件, 必须是一个函数
   */
  on(type, handler) {
    if (!(handler instanceof Function)) {
      throw new Error('Must be a Function!')
    }

    // 判断 type 事件对应的队列是否存在
    if (!this.eventMap[type]) {
      // 新建
      this.eventMap[type] = []
    }

    // 将 handler 推入 队列
    this.eventMap[type].push(handler)
  }

  /**
   * # >>>>>>> 发布事件
   * type: 发布事件的名称
   * params: 携带的参数
   */
  emit(type, params) {
    // 事件是被订阅的: 对应的事件队列存在
    if (this.eventMap[type]) {
      this.eventMap[type].forEach((handler, index) => {
        // 传递params
        handler(params)
      })
    }
  }

  /**
   * # 要卸载的 事件名称 对应的函数: event.off('event-name-a',handleA), 把 event-name-a 对应的 handleA 卸载,其他事件保留
   * type: 事件的名称
   * handler: 代表事件, 必须是一个函数
   */
  off(type, handler) {
    if (this.eventMap[type]) {
      this.eventMap[type].splice(this.eventMap[type].indexOf(handler) >>> 0, 1)
    }
  }
}

const myEvent = new EventEmitter()

const testHandler = function (params) {
  console.log(`test事件被触发了，testHandler 接收到的入参是${params}`)
}

// 监听 test 事件
myEvent.on('test', testHandler)
myEvent.on('testb', testHandler)

// 在触发 test 事件的同时，传入希望 testHandler 感知的参数
myEvent.emit('test', 'newSate aaa')
myEvent.emit('testb', 'newSate bbb')

console.info(myEvent)

// 0 为初始值
const total = [0,1,2,3,4].reduce((acc, cur) => acc + cur, 0)

const flattened = [[0,1], [2, 3], [4, 5]].reduce((acc,cur) => acc.concat(cur), []) 

var names =  ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
var countedNames = names.reduce((allNames, name)=>{
    if(name in allNames) {
        allNames[name]++
    } else {
        allNames[name] = 1
    }
    return allNames
}, {})

const people = [
    { name: 'Alice', age: 21 },
    { name: 'Max', age: 20 },
    { name: 'Jane', age: 20 }
]
const  groupBy = (objectArray, property) => {
    return objectArray.reduce((acc,obj) => {
        var key = obj[property]
        if(!acc[key]){
            acc[key] = []
        }
        acc[key].push(obj)
        return acc
    },{})
}

const groupedPeople = groupBy(people, 'age')

// { 
//   20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }

const myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
const uniqueArray = myArray.reduce((acc,cur)=>{
    if(acc.indexOf(cur) == -1){
        acc.push(cur)
    }
    return acc
}, [])

console.info(uniqueArray) // ["a", "b", "c", "e", "d"]

/**
 * Runs promises from array of functions that can return promises
 * in chained manner
 *
 * @param {array} arr - promise arr
 * @return {Object} promise object
 */
function runPromiseInSequence(arr, input) {
    return arr.reduce(
      (promiseChain, currentFunction) => promiseChain.then(currentFunction), Promise.resolve(input)
    );
}

// promise function 1
function p1(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 5);
  });
}

// promise function 2
function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 2);
  });
}

// function 3  - will be wrapped in a resolved promise by .then()
function f3(a) {
 return a * 3;
}

// promise function 4
function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 4);
  });
}

const promiseArr = [p1, p2, f3, p4];
runPromiseInSequence(promiseArr, 10)
  .then(console.log);   // 1200

async function asyncFn(){
    return 'Hello Async'
}
const result = asyncFn()
console.info(result)
/**
* __proto__: Promise
* [[PromiseState]]: "fulfilled"
* [[PromiseResult]]: "Hello Async"
**/
// 🎨🎨🎨 返回的是一个 Promise 对象 🎨🎨🎨

asyncFn().then(v => {
    console.info(v) // 输出 hello async.
})

function syncFn(){
    return 'something sync'
}

async function asyncFn(){
    return Promise.resolve('something async')
}

async function test(){
    const v1 = await syncFn()
    const v2 = await asyncFn()
    console.info('syncFn:', v1)
    console.info('asyncFn:', v2)
}

test()
/**
* // 输出结果
* syncFn: something sync
* asyncFn: something async
**/

// 💛💛💛 .then()的调用方式
function takeLongTimeFn(){
    return new Promise(resolve=>{
        setTimeout(()=>{
            resolve('long_time_value')
        },1000)
    })
}

takeLongTimeFn().then(v => {
    console.info('got', v)
})

// 💛💛💛 async/await的调用方式
function takeLongTimeFn(){
    return new Promise(resolve=>{
        setTimeout(()=>{
            resolve('long_time_value')
        },1000)
    })
}
async function test(){
    const v = await takeLongTimeFn()
    console.info('got',v )
}
test()

/**
    传入参数n, 表示这个函数执行的时间
    执行的结果是 n+200,将这个值用于下一个步骤
**/
function takeLongTime(n){
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n)
    })
}

function step1(n){
    console.info(`step 1 with ${n}`)
    return takeLongTime(n)
}

function step2(n){
    console.info(`step 2 with ${n}`)
    return takeLongTime(n)
}

function step3(n){
    console.info(`step 3 with ${n}`)
    return takeLongTime(n)
}

// 使用 .then 链式调用
function doIt(){
    console.time('doIt')
    const time1 = 300
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.info(`result is ${result}`)
            console.timeEnd('doIt')
        })
}
doIt()

/**
    step 1 with 300
    step 2 with 500
    step 3 with 700
    result is 900
    doIt: 1503.203857421875 ms
**/

// 使用 async/await 调用
async function doIt(){
    console.time('doIt')
    const time1 = 300
    const time2 = await step1(time1)
    const time3 = await step2(time1)
    const result = await step3(time1)
    console.info(`result is ${result}`)
    console.timeEnd('doIt')
}
doIt()

/**
 * 函数f2就被包括在函数f1内部, 这时f1内部的所有局部变量, 对f2都是可见的.但是反过来就不行, f2内部的局部变量, 对f1就是不可见的.
 * 这就是Javascript语言特有的"链式作用域"结构 chain scope , 子对象会一级一级地向上寻找所有父对象的变量.所以, 父对象的所有变量, 对子对象都是可见的, 反之则不成立.
 * 既然f2可以读取f1中的局部变量, 那么只要把f2作为返回值, 我们不就可以在f1外部读取它的内部变量了吗！
 * 闭包就是 ： 闭包就是能够读取其他函数内部变量的函数
 * 
 * **/
function f1(){
    var n = 999;
    function f2(){
	  return n;
    }
    return f2;
}

const age = f1()()

// 定义策略类
var PaymentMethodStrategy = {
  BankAccount: function (money) {
    return money > 50 ? money * 0.7 : money
  },
  CreditCard: function (money) {
    return money * 0.8
  },
  Alipay: function (money) {
    return money
  }
}

// 运行函数
const userPay = function (selectedStrategy, money) {
  return PaymentMethodStrategy[selectedStrategy](money)
}

console.log('银行卡支付价格为：' + userPay('BankAccount', 100)); // 70
console.log('支付宝支付价格为：' + userPay('Alipay', 100)); // 100
console.log('信用卡支付价格为：' + userPay('CreditCard', 100)); // 80

// 定义单例函数/类
function SingleShopCart() {
  let instance;
  function init() {
    // 这里定义单例代码
    return {
      buy(good) {
        this.goods.push(good)
      },
      goods: []
    }
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = init()
      }
      return instance
    }
  }
}

// 获取单例对象
let ShopCart = SingleShopCart()

let cart1 = ShopCart.getInstance()
let cart2 = ShopCart.getInstance()
cart1.buy('apple')
cart2.buy('orange')
console.info(cart1.goods)
console.info(cart2.goods)
console.info(cart1 === cart2)

watch:{
    "obj.name":{
        handler:function(newQ,oldQ){
            this.answer = 'waiting...'
            this.getAnswer()
        },
        deep: true,
        immediate: true
    }
}

 watch: {
    'user': [
      {
        handler: (nweVal, oldVal) => {
          console.info('in 1 hanlder')
        },
        immediate: true,
        deep: true
      },
      {
        handler(newVal, oldVal) {
          console.info('in 2 hanlder')
        },
        immediate: true,
        deep: true
      }
    ]
  }