var each = function(ary,callback){
    for(var i=0;i<ary.length;i++){
        callback.call(null,i,ary[i])   // 把下标和元素当作参数传给callback函数
    }
}
each([1,2,3],function(i,n){
    console.log([i,n])
})

// 内部迭代器实现 比较两个数组
function compare(ary1,ary2){
    if(ary1.length != ary2.length){
        console.log('不相等')
        return
    }
    each(ary1,function(i,n){
        if(ary2[i]!=n){
            throw new Error('不相等') // console.log('不相等')
        }
    })
    console.log('相等')
}
compare([1,2,3],[1,2,3]) // 相等

var Iterator = function(obj){
    var current = 0
    var next = function(){
        current +=1     
    }
    var isDone = function(){
        return current >= obj.length
    }
    var getCurrentItem = function(){
        return obj[current]
    }
    return {
        next: next,
        isDone: isDone,
        getCurrentItem: getCurrentItem
    }
}

// 外部迭代器实现 比较两个数组
function compare(Iterator1,Iterator2){
    while(!Iterator1.isDone()&&!Iterator2.isDone()){
        if(Iterator1.getCurrentItem() !== Iterator2.getCurrentItem()){
            throw new Error('不相等')
        }
        Iterator1.next()
        Iterator2.next()
    }
    console.log('相等')
}
var Iterator1 = Iterator([4,5,6])
var Iterator2 = Iterator([4,5,6])
compare(Iterator1,Iterator2)   // 相等

function each(obj,callback){
    var value,
    i=0,
    length = obj.length,
    isArray = isArraylike(obj); //假装封装好了一个判断是否是类数组的方法

    if(isArray){    // 迭代类数组
        for(;i<length;i++){
            value = callback.call(null,i,obj[i])
            if(value === false){
                break;
            }
        }
    }else{
        for(i in obj){
            value = callback.call(null,i,obj[i])
            if(value === false){
                break;
            }
        }
    }
    return obj
}

var each = function(ary,callback){
    for(var i=0;i<ary.length;i++){
        if(callback(i,ary[i]) === false){
            break
        }
    }
}
each([11,21,31,41,51],function(){
    if(n>30){
        return false
    }
    console.log(n)
}) // 11 21

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: '/dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard', affix: true }
    }]
  }
]

export const asyncRoutes = [
  //  待审核
  {
    path: '/toPend',
    component: Layout,
    redirect: '/toPend',
    permission: 'toPend',
    title: '待审核',
    children: [
      {
        permission: 'toPend',
        path: '/toPendIndex',
        component: () => import('@/views/toPendManagement/toPendIndex'),
        name: 'toPend',
        meta: {
          title: '待审核',
          icon: 'form',
          noCache: false // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
        }
      }
    ]
  },
  ....
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

/*
  正常流程是在login接口获取到 token，存在vuex中 供登陆
  然后在getInfo接口获取到 路由和用户信息 存储并发送出去 供路由的动态配置

  但是 我们这个项目把getInfo接口取消了 在login接口就直接获取到路由信息
  本来是不需要自己封装info数据的
*/
const actions = {
  // user login
  login({commit}, userInfo) {
    const { username,password } = userInfo
    return new Promise((resolve, reject) => {
      login({ account: username.trim(), password: password }).then(response => {
        const {
          data
        } = response
        // 存储到cookie中 ！很重要 不然登陆不了 接口在 src/utils/auth.js
        setToken({ username: 'admin', password: 'admin' })  
        var info = { username: 'admin', password: 'admin', roles: ['admin'], routes: data.permission } 
         commit('SET_TOKEN', info)  // 存储到 vuex 中 数据格式如上 ↑ 
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
  getInfo({ commit,state }) {
  return new Promise((resolve) => {
      // 可以把这三个写在 info 中 从info里获取
      const roles = 'admin'
      const name = 'Super Admin'
      const avatar = 'http://pic.51yuansu.com/pic3/cover/03/47/85/5badd30d6526d_610.jpg'
      commit('SET_ROLES', roles)
      commit('SET_NAME', name)
      commit('SET_AVATAR', avatar) // 存储在cookie中
      resolve(state.token)  // 发送 info 值 ，传递给 permission
     })
  },
  // get user info 如果是有info接口的传递方法
  /* getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response
        if (!data) {
          reject('Verification failed, please Login again.')
        }
        const { roles, name, avatar } = data
        // roles must be a non-empty array
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }
        commit('SET_ROLES', roles)
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        console.log(data)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  }, */
  ......
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

/*
  本来是根据角色roles权限过滤路由,并显示到侧边栏
  roles.
  但是现在是不根据权限 而是后台传递的路由信息 所以不用判断权限 修改为
  */
const actions = {
  generateRoutes({ commit }, userinfo) {
    return new Promise(resolve => {
       const strRoutes = JSON.stringify(userinfo.routes)
       const accessedRoutes = filterAsyncRoutes(asyncRoutes, strRoutes) //路由的过滤器 获取相同的路由
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

router.beforeEach(async(to, from, next) => {
  if (hasToken) {
    if (to.path === '/login') {
     ...
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        // 登录后会走这里获取roles
        try {
          // get user info
          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
          const userinfo = await store.dispatch('user/getInfo') //获取用户信息
          // 调用store下module下的permission文件中的generateRoutes方法
          const accessRoutes = await store.dispatch('permission/generateRoutes', userinfo) // 获取动态路由
          // dynamically add accessible routes 显示获取到的侧边栏
          router.addRoutes(accessRoutes)  //创建路由

          next({ ...to, replace: true })
        } catch (error) {
          ...
        }
      }
    }
  }

async function async1() {
    console.log("async1 start");
    await async2();
    console.log("async1 end");  // 相当于async2这个promise对象的一个 .then()
}

async function async2() {
   console.log("async2");
}

console.log("script start");  

setTimeout(function () {
    console.log("settimeout");
},0);

async1();   

new Promise(function (resolve) {
    console.log("promise1");   
    resolve();
}).then(function () {
    console.log("promise2");
}); 

console.log("script end");

/**
 * 整体同步的执行顺序
 * 1. console.log("script start")   -> 输出 “ script start ”
 *  
 *  * setTimeout() 进入异步队列 *
 * 
 * 2. async1()  
 *      -> 输出 “ async1 start ” 
 *      -> 进入 async2() 输出 “ async2 ”
 *      -> await等待async2()函数返回一个promise实例 将 console.log('async1 end') 放入异步队列
 * 
 * 3. promise()
 *      -> 输出 “ promise1 ” 
 *      -> resolve() 进入异步队列
 * 
 * 4. console.log("script end")   -> 输出 “ script end ”
 * 
 * 
 * 异步队列：
 * setTimeout()               
 * console.log('async1 end')  
 * resolve()                  
 * 
 * 按宏 / 微任务 顺序输出
 * console.log('async1 end')  // 微任务 1  ->   async1 end
 * resolve()                  // 微任务 2  ->  promise2
 * setTimeout()               // 宏任务 1  ->   settimeout
 * 
*/

async function asyncFunc() {
    const result = await otherAsyncFunc();
    console.log(result);
}
 
// 等价于:
function asyncFunc() {
    return otherAsyncFunc().then(result => {
        console.log(result);
    });
}

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'

// create an axios instance
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest' // ！ 可能是非必须 
  const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor 请求拦截
service.interceptors.request.use(
  config => {
    config.headers = {
      'Content-Type': 'application/json' //  注意：设置很关键
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

/*
M  直接送花给 A
*/
var Flower = function(){}
var M = {
    sendFlower: function(target){
        var flower = new Flower()
        target.receiveFlower(flower)
    }
}
var A = {
    receiveFlower: function(flower){
        console.log('收到花'+flower)
    }
}
M.sendFlower(A)

/*
M 通过 B 送花给 A
*/
var Flower = function(){}
var M = {
    sendFlower: function(target){
        var flower = new Flower()
        target.receiveFlower(flower)
    }
}
var B = {
    receiveFlower: function(flower){
        A.receiveFlower(flower)
    }
}
var A = {
    receiveFlower: function(flower){
        console.log('收到花'+flower)
    }
}
M.sendFlower(B)

/*
现在我们改变故事的背景设定，假设当 A 在心情好的时候收到花，小明表白成功的几率有60%，而当 A 在心情差的时候收到花，小明表白的成功率无限趋近于 0。
小明跟 A 刚刚认识两天，还无法辨别 A 什么时候心情好。如果不合时宜地把花送给 A，花被直接扔掉的可能性很大
但是 A 的朋友 B 却很了解 A，所以小明只管把花交给 B，B 会监听 A 的心情变化，然后选择 A 心情好的时候把花转交给 A，
*/
var Flower = function () {}
var M = {
sendFlower: function (target) {
    var flower = new Flower()
    target.receiveFlower(flower)
}
}
var B = {
receiveFlower: function (flow) {
    A.hasGoodMood(function(){
    A.receiveFlower(flow)
    })
    
}
}
var A = {
receiveFlower: function (flow) {
    console.log('get flower' + flow)
},
hasGoodMood: function(fn){
    setTimeout(() => {
    fn()
    }, 1000);
}
}

M.sendFlower(B)

var B = {
    receiveFlower: function(flower){
        A.listenGoodMood(function(){    //监听A的好心情
            var flower = new Flower() //延迟创建flower对象
            A.receiveFlower(flower)
        })
    }
}

var oImg = (function(){
    var imgNode = document.createElement('img')
    document.body.appendChild(imgNode)
    return {
        setSrc : function(src){
            imgNode.src = src
        }
    }
})()

//代理对象
var proxyImage = (function(){
    var img = new Image()   //获取的img对象
    img.onload = function(){
        oImg.setSrc(this.src)   //img.src
    }
    return {
        setSrc: function(src){
            oImg.setSrc('./loading.gif')
            img.src = src
        }
    }
})()
proxyImage.setSrc('http://....jpg')

//不使用代理的方式
var oImg = (function(){
    var imgNode = document.createElement('img')
    document.body.appendChild(imgNode)
    var img = new Image
    img.onload = function(){
        imgNode.src = img.src
    }
    return {
        setSrc : function(src){
            imgNode.src = './timg.jpg'
            img.src = src
        }
    }
})()
oImg.setSrc('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=629448732,2965351611&fm=15&gp=0.jpg')