var str = 'abcded';
var obj = new String(str);

function newToString() {
  return 'hello world'
}

function func(val){
  val.toString = newToString;
}

func(str);
console.log(str); // abcded

func(obj);
console.log(String(obj)) // hello world

1. NaN不等于自身

NaN == (===/ != /!==) NaN  // true

2. 符号可以转为true,但不等值于true

Boolean(Symbol()) ,!Symbol(), Symbol() ==(===) true  // true false false

3. 即使字面量相同的引用类型，也是不严格相等的
{} === {}, /./ === /./, function() {} === function() {} // false false false

import * as mynames from 'module'; // mynames.x是对象属性读取

import {x} from 'module'; // x是来自原模块的引用，得到的是引用值

let { x : x2 }  = mynames // x2 是本地声明的变量可修改

function foo() {
    var showInArrow = () => {
        console.log(this.name);
    }
    showInArrow();
    var obj = {
        showInArrow,
        name: 'aObject',
        showThis: function() {
            console.log(this.name)
        }
    }
    with(obj) {
      var showThis2 = () => { console.log(this.name)}
      showThis();
      showThis2();
      showInArrow();
    }
}
foo.call({name: 'outSide'})
==>
outSide
aObject
outSide
outSide

function MyFunction() {}

MyFunction.prototype = new Function();
var myFunc = new MyFunction();

myFunc(); //触发异常无法执行

function foo(filename) {
    var [filename2, ...args] = arguments;

    // filename 会影响arguments
    filename = 'new file name';
    console.log(arguments[0]); // new file name
    console.log(filename2); //  test.txt

    // arguments 也会影响filename
    arguments[0] = filename2;
    console.log(filename);//  test.txt

    // 使用filenam2时，没有影响
    filename2 = 'update again';
    console.log(arguments[0]); //  test.txt
    console.log(filename);//  test.txt
}
foo('test.txt');

function foo(a=1,b,c=2,d) {
    console.log(...arguments); // undefined,100,200,300
    console.log(a,b,c,d); // 1,100,200,300
}
foo(undefined,100,200,300);

function foo(msg) {
   console.log(msg)
}
var i = 100;
foo(i+=20, i*=2, 'value:'+i); // 120
foo(i); // 240

var f = function func2() {
    console.log(typeof func2);
}

f() // function

console.log(typeof func2); // undefined

class MyFunc {
    static foo() {
        console.log('prototype method in myFunc');
    }
}

class MyFuncEx extends MyFunc {
    static foo() {
        console.log('own method in MyFuncEX');
    }
    callMe() {
        console.log('call me in MyFuncEx');
    }
}

var f = MyFuncEx.bind();
MyFuncEx.foo(); // own method in MyFuncEX
f.foo(); //  prototype method in myFunc

console.log('prototype' in Object.getPrototypeOf(MyFunc)) // false

// MyFunc.bind()生成的函数没有prototype
// class MyFuncEX2 extends MyFunc.bind() {} // 会报错

//  MyFuncEx原型有继承自MyFunc的prototype,可以声明,但实例不会被继承
class MyFuncEx3 extends MyFuncEx.bind() {}

// 继续继承MyFuncEx原型的prototype属性，实例可继承
class MyFuncEx4 extends MyFuncEx {}
(new MyFuncEx4).callMe() //call me in MyFuncEx

console.log('callMe' in Object.getPrototypeOf(MyFuncEx4.prototype)); // true
console.log('callMe' in Object.getPrototypeOf(MyFuncEx3.prototype)); // false
console.log('callMe' in  new MyFuncEx3); // false

var obj = {
    get fact() {
        const fact = x=> x && x*fact(x-1) || this.power || 1;
        return fact
    }
}

obj.power = 100;
obj.fact(9) // 36288000

var obj = {
    [Symbol.iterator] : function*() {
        var obj = {
    [Symbol.iterator] : function*() {
        for(var i =0;i< 10; i++) yield i;
    }
}

console.log(...obj) // 0 1 2 3 4 5 6 7 8 9
    }
}

console.log(...obj) // 0 1 2 3 4 5 6 7 8 9

var obj = {
    start: 3,
    [Symbol.iterator] : function*(start = 5, end = 10) {
        var {start, end} = {start, end, ...this};
        for(var i=start;i<end; i++) yield i;
    }
}

console.log(...obj) // 3 4 5 6 7 8 9
obj.end = 6;
console.log(...obj) // 3 4 5

delete obj.end
delete obj.start
console.log(...obj) // 5 6 7 8 9

var msg = (function myFunc(num) {
    return myFunc = typeof myFunc;
})(10) + ", and upvalue's type is: " + typeof myFunc;

console.log(msg); //  function, and upvalue's type is: undefined

var x = new Boolean(false)
console.log(x.valueOf())  ===> false
console.log(!!x) ===> false x此时是对象

var arr = [1,2,'345',,12];
var { 0: x, 1:y, length} = arr;
console.log(x,y,length); // 1,2,5
var x = {length: 100, ...arr};
console.log(x.length + ' => ' + Object.keys(x)); // 100 => 0,1,2,4,length

console.log(new Set('abcadf134oaafshjafgoi').size) ==> 14

Object.prototype.x = 100;
console.log(x) // 100
Object.getPrototypeOf(Object.getPrototypeOf(global)) === Object.prototype // true
global.constructor === Object

let list:number[] = [1,2,3]
或者
let list Array<number> = [1,2,3]

let x:[string,number]

//结合解构
function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f(input);

type C = { a: string, b?: number }
function f({ a, b }: C): void {
    // ...
}

enum Color {Red, Green, Blue} //默认从0开始给元素编号
let c: Color = Color.Red; //访问元素返回值
console.log(c) ===>0

enum Color {Red = 1, Green, Blue=4,Yellow} //未赋值的依据赋值的前一个，加1
let c: Color = Color.Green;
console.log(c) ===>2 color.Yellow ===>5
let colorName: string = Color[2]; ===>'Green'  Color[6]===>undefined //没赋值的为undefined

function warnUser(): void {
    console.log("This is my warning message");
}

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

const foo = {};
foo.bar = 123; // Error: 'bar' 属性不存在于 ‘{}’
foo.bas = 'hello'; // Error: 'bas' 属性不存在于 '{}'

interface Foo {
  bar: number;
  bas: string;
}

const foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

interface LabelledValue {
  label: string;
  color?: string;//在可选属性名字定义的后面加一个?符号,这个属性可传可不传
  //可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误
  readonly y: number;//属性名前用 readonly来指定只读属性
  [propName: string]: any;//索引签名，表示LabelledValue可以有任意数量的属性，只要不是上面已经定义过的 ；结合as 可以避免额外属性检查
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

interface SearchFunc {
  (source: string, subString: string): boolean; //输入参数名，类型和返回值类型
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) { //参数名可以和SearchFunc定义的不同，因为只会检查对应位置类型
  let result = source.search(subString);
  return result > -1;
}

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

import React,{useState,useEffect}from 'react';

const [state,setState] = useState(initialState)
state 即为声明的变量
setState 即更新函数
initialState即state初始值，不传入时为undefined
使用：
const [count,setCount] = useState(0)
const [obj,setObj] = useState({a:1})

function App() {
  const [data,setData] = useState(3);
  useEffect(()=>{
    console.log('useEffect');
    let id = setTimeout(()=>{
      setData({a:1})
      // clearTimeout(id)
    },5000)
    return ()=>{ //卸载时执行
      clearTimeout(id)
    }
  },[]) //传入第二个参数，控制是否每次render完都执行

  useEffect(()=>{
    console.log('会从上到下执行')
  })
  return (
    <div>
      {
        (()=>{
          console.log('render')
          return null
        })()
      }
      <p>{JSON.stringify(data)}</p>
    </div>
  )
}

const MyContext = React.createContext();
const value = useContext(MyContext);

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};
const ThemeContext = React.createContext(); //创建context 对象，可传入value初始值

function App() {
  let [thems,setThems] = useState(themes.dark)
  useEffect(()=>{
    console.log('useEffect');
    let id = setTimeout(()=>{
      setThems(themes.light)
    },5000)
    return ()=>{
      clearTimeout(id)
    }
  },[])
  return (
    <ThemeContext.Provider value={thems}>
      <Toolbar />
      <Child2 />
    </ThemeContext.Provider>
  )
}
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  //获取最近的ThemeContext.Provider 标签上value的绑定值
  const theme = useContext(ThemeContext); 
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}
//子组件不依赖constext的数据时，使用React.memo可以避免在context有变化时进行的更新
const Child2 = React.memo((props)=>{
  console.log('fire')
  return <div>xxxxxx</div>
})

const refContainer = useRef(initialValue);

function TextInputWithFocusButton() {
  const inputEl = useRef(null);//生成绑定对象
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
export default App;

function MeasureExample() {
  const [height, setHeight] = useState(0);
  console.log('fire')
  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  },[]);
  return (
    <>
      <h1 ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(height)}px tall</h2>
    </>
  );
}

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

function Child({event,data}){
  console.log('child-render')
  useEffect(()=>{
    console.log('child-effect')
    event()
  },[event])
return(
  <div>
    <p>child</p>
    <button onClick = {event}>调用父event</button>
  </div>
)
}
const set = new Set()
function Test(){
  const [count,setCount] = useState(0)
  const [data,setData] = useState({})
  const handle = useCallback(async ()=>{
    function temp(){
      setTimeout(()=>{
        return 'xxxx'
      },1000)
    }
    const res = await temp()
    setData(res)
    console.log('paent-useCallback',data)
  },[count]) //count变化才会生成新的handle,才会引起child组件的useEffect的执行
  set.add(handle)
  console.log('parent-render====>',data)
  return (
    <div>
      <button 
        onClick={e=>{
          setCount(count + 1)
        }}
      >
        count++
      </button>
      <p>set size:{set.size}</p>
      <p>count:{count}</p>
      <Child event={handle} />
    </div>
  )
}

function Test(){
  const [count,setCount] = useState(0)
  const handle1 = useMemo(()=>{
    console.log('handle1',count)
    return count
  },[])
  console.log('render-parent')
  return (
    <div>
      <p>
        demo:{count}
        <button onClick={()=>setCount(count+1)}>++COUNT</button>
      </p>
      <Child handle = {handle1} />
    </div>
  )
}
function Child({handle}){
  console.log('render-child')
  return (
    <div>
      <p>child</p>
      <p>prop-data:{handle}</p>
    </div>
  )
}

打印结果：
handle1 0
render-parent
render-child

const [state, dispatch] = useReducer(reducer, initialArg, init);

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

const [state, dispatch] = useReducer(
    reducer,
    {count: initialCount}
  );

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

import 'amfe-flexible'

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

module.exports = {
  "plugins": {
    "postcss-import": {},
    "autoprefixer": {},
    'postcss-px2rem-exclude':{
        //rootValue: remConfig.remUnit,
        remUnit: 75,
        exclude: /node_modules/i,
        mediaQuery: false,
        minPixelValue: 3
      }
  }
}

exports.cssLoaders = function (options) {
  //新增
  const px2remLoader = {
    loader:'px2rem-loader',
    options:{
      remUnit:remConfig.remUnit
    }
  }
  //修改
  function generateLoaders (loader, loaderOptions) {
    //const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
  }
}

src/components/SvgIcon/index.js
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件

// 全局注册
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

import './icons'

module: {
    rules: [
      { //在url-loader配置前面新增
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        },
        exclude: [resolve('src/icons')] //修改url-loader配置
      },
    ]

<svg-icon icon-class="user"/>

$('div').eq(0).show().end().eq(1).hide();

jQuery.fn = jQuery.prototype = {
  pushStack: function( elems ) {
		// Build a new jQuery matched element set
		var ret = jQuery.merge( this.constructor(), elems );
		// Add the old object onto the stack (as a reference)
		ret.prevObject = this;
		// Return the newly-formed element set
		return ret;
	},
  eq: function( i ) {
		var len = this.length,
			j = +i + ( i < 0 ? len : 0 );
		return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
	},
  show: function() {
		return showHide( this, true );
	},
  hide: function() {
		return showHide( this );
	},
	end: function() {
		return this.prevObject || this.constructor();
	},
  
  css: function( name, value ) {
		return access( this, function( elem, name, value ) {	。。。。}, name, value, arguments.length > 1 );
	}
}
function showHide( elements, show ) {
  。。。。
  return elements;
}
var access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
  var i = 0,
    len = elems.length,
    bulk = key == null;
  if ( toType( key ) === "object" ) {
    chainable = true;
    for ( i in key ) {。。。。}
  } else if ( value !== undefined ) {
    chainable = true;
    if ( !isFunction( value ) ) { 。。。。}
    if ( bulk ) { 。。。。}
    if ( fn ) { 。。。。。}
  }
  //当是链式调用时，返回对象
  if ( chainable ) {
    return elems;
  }
  // Gets
  if ( bulk ) {
    return fn.call( elems );
  }

  return len ? fn( elems[ 0 ], key ) : emptyGet;
};

function asyncToGenerator(generatorFunc) {
    return function() {
      const gen = generatorFunc.apply(this, arguments)
      return new Promise((resolve, reject) => {
        function step(key, arg) {
          let generatorResult
          try {
            generatorResult = gen[key](arg)
          } catch (error) {
            return reject(error)
          }
          const { value, done } = generatorResult
          if (done) {
            return resolve(value)
          } else {
            return Promise.resolve(value).then(
              val => step('next', val), //递归
              err => step('throw', err)
            )
          }
        }
        step("next")
      })
    }
}

let index = -1
return dispatch(0) //从第一个中间件开始执行
function dispatch (i) {
  //防止next 在一个中间件中被调用多次
  if (i <= index) return Promise.reject(new Error('next() called multiple times'))
  index = i
  let fn = middleware[i] //拿到中间件
  if (i === middleware.length) fn = next //如果中间件函数全部调用完，fn 赋值为next,next为undefined
  if (!fn) return Promise.resolve() //fn为next=>undefined时成立，即执行到最后返回一个Promise.resolve() 可以继续写then
  try {//try-catch 用于保证错误在promise的情况能够正常捕获
    //执行中间件函数，传入ctx,next参数，next即dispatch.bind(null, i + 1)，
    //递归调用下一个中间件函数
    //从这一步可以实现await next()时，先执行下一个中间件函数
    //中间件有调用next,就利用await暂停当前中间件执行，开始执行下一个中间件
    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
  } catch (err) {
    return Promise.reject(err)
  }
}

router.beforeEach((to, from, next) => {
  next()
})

function confirmTransition (route, onComplete, onAbort) {
  var queue = [].concat(
    // in-component leave guards
    extractLeaveGuards(deactivated),
    // global before hooks
    this.router.beforeHooks, //beforeEach钩子函数传入的函数集合
    extractUpdateHooks(updated),
    activated.map(function (m) { return m.beforeEnter; }),
    resolveAsyncComponents(activated)
  );
  this.pending = route;
  var iterator = function (hook, next) {
    if (this$1.pending !== route) {
      return abort()
    }
    try {
      hook(route, current, function (to) { 。。。。。。});
    } catch (e) {
      abort(e);
    }
  };
  runQueue(queue, iterator, function () {
    var postEnterCbs = [];
    var isValid = function () { return this$1.current === route; };
    var enterGuards = extractEnterGuards(activated, postEnterCbs, isValid);
    var queue = enterGuards.concat(this$1.router.resolveHooks);
    runQueue(queue, iterator, function () {。。。。});
  });
}

function runQueue (queue, fn, cb) {
    var step = function (index) {
      if (index >= queue.length) {
        cb();
      } else {
        if (queue[index]) { //拿到生命周期函数传递给fn函数
          fn(queue[index], function () {
            step(index + 1);
          });
        } else {
          step(index + 1);
        }
      }
    };
    step(0);
  }

iterator = function (hook, next) {
    if (this$1.pending !== route) {
      return abort()
    }
    try {
      hook(route, current, function (to) { 。。。。。。});
    } catch (e) {
      abort(e);
    }
  };

hook(route, current, function (to) { 。。。。。。});

function (to) {
  if (to === false || isError(to)) {
    // next(false) -> abort navigation, ensure current URL
    this$1.ensureURL(true);
    abort(to);
  } else if (
    typeof to === 'string' ||
    (typeof to === 'object' &&
      (typeof to.path === 'string' || typeof to.name === 'string'))
  ) {
    // next('/') or next({ path: '/' }) -> redirect
    abort();
    if (typeof to === 'object' && to.replace) {
      this$1.replace(to);
    } else {
      this$1.push(to);
    }
  } else {
    // confirm transition and pass on the value
    next(to);
  }
}

function () {
  step(index + 1);
}

屏幕尺寸、屏幕分辨率-->对角线分辨率/屏幕尺寸-->屏幕像素密度PPI
                                             |
              设备像素比dpr = 物理像素 / 设备独立像素dip(dp)
                                             |
                                       viewport: scale
                                             |
                                          CSS像素px

const routes = [
  { path: '/foo',name:'foo', component: Foo,children:[{ path: '/bar2/:id?',name:'bar2', component: Foo1 }]}
]
const routes1 = [
  { path: '/foo',name:'foo', component: Foo ,children:[{ path: '/bar21/:id?',name:'bar21', component: Foo2 }]},
]
const router = new VueRouter({
  routes
})
router.addRoutes(routes1)

function addRoutes (routes) {
  createRouteMap(routes, pathList, pathMap, nameMap);
}

routes.forEach(function (route) {
  addRouteRecord(pathList, pathMap, nameMap, route);
});

function addRouteRecord ( pathList, pathMap, nameMap ) {
  //如果有子路由，递归添加到路由表中
  if (route.children) {
    route.children.forEach(function (child) {
      var childMatchAs = matchAs
        ? cleanPath((matchAs + "/" + (child.path)))
        : undefined;
        console.log(childMatchAs)
      addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs);
    });
  }

  if (!pathMap[record.path]) { 关键！！！！！！详见下文
    pathList.push(record.path);
    pathMap[record.path] = record;
  }

  if (name) {
    if (!nameMap[name]) { 
      nameMap[name] = record;
    } else if ( !matchAs) { //直接警告，不更新
      warn(
        false,
        "Duplicate named routes definition: " +
          "{ name: \"" + name + "\", path: \"" + (record.path) + "\" }"
      );
    }
  }
}

router.addRoutes(routes: Array<RouteConfig>)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

History.prototype.confirmTransition = function confirmTransition (route, onComplete, onAbort) {
var queue = [].concat(
  // in-component leave guards
  extractLeaveGuards(deactivated),
  // global before hooks
  this.router.beforeHooks,
  // in-component update hooks
  extractUpdateHooks(updated),
  // in-config enter guards
  activated.map(function (m) { return m.beforeEnter; }),
  // async components
  resolveAsyncComponents(activated)
);

this.pending = route;
var iterator = function (hook, next) {
  if (this$1.pending !== route) {
    return abort()
  }
  try {
    hook(route, current, function (to) { 
      if (to === false || isError(to)) {
        // next(false) -> abort navigation, ensure current URL
        this$1.ensureURL(true);
        abort(to);
      } else if (
        typeof to === 'string' ||
        (typeof to === 'object' &&
          (typeof to.path === 'string' || typeof to.name === 'string'))
      ) {
        // next('/') or next({ path: '/' }) -> redirect
        abort();
        if (typeof to === 'object' && to.replace) { 
          this$1.replace(to);
        } else { 
          this$1.push(to); //引起递归调用
        }
      } else {
        // confirm transition and pass on the value
        next(to);
      }
    });
  } catch (e) {
    abort(e);
  }
};
}
History.prototype.push = function push (location, onComplete, onAbort) {
  var this$1 = this;

  var ref = this;
  var fromRoute = ref.current;
  this.transitionTo(location, function (route) {
    pushState(cleanPath(this$1.base + route.fullPath));
    handleScroll(this$1.router, route, fromRoute, false);
    onComplete && onComplete(route);
  }, onAbort);
};
History.prototype.transitionTo = function transitionTo (
  location,
  onComplete,
  onAbort
) {
  var this$1 = this;
  var route = this.router.match(location, this.current);
  this.confirmTransition(...)
}

if(!hasMenus){
  hasMenus = true
  let temp = await createRoutes() //拿到数据
  router.addRoutes(temp) //添加路由
  if(!to.name){ //处理刷新，刷新时，当前页面name会变成null
    next({name:to.path.substring(1)})
  }
}
if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
  cookies.getAuthorization().then(token=>{
    if(!token){
      next({
        name: 'login',
        params: {from: to.name}
      })
    }else{
      next()
    }
  })
} else {
  next() //终止递归
}

zh-CN.js 简体中文
'开始日期': '开始日期',
'结束日期': '结束日期',

zh-TW.js 繁体中文
'开始日期': '開始日期',
'结束日期': '結束日期',

var fs = require('fs'); //引入文件处理模块
function read_file_sync(file_path) {
  var data = fs.readFileSync(file_path, 'utf-8'); //读取文件
  let arr = file_path.split('/')
  let len = arr.length
  let temp = arr[len-1].split('.')[0] 
  //获取文件名，如果待处理文件是子目录下的，保持生成的文本提取文件和新文件与原来文件保持相同目录结构
  let fileName = arr[len-2] === 'console'?temp:arr.slice(4,arr.length-1).join('/')+'/'+temp //子目录情况
  GetChinese(data,fileName)
}
read_file_sync('./src/components/console/san-manage.vue')

function GetChinese(strValue,fileName) { 
  if(strValue=== null || strValue === ""){ 
    return []
   }
  let originData = strValue
  let arr = getWords(originData) //提取简体中文
  let obj = {}
  arr.map(item=>{obj[item]=''})
  let str = JSON.stringify(obj,'',"  ")
  str = 'export default '+ str
  //生成文本文件
  fs.writeFile('./words/js/'+fileName+'.js', str,function(err){ 
    if(err) console.log('提取操作失败');
    else console.log('提取操作成功');
  });
  //添加i18n全局函数，替换老文件，生成新文件
  let index = originData.indexOf('<script>')
  let template = originData.substring(0,index)//这里仅替换VUE文件的template模板部分，因为js部分有时涉及到拼接处理，单独处理
  let templateResult = partTransfor(template) //得到替换结果
  let other = originData.substring(index)//获取vue文件里面的js部分
  //二者拼接写入新文件
  fs.writeFile('./words/vue/'+fileName+'.vue', templateResult+other, function(err){ 
    if(err) console.log('重写文件操作失败');
    else console.log('重写文件操作成功');
  });
}

function getWords(strValue,flag){
 //flag为true的时候，提取template部分简体中文，供替换使用
 //flag为false的时候，提取全部简体中文，二者正则不同
  var reg = flag? /\"?([0-9a-zA-Z\u4e00-\u9fa5|\-|\s|\(|\)\:\：\、\，\,\！\!\。])+/g : /(([0-9a-zA-Z]+)?[\u4e00-\u9fa5|\-|\s|\(|\)\、\，\,\:\：\！\!\。\~]([0-9a-zA-Z]+)?)+/g
  //匹配注释的正则，注释不用提取翻译，故提取前先移除
  let regCommon = /(\/\/[\w\s\,\，\‘\(\)\—\:\：\=\>\、\？\。a-zA-Z\.\u4e00-\u9fa5|\[|\]|-]*\n)|(\<\!\-\-[\w\s\‘\-\、a-zA-Z\u4e00-\u9fa5|\[|\]|-]*\-\-\>)|(\/\*[\w\‘\s\r\n\*\u4e00-\u9fa5|\-]*\*\/)/g
  strValue = strValue.replace(regCommon, function(word) { // 去除注释后的文本
    return ''
  });
  //优化提取结果，去重，过滤，排序
  let res = [...new Set(strValue.match(reg))].filter(item=>{return /([\u4e00-\u9fa5])+/g.test(item)}).map(item=>{return item.trim()})
  res = res.sort((a,b)=>{
    return b.length-a.length
  })
  return res
}

function partTransfor(strValue){
  let originData = strValue
  let res = getWords(strValue,true) //拿到template部分简体中文
  for(let str of res){
    let placeholder = str.charAt(0) ==='\"' 
    let temp = placeholder?str.substring(1):str
    let reg1 = new RegExp(str,'ig')
    let reg2 = new RegExp("placeholder=\"("+temp+")\"",'ig')
    let reg = placeholder?reg2:reg1
    originData = originData.replace(reg,function(word,str){
      if(placeholder){ //如果是placeholder部分的简体中文
        return ':placeholder="i18nTitle(\''+str+'\')"'
      }else{
        if(/[\u4e00-\u9fa5\:\']/.test(originData[str-1]) || /[\u4e00-\u9fa5\:\']/.test(originData[str+word])){ //对于一些包含特殊字符连接的手动处理
          return word
        }
        return '{{i18nTitle(\''+word+'\')}}' //对于纯简体中文用函数包裹进行替换
      }
    })
  }
  return originData
}

1.js里面用this.i18nTitle('xxx')
2.placeholder='xxx'改成:placehoder="i18nTitle('xxxx')"
3.单纯标签的这种，<label>xxxx</label>改成<label>{{i18nTitle(xxxx)}}</label>

var fs = require('fs');
var path = require('path');//解析需要遍历的文件夹
var filePath = path.resolve('./words/js');
var words = []
const getFileOfDirSync = (dir) => {
  let files = fs.readdirSync(dir);
  let result;
  if (files) {
    result = files.map((file) => {
      let filePath = path.join(dir, file);
      if (fs.statSync(filePath).isDirectory()) {
        return getFileOfDirSync(filePath); //递归
      } else {
        let content = fs.readFileSync(filePath, 'utf-8');
        content = content.replace('export default','module.exports =') //更改模块编写方法
        fs.writeFileSync(filePath,content);//方便读取
        let data = require(filePath)
        let keys = Object.keys(data)
        let comment = content.substring(0,content.indexOf('module'))
        return keys;
      }
    });
  }
  return [... new Set(result.flat(Infinity))]; //数组摊平去重
}
let res = getFileOfDirSync(filePath)
res = res.sort((a,b)=>{
  return b.length-a.length
})
let obj = {}
res.map(item=>{obj[item]=''})
//res.map(item=>{obj[item]=item}) //直接生成简体中文翻译文件
let str = JSON.stringify(obj,'',"  ")
str = 'export default '+ str
fs.writeFile('./words/cnAll1.js', str,function(err){
  if(err) console.log('提取操作失败');
  else console.log('提取操作成功');
});

let obj = {}
let ll = {}
let llkeys  = Object.keys({ //翻译结果
  '建議選擇購買當前雲裸機已掛載使用的存儲類型和磁盤類型':'',
  '超高端存儲：穩定性和安全性最好，適用於核心業務系統':'',
  '高端存儲：穩定性和安全性較好，適用於重要業務系統':'',
  '中端存儲：穩定性和安全性壹般，適用於壹般業務系統':'',
  '普通存儲：穩定性和安全性較差，適用於邊緣業務系統':'',
  'NVME：新壹代固態磁盤，性能最好、延時最低，適用於核心業務系統':'',
  'SSD：固態磁盤，性能較好、延時較低，適用於重要業務系統':'',
  'SAS：機械磁盤，性能壹般、延時壹般，適用於壹般業務系統':'',
  'SATA：機械磁盤，性能較差、延時較高，適用於邊緣業務系統和歸檔數據':'',
})
let objkeys = Object.keys({ //简体中文
  '建议选择购买当前云裸机已挂载使用的存储类型和磁盘类型':'',
  '超高端存储：稳定性和安全性最好，适用于核心业务系统':'',
  '高端存储：稳定性和安全性较好，适用于重要业务系统':'',
  '中端存储：稳定性和安全性一般，适用于一般业务系统':'',
  '普通存储：稳定性和安全性较差，适用于边缘业务系统':'',
  'NVME：新一代固态磁盘，性能最好、延时最低，适用于核心业务系统':'',
  'SSD：固态磁盘，性能较好、延时较低，适用于重要业务系统':'',
  'SAS：机械磁盘，性能一般、延时一般，适用于一般业务系统':'',
  'SATA：机械磁盘，性能较差、延时较高，适用于边缘业务系统和归档数据':'',
})
let tw = {}
objkeys.map((item,i)=>{
  tw[item] = llkeys[i] //生成繁体翻译文件
  obj[item] = item //生成简体中文
})

let str = JSON.stringify(tw,'',"  ")
str = 'export default '+ str
fs.writeFile('zh-TW.js', str,function(err){
  if(err) console.log('提取操作失败');
  else console.log('提取操作成功');
});

str = JSON.stringify(obj,'',"  ")
str = 'export default '+ str
fs.writeFile('zh-CN.js', str,function(err){
  if(err) console.log('提取操作失败');
  else console.log('提取操作成功');
});

let data = require('./words/zh-CN')
let keys = Object.keys(data) //老数据
let dataNew = require('./words/cnAll1') 
let keysNew = Object.keys(dataNew)//新页面数据
let obj = {}
let newWords = keysNew.filter(newkey=>{
   return !keys.includes(newkey)
}).map(item=>{
  obj[item]=item
  return item
})//得到新增的文本
let ll = {} //新增文本翻译结果
let llkeys  = Object.keys(ll)
let objkeys = Object.keys(obj)
let tw = {}
objkeys.map((item,i)=>{
  tw[item] = llkeys[i]
})
//生成简体和繁体翻译文件，再复制粘贴到老文件中
// let str = JSON.stringify(obj,'',"  ")
let str = JSON.stringify(tw,'',"  ")
str = 'export default '+ str
fs.writeFile('./words/compareResult3.js', str,function(err){
  if(err) console.log('提取操作失败');
  else console.log('提取操作成功');
});

Vue.prototype.$t = function (key) {
  var values = [], len = arguments.length - 1;
  while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];

  var i18n = this.$i18n;
  return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))
};

VueI18n.prototype._getMessages = function _getMessages () { return this._vm.messages };

//this._vm.messages 值生成
VueI18n.prototype.setLocaleMessage = function setLocaleMessage (locale, message) {
  if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {
    this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);
  }
  this._vm.$set(this._vm.messages, locale, message);
};

VueI18n.prototype.mergeLocaleMessage = function mergeLocaleMessage (locale, message) {
  if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {
    this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);
  }
  this._vm.$set(this._vm.messages, locale, merge({}, this._vm.messages[locale] || {}, message));
};

VueI18n.prototype._t = function _t (key, _locale, messages, host) {
    var ref;

    var values = [], len = arguments.length - 4;
    while ( len-- > 0 ) values[ len ] = arguments[ len + 4 ];
  if (!key) { return '' }

  var parsedArgs = parseArgs.apply(void 0, values);
  var locale = parsedArgs.locale || _locale;

  var ret = this._translate(
    messages, locale, this.fallbackLocale, key,
    host, 'string', parsedArgs.params
  );
  if (this._isFallbackRoot(ret)) {
    if (!this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {
      warn(("Fall back to translate the keypath '" + key + "' with root locale."));
    }
    /* istanbul ignore if */
    if (!this._root) { throw Error('unexpected error') }
    return (ref = this._root).$t.apply(ref, [ key ].concat( values ))
  } else {
    ret = this._warnDefault(locale, key, ret, host, values, 'string');
    if (this._postTranslation) {
      ret = this._postTranslation(ret);
    }
    return ret
  }
};

VueI18n.prototype._translate = function _translate (
  messages,
  locale,
  fallback,
  key,
  host,
  interpolateMode,
  args
) { 
  //messages[locale] 拿到语言库
  var res =
    this._interpolate(locale, messages[locale], key, host, interpolateMode, args, [key]);
  if (!isNull(res)) { return res }

  res = this._interpolate(fallback, messages[fallback], key, host, interpolateMode, args, [key]);
  if (!isNull(res)) {
    if (!this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {
      warn(("Fall back to translate the keypath '" + key + "' with '" + fallback + "' locale."));
    }
    return res
  } else {
    return null
  }
};

VueI18n.prototype._interpolate = function _interpolate (
  locale,
  message,
  key,
  host,
  interpolateMode,
  values,
  visitedLinkStack
) {
  if (!message) { return null }

  var pathRet = this._path.getPathValue(message, key);
  if (Array.isArray(pathRet) || isPlainObject(pathRet)) { return pathRet }

  var ret;
  if (isNull(pathRet)) {
    /* istanbul ignore else */
    if (isPlainObject(message)) {
      ret = message[key]; //从语言库里面拿到对应翻译值
      if (typeof ret !== 'string') {
        if (!this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {
          warn(("Value of key '" + key + "' is not a string!"));
        }
        return null
      }
    } else {
      return null
    }
  } else {
    /* istanbul ignore else */
    if (typeof pathRet === 'string') {
      ret = pathRet;
    } else {
      if (!this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {
        warn(("Value of key '" + key + "' is not a string!"));
      }
      return null
    }
  }

  // Check for the existence of links within the translated string
  if (ret.indexOf('@:') >= 0 || ret.indexOf('@.') >= 0) {
    ret = this._link(locale, message, ret, host, 'raw', values, visitedLinkStack);
  }

  return this._render(ret, interpolateMode, values, key)
};

VueI18n.prototype._render = function _render (message, interpolateMode, values, path) {
  var ret = this._formatter.interpolate(message, values, path);
  // If the custom formatter refuses to work - apply the default one
  if (!ret) {
    ret = defaultFormatter.interpolate(message, values, path);
  }
  // if interpolateMode is **not** 'string' ('row'),
  // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter
  return interpolateMode === 'string' && typeof ret !== 'string' ? ret.join('') : ret
};