/**
 * 
 * @param {promise[]} funcs 待实例化数组
 */
const promiseSerial = funcs => 
  funcs.reduce((promise, func) =>
    // 待上一次 promise 的状态 resolved 之后，调用下一个 promise，即 func
    // 并将运行 func 得到的结果与之前的 promise 返回的结果合并
    promise
      .then(result => func().then(Array.prototype.concat.bind(result)))
      .catch(console.error),
    // 初始值为一个空数组容器
    Promise.resolve([])
  )

async function series () {
  // 需要等待 wait(500) 的计算结果才能继续执行函数体
  await wait(500)
  await wait(500)
}

async function parallel () {
  // 没有 await 关键词，那么将直接调用 wait(500)，执行该异步操作。
  const op0 = wait(500)

  // 因为前一个 op0 是异步操作，且没有 `await`，根据 `ES` 规范中 `event loop` 的描述，
  // `new Promise(...)` 参数函数在本轮 `event loop` 中立即执行，之后该 `promise` 实例将脱离
  // execution context stack 在堆内存中等待异步执行结果。
  // 所以不论 op0 的异步操作有没有执行完成，此时将继续调用一个新的异步操作 wait(500)
  const op1 = wait(500)

  // 此时 op0 与 op1 是并行执行，并且此时在同时等待二者的执行结果
  // 那么整个 parallel 执行时间将缩短
  const result0 = await op0
  const result1 = await op1
}

async functon parallel () {
  const [result0, result1] = await Promise.all([wait(500), wait(500)])
}

// src/core/instance/state.js
const baseDescription = {
  enumerable: true,
  configurable: true,
  get: function () {},
  set: function () {}
}

function defineProxy (target, sourceKey, key) {
  baseDescription.get = function proxyGetter () {
    return this[sourceKey][key]
  }

  baseDescription.set = function proxySetter (value) {
    this[sourceKey][key] = value
  }
  Reflect.defineProperty(target, key, baseDescription)
}

// 简单实现数据代理
const vm = {
  data: {
    name: 'John Wick',
    num: 20
  }
}

const keys = Object.keys(vm.data)
const len = keys.length
for (let i = 0; i < len; i++) {
  defineProxy(vm, 'data', key[i]) // vm: { data: {...}, name: 'John Wick', num: 20 }
}

// 示例 1
const target = {
  keys: {
    name: 'I am a original object.'
  }
}

const handle = {
  get (target, key) {
    return key in target.keys? target.keys[key] : console.error(`There is no '${key}' in `, target.keys)
  }
}

// 通过 Proxy 实例来读取被代理的对象的键值
const proxy = new Proxy(target, handle)
proxy.name // 'I am a original object.'

// 示例 2
const target = {
  keys: {
    name: 'I am a original object'
  },

  // getter 函数必须在 target 的对象内设置，而非在 receiver 设置
  get name() {
    return this.keys.name
  }
}

/**
 * 1. receiver 仅起到提供 键值 的作用，不在其中设置 getter 或 setter。当遇到
 * target 内有 getter 函数时，将 receiver 提供给 target 中的 getter 函数
 */
const receiver = {
  keys: {
    name: 'I am a super object'
  }
}

Reflect.get(target, 'name', receiver) // "I am a super object"


// 示例 3
const target = {
  keys: {
    name: 'I am a original object'
  },

  // getter 函数必须在 target 的对象内设置，而非在 receiver 设置
  get name() {
    return this.name
  }
}

// receiver 仅起到提供 键值 的作用，不在其中设置 getter 或 setter
const receiver = {
  name: 'I am a super object'
}

const handle = {
  // 此处若传入第三个参数，那么第三个参数将表示当前的 proxy 实例
  get (target, key) {
    return Reflect.get(target, key, receiver) // 相当于 target.keys[key] 作用
  }
}

const proxy = new Proxy(target, handle)
proxy.name // 'I am a super object'

define(`${moduleName}`, ["vue"], factory)

// CommonJS 2
module.exports = factory(require("vue"))

// CommonJS
exports[`${moduleName}`] = factory(require("vue"))

export default moduleName

// webpack.config.js
rules: [
  // transform-runtime 插件用于告诉 Babel 引入 runtime 而不是内联  runtime，即将
  // 所有的 helpers 函数分离为单独的 runtime 以实现代码复用。
  {
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        // 此处将根据上文 @babel/preset-env 的示例代码配置，自动引入所需的 polyfill
        // 而不是将整个 polyfill 全部引入
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-runtime']
      }
    }
  }
]

{
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

function myIterator (arr) {
  let __index = 0
  return {
    // 迭代器对象核心
    // arr[__index++] 为示例目标值访问接口，可替换为其他类型值访问接口来实现其他类型迭代
    next () {
      return __index < arr.length ?
      	{value: arr[__index++], done: false} : 
        {value: undefined, done: true}
    }
  }
}

const it = myIterator([1, 2, 3, 4])

// output
const c = document.createElement.bind(document)
function createFragment (result) {
  const fragment = c('div')
  fragment.innerText = result
  return fragment
}

(function insert () {
  let i = 5
  const chip = c('div')
  while (i--) {
    chip.appendChild(createFragment(JSON.stringify(it.next())))
  }
  document.body.appendChild(chip)
})()

import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'

import defaultState from './state/state'
import getters from './getters/getters'
import mutations from './mutations/mutations'
import * as actions from './actions/actions'

const debug = process.env.NODE_ENV === 'development'

// ssr 时，保证每次渲染去掉对之前的 store 引用，对应一个新的 store，以防止内存溢出。
/* eslint-disable no-new */
export default () => {
  const store = new Vuex.Store({
    state: defaultState,
    getters,
    mutations,
    actions,

    // 限定只能通过  mutations 修改 state,不应用于生产环境
    strict: debug,

    // 使用提交 mutations 和 actions 在控制台输出的插件
    plugins: debug ? [createLogger()] : []
  })

  // 给 store 添加热模块加载功能
  if (module.hot) {
    module.hot.accept([
      './state/state',
      './getters/getters',
      './mutations/mutations',
      './actions/actions'
    ], () => {
      // import 语句不能写在业务代码块中，只能写在外部
      const newState = require('./state/state').default
      const newGetters = require('./getters/getters').default
      const newMutations = require('./mutations/mutations').default
      const newActions = require('./actions/actions').default

      store.hotUpdate({
        state: newState,
        getters: newGetters,
        mutations: newMutations,
        actions: newActions
      })
    })
  }
  return store
}

const appData = require('../mock/data.json') // 引入 mock 数据文件

const seller = appData.seller  // 定义不同 api 返回的数据
const goods = appData.goods
const ratings = appData.ratings

const devWebpackConfig = {
  // ...
  devServer: {
    before (app) {
      app.get('/api/seller', (req, res) => {   // 使用 app.get() 方法模拟后端
        res.json({  // 使用 res.json() 方法转换为 JSON 格式
          errno: 0,
          data: seller  // 指定地址匹配时，应返回的数据
        })
      })

      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      })

      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
  }
  //...
}

  devServer: {
    // app 请求 webpack-dev-server 地址
    // webpack-dev-server 代理发送 ajax 请求
    before (app) {
      app.get('/api/getPlayList', (req, res) => {
        var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'

        axios.get(url, {
          headers: {
            referer: 'https://c.y.qq.com',
            host: 'c.y.qq.com'
          },
          params: req.query
        }).then(response => {
          res.json(response.data)
        }, e => {
          throw Error('Proxy failed')
        })
      })
    },
    // ...
   }

// webpack.dev.config.js

// 生成独一无二的 class / id 值
const createLocalIdentName = process.env.NODE_ENV === 'development'
  ? '[path]-[name]-[hash:base64:5]'
  : '[hash:base64:5]'

module.exports = merge(baseWebpackConfig, {
  // ...
  module: {
    rules: [{
      test: /\.scss$/,
      include: [resolve('src')],
      use: [
        'style-loader', // 将样式表写入 HTML 中
        // 'css-loader',
        {
          loader: 'css-loader',
          options: {
            // CSS modules 模拟 scoped ，此处用于定义 .jsx 的样式作用域
            // https://vue-loader.vuejs.org/zh-cn/features/css-modules.html
            modules: true,

            // 实现样式独有的命名空间（作用域）
            localIdentName: createLocalIdentName
          }
        },
        // ...
      ]
    }]
  }
  // ...
}

import className from 'scss/layout-footer.scss'
// import 'scss/layout-footer.scss'

export default {
  data () {
    return {
      author: 'Bowen'
    }
  },

  render (h) {
    return (
      // <div class="layout-footer">
      // 注意：若变量有连字符，那么变量必须写成 String 类型，如 'layout-footer'
      <div class={ className['layout-footer'] }>
        <span>Written by <a href="https://github.com/lbwa" target="_blank" >{this.author}</a></span>
      </div>
    )
  }
}

const obj = {...{ num: 10 }, ...{ num:20 }, ...{ num:30 }}
obj // { num: 30 }

for (let key of Object.keys(someObject)) {
  console.log(key + ': ' + someObject[key]);
}

/**
 * @param  {Function} fn     要实现函数防抖的原函数
 * @param  {Number}   delay  延迟时间
 * @return {Function}        添加防抖功能的包装函数
 */
// 最后一次调用总是会被执行
function debounce (fn, delay = 200, now = false) { // 延迟默认值 200ms
  let _timer = null // 匿名函数保持了对 _timer 变量的引用
  return function (...args) { // rest 参数，保存传入参数，用于向 fn 传递参数
    if (_timer) clearTimeout(_timer)
    // 箭头函数没有自己的 this 对象
    _timer = setTimeout(() => { // 这里的箭头函数中调用的 this 是外部匿名函数的 this
      fn.apply(this, args) // 指定 this 和参数，若不使用 apply 指定，那么 this 将指向 window
    }, delay)
  }
}

// 第一次立即调用后启用防抖
function debounce(fn, wait = 200, now = false) {
  let __timer = null
  return function (...args) {
    if (!__timer && now) {
      fn.apply(this, args)
    }
    
    if (__timer) clearTimeout(__timer)
    __timer = setTimeout(() => {
      fn.apply(this, args)
    }, wait)
  }
}

// Vue.js 中使用函数防抖

created () {
  // watch 中真正的回调函数是 debounce() 返回的匿名函数
  this.$watch('query', debounce (newQuery => {
    this.$emit('queryChange', newQuery)
  }, 200))
}

/**
 * 用于限制 fn 函数在 period 时间段内只调用一次，即限制 fn 调用的频率
 * 示例中实现了首次和末次一定会被调用，中间调用被限定为一定频率
 *
 * @param {Function} fn 要被节流的函数
 * @param {number} [period=200] 被节流的时间段
 * @returns 一个匿名函数包装
 */
export function throttle (fn, period=200) {
  let _lastTime = null
  let _timer = null
  return function (...args) {
    const _nowTime = +new Date()

    _timer && clearTimeout(_timer)

    if (!_lastTime || _nowTime - _lastTime > period) {
      fn.apply(this, args)
      _lastTime = _nowTime
    } else {
      // 确保最后一次即使不满足 period 时间段，但仍会调用
      // 使用箭头函数来确保 this 不变
      _timer = setTimeout(() => {
        fn.apply(this, args)
      }, period)
    }
  }
}

// src/index.js
import { install } from './install'

export default class VueRouter {
  // ...
}
// 定义插件的 install 方法，在作为模块引入插件时，必须调用 Vue.use(VueRouter） 来向 install 方法动
// 态传入 Vue 对象，使得插件可以使用 Vue 对象
VueRouter.install = install

// 全局环境自动调用 Vue.use(VueRouter)
if (inBrowser && window.Vue) {
  window.Vue.use(VueRouter)
}

// src/install.js

// 缓存容器，export 之后可用于其他非 install.js 的模块调用 Vue 对象，如 src/history/base.js
export let  _Vue

// 通过参数形式来避免 Vue 被 install 方法直接依赖，此举可避免插件 package 打包 Vue
export function install (Vue) {
  if (install.installed && _Vue === Vue) return
  install.installed = true

  _Vue = Vue
  // ...
}

import { createStore } from 'redux'

/**
 * This is a reducer, a pure function with (state, action) => state signature.
 * 这是一个 reducer，一个形如 (state, action) => state signature 的 **纯函数**。
 * It describes how an action transforms the state into the next state.
 * reducer 描述例如一个 action 如何将一个 state 转换为一个新的 state。
 *
 * The shape of the state is up to you: it can be a primitive, an array, an object,
 * state 的结构取决于开发者：它可以是原始类型值，数组，对象
 * or even an Immutable.js data structure. The only important part is that you should
 * 或者甚至是一个 Immutable.js 的数据结构。唯一重要的点是开发者
 * not mutate the state object, but return a new object if the state changes.
 * 不应该修改 state 对象，而是当 state 变化时，返回一个新的 state 对象。
 *
 * In this example, we use a `switch` statement and strings, but you can use a helper that
 * follows a different convention (such as function maps) if it makes sense for your
 * project.
 */
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// 创建一个 Redux store 来托管你的 app 的 state
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counter)

// You can use subscribe() to update the UI in response to state changes.
// 你可以使用 subscribe() 来根据 response 更新 state
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// 通常情况下，你最好使用一个视图绑定库，而不是直接使用 subscribe()。
// However it can also be handy to persist the current state in the localStorage.
// 然而它也可以方便地在 localStorage 中持久化当前 state

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// 修改内部 state 的唯一方式是 dispatch 一个 action
// The actions can be serialized, logged or stored and later replayed.
// action 可被序列化，打印，存储或者稍后重放
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

navigate (evt) {
  const href = evt.target.getAttribute('href')
  this.$router.push(href)
}

// ctx 为 koa 请求生成的 context 对象，它作为中间件的接收器，这里即作为渲染上下文使用
const handleSSR = async (ctx) => {
  // ...

  // 获取客户端构建清单，即客户端 bundle（另一个 server 的数据）
  // vue-ssr-client-manifest.json 是 webpack.dev.config 中 VueClientPlugin 默认生成文件名
  const clientManifestResp = await axios.get(
    // http://koajs.com/#context
    // 因为 Koa 将 Node request 对象封装至 ctx 上，所以此处 ctx 对象被赋予了请求地址，即此时存在了 ctx.path(ctx.request.path 的别名)
    'http://127.0.0.1:8080/public/vue-ssr-client-manifest.json'
  )

  // 在 await resolved 后，即得到 clientManifestResp，继续执行
  const clientManifest = clientManifestResp.data

  // ...
}

// SSR server 渲染请求地址
const context = { url: ctx.path }

// ...

const html = ejs.render(template, {
  // ...

  /**
   * 1. context.renderScripts() 返回引导客户端应用所需的 <script> 标签
   * 2. 需要 clientManifest，即客户端 bundle
   * 3. 此处插入的地址将与 client server 插入的 script 标签地址一样
   */
  scripts: context.renderScripts()
})

"scripts": {
  "dev": "webpack-dev-server --inline --hot",
  // ...
}

module.exports = {
  // ...
  optimization: {
    runtimeChunk: {
      name: 'runtime'
    }
  }
}

module.exports = {
  //...
  optimization: {
    splitChunks: {
      /**
       * 指定需要优化的 chunk。 string | Function
       * 
       * 1. 'all' 即指明为所有 chunk，即可理解为表示所有可在异步和非异步 chunk 之间
       *    共享的模块。
       * 2. 'async' 异步的 chunk，即分离所有异步 chunk，与 import ('./a') 语法配合
       *    使用。
       * https://webpack.js.org/plugins/split-chunks-plugin/#defaults-example-1
       * 3. 'initial' 同步的 chunk
       * 4. 可被 `splitChunks.cacheGroups` 中的同名选项覆盖
       * 5. 可结合 HtmlWebpackPlugin 的配置来注入所有生成的 vendor chunks。
       */
      // 即默认地，webpack 将异步 chunk 单独分离出来。
      chunks: 'async',

      // 最小 chunk 体积。 number
      minSize: 30000,

      // 分离前必须共享的最小 chunks 数。 number
      minChunks: 1,
      
      // 按需加载时并行请求的最大数。number
      maxAsyncRequests: 5,

      // 入口处的最大并行请求数 number
      maxInitialRequests: 3,

      // 默认情况下，webpack 以来源和 chunk 名来命名生成的 chunk
      // 例如 vendors~main.js
      // 该选项允许你指定生成名字的连字符
      automaticNameDelimiter: '~',

      // 分离生成的 chunk 的名字 boolean: true | Function | string
      // 默认基于 chunk 的键名和 cacheGroups 的键名生成
      // 可提供一个 string 或 Function 自定义名字
      // 可被 `splitChunks.cacheGroups` 中的同名选项覆盖
      name: true,

      /**
       * 缓存组，即应该被浏览器常缓存的第三方库。 object
       * 
       * 1. 其中的选项可继承或覆盖外部任意 `splitChunks.*` 选项，除了 `test`, 
       *    `priority`, `reuseExistingChunk` 只能在该选项内配置
       * 2. splitChunks.cacheGroups.default: false 即可关闭
       */
      cacheGroups: {
        // 一个缓存组，在其内部未指明 name 的情况下，使用该键名命名生成的 chunk
        vendors: {
          /**
           * 指定哪些 modules 应该被该缓存组缓存。 RegExp | string
           * 
           * 1. 未指定时，将选择所有 modules。
           * 2. 可选择一个绝对路径的资源或 chunk 名，当一个 chunk 被选定时，其中所有
           *    的module 同样将被选定。
           * 3. 在搭配形如 chunk: 'all' 选项可选择在被选中的 modules 中哪些
           *    modules 应该被缓存
           */
          test: /[\\/]node_modules[\\/]/,

          // 一个 module 可属于多个缓存组，但 optimization 会将 module 优先缓存于高
          // 优先级的缓存组 number
          priority: -10
        },
        // 默认的缓存组
        default: {
          // 分离前必须共享的最小 chunk 数，可覆盖外部同名选项。number
          minChunks: 2,

          // 如前文所述，遇到可加入多个缓存组的 module 时，优先级将低于 vendor 缓存组
          priority: -20,

          // 若符合默认条件组的 module 已经被最近从主 bundle 分离出的 chunk 包含，那
          // 么重用这个 module，而不是生成新的 chunk。这会影响最终生成的 chunk 的文件名。
          reuseExistingChunk: true
        }
      }
    }
  }
}

/**
 * 应该分离 modules 的情形
 * https://webpack.js.org/plugins/split-chunks-plugin/#defaults-example-1
 * 
 * 1. chunk 包含了来自 node_modules 的 modules
 * 2. 1 的 modules 大小超过 30 kb，若 chunk 将其包含在内将影响首轮加载
 * 3. 不影响初始页面加载的 modules
 * 4. 不经常修改的代码，即应该被浏览器常缓存的代码，如 1 中的第三方库。
 * 
 * https://webpack.js.org/plugins/split-chunks-plugin/#defaults-example-2
 * 
 * 5. 可被不同页面共享的 chunk
 */

// 创建一个 `commons` chunk，它包含所有入口共享的所有代码
// 此举将增加初始 bundles 的体积，只在需要动态引入时推荐使用
module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 一个缓存组，仅当内部未指定 name 选项时，名字以键名指定
        commons: {
          name: 'commons',

          // 缓存所有初始的 modules，即排除所有异步 modules，将动态导入的文件和非动态导入的文件
          // 分别打包
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  }
}

// 创建一个 `vendors` chunk，它包含所有应用中需要的第三方库
module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          // 指明为 node_modules 被依赖的 modules
          test: /[\\/]node_modules[\\/]/,

          // 名为 vendors 的缓存组，键名 commons 仅在未指明 name 时生效。
          name: 'vendors',

          // 将所有符合 test 选项的 modules 缓存
          chunks: 'all'
        }
      }
    }
  }
}

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js')

const workboxSW = new self.WorkboxSW({
  "cacheId": "some-data",
  "clientsClaim": true,
  "directoryIndex": "/"
})

workboxSW.precache([
  {
    "url": "/_data/app.6866b.js",
    "revision": "c708b23519be872c35fa1d141ebbc30f"
  },
  // ...
])

workbox.routing.registerRoute(
  new Reg('/.*'),
  workbox.strategies.netWorkFirst({}),
  'GET'
)

const num = 2333333;
num.toLocaleString('zh', { style: 'decimal' }); // 2,333,333
num.toLocaleString('zh', { style: 'percent' }); // 233,333,300%
num.toLocaleString('zh', { style: 'currency' });    //报错
num.toLocaleString('zh', { style: 'currency', currency: 'CNY' }); // ￥2,333,333.00
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'code' }); // CNY2,333,333.00
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' }); // 2,333,333.00人民币
num.toLocaleString('zh', { minimumIntegerDigits: 5 }); // 02,333.3
//如果不想有分隔符，可以指定useGrouping为false
num.toLocaleString('zh', { minimumIntegerDigits: 5, useGrouping: false }); // 02333.3
num.toLocaleString('zh', { minimumFractionDigits: 2, useGrouping: false }); // 2333.30

// 控制有效数字
const num = 1234.5;
num.toLocaleString('zh', { minimumSignificantDigits: 6, useGrouping: false }); // 1234.50
num.toLocaleString('zh', { maximumSignificantDigits: 4, useGrouping: false }); // 1235

const date = new Date();
date.toLocaleString('en', { weekday: 'narrow', era: 'narrow' }); //W A
date.toLocaleString('en', { weekday: 'short', era: 'short' }); //Wed AD
date.toLocaleString('en', { weekday: 'long', era: 'long' }); //Wednesday Anno Domini

const date = new Date();
date.toLocaleString('zh', { timeZoneName: 'short' }); //2018/4/5 GMT+8 下午7:18:26
date.toLocaleString('zh', { timeZoneName: 'long' }); //2018/4/5 **标准时间 下午7:18:26

const date = new Date();
date.toLocaleString('zh', { year: 'numeric',  month: 'numeric',  day: 'numeric',  hour: 'numeric',  minute: 'numeric',  second: 'numeric', }); //2018/4/5 下午7:30:17
date.toLocaleString('zh', { year: '2-digit',  month: '2-digit',  day: '2-digit',  hour: '2-digit',  minute: '2-digit',  second: '2-digit'  });   //18/04/05 下午7:30:17

const date = new Date();
date.toLocaleString('en', { month: 'narrow' }); //A
date.toLocaleString('en', { month: 'short' }); //Apr
date.toLocaleString('en', { month: 'long' }); //April