class HistoryRoute{
  constructor(){
    this.current=null
  }
}
class vueRouter{
  constructor(options){
    this.history= new HistoryRoute;
    this.mode = options.mode || 'hash'
    this.routes = options.routes || []
    this.routesMap = this.createMap(this.routes)
    this.init()
  }
  Init(){
    if(this.mode=='hash'){
      //如果没有#号，自动加上#
      location.hash?"":location.hash='/'
      //监听hash改变
      window.addEventListener('load',()=>{
        //slice去掉#号
        this.history.current=location.hash.slice(1)
      })
      window.addEventListener('hashchange',()=>{
        this.history.current=location.hash.slice(1)
      })
    }else{
      location.pathname?"":location.pathname='/'
      window.addEventListener('load',()=>{
        this.history.current=location.pathname
      })
      window.addEventListener('hashchange',()=>{
        this.history.current=location.pathname
      })
    }
  }
  //将路由对象[{path:'xxx',component:a}]转成：{xxx:a}
  createMap(routes){
    return routes.reduce((memo,current)=>{
      memo[current.path] = current.components
      return memo
    })
  }  
}
//定义属性标签 get set ===>供VUE.use使用
//VUE.use(xxxx) xxx是一个函数时直接运行xxx函数，xxx是一个对象或者类时，运行其上面的install方法
vueRouter.install = function(Vue){
  Vue.mixin({
    beforeCreate(){
      //this指向当前组件实例，this.$options指向创建VUE实例时传入的配置项
      if(this.$options&&this.$option.router){
        //把当前实例挂在_root上
        this._root = this
        this._router = this.$options.router
        Vue.util.defineReactive(this,'current',this._router.history) //双向绑定，对路由变化进行监听，
      }
      Object.defineProperty(this,"$router",{ //能够获取$router但不能修改的原理。防止用户修改_router
        get(){
          return this._root._router;
        }
      })
    }
  })
  Vue.components('router-view',{
    render(r){
      //拿到当前路径
      //this指向proxy,当前组件代理对象；this._self当前组件实例化对象；this._self._root当前组件对象
      let current = this._self._root._router.history.current
      let routeMap = this._self._root._router.routeMap
      return r(routeMap[current])
    }
  })
}
module.exports = vueRouter

加载时执行：
a.js
exports.done = ture
var b = require('b.js')
console.log('a.js-done')

b.js
exports.done = false
var a = require('a.js')
console.log(a.done)
console.log('b.js-done')

App.js   执行App.js
var a = require('a.js') // 因为引用b.js，执行b.js代码故打印出true b.js-done，引用完毕后接着执行打印出 a.js-done
var b = require('b.js')// 已经被a引用过，不再执行 直接在缓存中找出 exports {done：false} 返回
console.log(a.done)
console.log(b.done) 

如果a.js改成如下
var b = require('b.js')
exports.done = ture
console.log('a.js-done')
执行App.js
打印结果为undefined b.js-done a.js-done true false 
因为a依赖b时，执行b，b再依赖a时，exports.done = ture语句还未执行，故a 的 exports 为{} exports.done自然为undefined

/** a.js */

define(['b'], function(b) {
  console.log(b)
  var hello = function(){
    console.log('hello work')
  }
  return {
    Hello:Hello
  }
});

/** b.js */

define(function(){
  var name = 'max'
  return{
    name:name
  }
})

/** 使用a.js,b.js */

/*
 <script type='text/javascript' src='require.js'></script>
 <script type='text/javascript'>
  require.config({
    paths:{
      'a':'./a',
      'b':'./b'
    }
  })
  require(['a','b'],function(a,b){ //启用模块加载器
    console.log(a)
    console.log(b)
  })
 </script>
 */

/** a.js */

define(function(require,exports,module) {
  var b = require('b')
  console.log(b)
  exports.hello = function(){
    console.log('hello work')
  }
});

 <script type='text/javascript' src='sea.js'></script>
 <script type='text/javascript'>
  seajs.config({
    alias:{
      'a':'./a',
      'b':'./b'
    }
  })
  seajs.use(['a','b'],function(a,b){ //启用模块加载器
    console.log(a)
    console.log(b)
  })
 </script>

(function(global) {
  var startUp = global.startUp = {
    version:'1.0.1'
  }
  
  
  var data = {} //配置信息
  var cache = {}
  var anonymousMeta = {}
  //模块生命周期

  var status = {
    FETCHED: 1,
    SAVED:2,
    LOADING:3,
    LOADED:4,
    EXECTING:5,
    EXECTED:6
  }
  var isArray = function (obj) {
    return toString.call(obj) === "[object Array]"
  }
  var isFunction = function (obj) {
    return toString.call(obj) === "[object Function]"
  }
  var isString = function (obj) {
    return toString.call(obj) === "[object String]"
  }
  function scripts(){
    return document.getElementsByTagName('script')
  }
  function getInteractiveScript(){ //支持data-main属性添加默认路径: <script data-main = 'common/js' src='module.js'></script>
    var arrS = scripts()
    var dataMain,src
    var exp = /^.*\.js$/
    arrS = [].slice.call(arrS)
    arrS.forEach(function(script){
      dataMain = script.getAttribute('data-main')
      if(dataMain && !data.baseUrl && !(exp.test(dataMain))){
        if(dataMain.substring(dataMain.length-1) !== '/'){
          dataMain = (dataMain+'/')
        }
        data.baseUrl = dataMain
      }
    })
  }
  getInteractiveScript()
  //是否使用了别名
  function parseAlias(id){
    var alias = data.alias //是否配置别名
    return alias && isString(alias[id]) ? alias[id] :id //没有配置别名，返回原来值，有配置别名，返回别名对应值
  }
  //不能以'/'':'开头，必须是一个'/'后面跟随任意字符至少一个
  var PATH_RE = /^([^\/:]+)(\/.+)$/ //([^\/:]+) 路径的短名称配置

  //检测是否 书写路径短名称
  function parsePaths(id) {
    var paths = data.paths; //是否配置短路径
    if(paths && (m=id.match(PATH_RE)) && isString(paths[m[1]])){
      id = paths[m[1]]+m[2]
    }
    return id
  }

  //检测是否添加后缀
  function normalize(path){
    var last = path.length-1
    var lastC = path.charAt(last)
    return (lastC === '/' || path.substring(last-2) === '.js') ? path :path+'.js'
  }
  //添加根目录
  function addBase(id,uri){
    // var result;
    // //相对路径
    // if(id.charAt(0) === '.'){
    //   result = realpath( (uri ? uri.match(/[^?]*\//)[0] : data.cwd ) + id)
    // }else{
    //   result = data.cwd+id
    // }
    var result = data.baseUrl ?data.cwd + data.baseUrl +id : data.cwd + id //支持data-main属性添加默认路径
    return result
  }

  var DOT_RE = /\/.\//g //   /a/b/./c/./d ==>/a/b/c/d     /./ ==>/
  var DOUBLE_DOT_RE = /\/[^/]+\/\.\.\//; // a/b/c/../../d ===>a/b/../d ==> a/d    /xxxxx/../==> /
  //规范路径
  function realpath(path){
    path = path.replace(DOT_RE,'/')
    while(path.match(DOUBLE_DOT_RE)){
      path= path.replace(DOUBLE_DOT_RE,'/')
    }
    return path
  }
  //生成绝对路径 资源路径解析
  startUp.resolve = function (child,parent) {
    if(!child) return ''
    child = parseAlias(child) //检测是否有别名
    child = parsePaths(child) //检测是否有路径别名，依赖模块中引包的模块路径地址 require('app/c)
    child = normalize(child) //检测是否添加后缀
    return addBase(child,parent) //添加根目录
  }

  startUp.request = function(url,callback){
    var node = document.createElement('script')
    node.src = url
    document.body.appendChild(node)
    node.onload = function(){
      node.onload = null
      document.body.removeChild(node) //加载依赖结束后移除加载时的script标签
      callback()
    }
  }
  //模块加载器启用
  startUp.use = function(list,callback){
    //检阅有没有预先加载的模块
    Module.preload(function(){
      Module.use(list,callback,data.cwd+"_use_"+cid()) //虚拟的根目录
    })
  }
  //模块加载器配置
  /**
   * 
   * startUp.config({
   *   alias:{
   *    a:'common/js/a'
   *   },
   *   preload:[c.js]
   * })
   */
  startUp.config = function (options) {
    var key,curr
    for(key in options){
      curr = Option[key]
      data[key] = curr
    }
  }

  //构造函数 模块初始化数据
  function Module(uri,deps){
    this.uri = uri;
    this.deps = deps || [] //依赖项
    this.exports = null
    this.status = 0
    this._waitings = {}
    this._remain = 0
  }

  //分析主干(左子树 | 右子树)上的依赖项
  Module.prototype.load = function(){
    var m = this
    m.status = status.LOADING//LOADING == 3 正在加载模块依赖项
    var uris = m.resolve()//获取主干上的依赖项
    var len = m.remain = uris.length

    //加载主干上的依赖项(模块)
    var seed
    for(var i=0;i<len;i++){
      seed = Module.get(uris[i]) //创建缓存信息
      if(seed.status <status.LOADED){ //LOADED == 4 准备加载执行当前模块
        seed._waitings[m.uri] = seed._waitings[m.uri] || 1 //多少模块依赖于我，_waitings是依赖我的模块的路径集合
      }else{
        seed._remain--
      }
    }
    //如果依赖列表模块全部加载完毕
    if(m._remain == 0){ //递归过程到此结束
      //获取模块的接口对象
      m.onload()
    }

    //准备执行根目录下的依赖列表中的模块
    var requestCache = {}
    for(var i=0;i<len;i++){
      seed = Module.get(uris[i])
      if(seed.status < status.FETCHED){
        seed.fetch(requestCache)
      }
    }
    for(uri in requestCache){
      requestCache[uri]()
    }
  }

  Module.prototype.fetch = function(requestCache){
    var m =this
    m.status = status.FETCHED
    var uri = m.uri
    requestCache[uri] = sendRequest; //Document.createElement('script)
    
    function sendRequest(){
      startUp.request(uri,onRequest) //动态加载script
    }

    function onRequest(){ //事件函数 script标签加载模块结束后，onload 函数中会被调用
      if(anonymousMeta){ //模块的数据更新
        m.save(uri,anonymousMeta)
      }
      m.load() //递归 模块加载策略
    }
  }

  Module.prototype.onload = function(){
    var mod = this
    mod.status = LOADED //4
    if(mod.callback){//获取模块接口对象
      mod.callback()
    }
    var waitings = mod._waitings //依赖加载完，递归回调 被依赖模块(父)的callback
    var key,m;
    for(key in waitings){
      var m = cache[key]
      m._remain -= waitings[key]
      if(m._remain == 0){ //判断父模块依赖是否全部加载完
        m.onload()
      }
    }
  }
 
  //资源定位 解析依赖项生成绝对路径
  Module.prototype.resolve = function(){
    var mod = this
    var ids = mod.deps
    var uris = []
    for(var i =0;i<ids.length;i++){
      uris[i] = startUp.resolve(ids[i],mod.uri) //依赖项（主干 | 子树）
    }
    return uris;
  }

   //更改初始化数据
  Module.prototype.save = function(uri,meta){
    var mod = Module.get(uri)
    mod.uri = uri
    mod.deps = meta.deps || []
    mod.factory = meta.factory
    mod.status = status.SAVED
  }
  
  //获取接口对象
  Module.prototype.exec = function(){
    var module = this
    //防止重复执行
    if(module.status >= status.EXECTING){
      return module.exports
    }
    module.status = status.EXECTING;
    var uri = module.uri
    function require(id){ //作为参数传递到define参数的函数中
      return Module.get(require.resolve(id)).exec() //获取接口对象
    }

    require.resolve = function(id){
      return startUp.resolve(id,uri)
    }

    var factory = module.factory //define传入的函数
    var exports = isFunction(factory) ? factory(require,module.exports= {},module) :factory;
    if(exports === undefined) {
      exports = module.exports
    }
    module.exports = exports
    module.status = status.EXECTED //6
    return exports
  }

  //定义一个模块
  Module.define = function(factory){
    var deps
    if(isFunction(factory)){
      //正则解析依赖项
      deps = parseDependencies(factory.toString())
    }
    //存储当前模块信息
    var meta = {
      id:'',
      uri:'',
      deps:deps,
      factory:factory
    }
    anonymousMeta = meta
  }

  //检测缓存对象上是否有当前模块信息
  Module.get = function(uri,deps){
    //cache['xxxxx.js'] = {uri:'xxxxx.js',deps:[]} //module 实例对象
    return cache[uri] || (cache[uri] = new Module(uri,deps))
  }

  Module.use = function(deps,callback,uri){
    var m = Module.get(uri,isArray(deps)?dep:[deps])
    console.log(module)
    //所有模块都加载完毕
    m.callback= function(){
      var exports = [] //所有依赖项模块的接口对象
      var uris = m.resolve()
      for(var i = 0;i<uris.length;i++){
        exports[i] = cache[uris[i]].exec() //获取模块对外定义的接口对象
      }
      if(callback){
        callback.apply(global,exports)
      }
    }
    m.load()
  }

  var _cid = 0

  function cid(){
    return _cid++
  }
  // data.preload = []
  //取消当前项目文档的URL
  data.cwd = document.URL.match(/[^?]*\//)[0]
  Module.preload = function(callback){
    var preload = data.preload ||[]
    var length = data.preload.length
    if(length){ //length !== 0 先加载预先设定模块
      Module.use(preload,function () {
        preload.splice(0,length)
        callback()
      },data.cwd+'_use_'+cid())
    } else{
      callback() 
    }
    
  }
  
  var REQUIRE_RE = /\brequire\s*\(\s*(["'])(.+?)\1\s*\)/g
  function parseDependencies(code){
    var ret = []
    code.replace(REQUIRE_RE,function(m,m1,m2){
      if(m2) ret.push(m2)
    })
    return ret
  }
  global.define = module.define
})(this)

<body>
  <div id = 'app'>
    <p>{{a}}</p>
  </div>
  <script type="text/javascript" src="vue.js"></script>
  <script>
    let app = new Vue({
      el:'#app',
      data:{
        a:'hello world'
      },
      method:{},
    })
  </script>
</body>

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.Vue = factory());//将vue挂到全局上下文中
}(this, function () { 'use strict';
  function Vue (options) {
    if (!(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }
  initMixin(Vue);
  stateMixin(Vue);
  eventsMixin(Vue);
  lifecycleMixin(Vue);
  renderMixin(Vue);
  initGlobalAPI(Vue);
  Vue.compile = compileToFunctions;

  return Vue;

}));

Vue.prototype._init = function (options) {
  var vm = this;
  vm._uid = uid$3++;

  var startTag, endTag;
  vm._isVue = true;// a flag to avoid this being observed
  // 合并选项,将配置项以内置选项进行合并
  if (options && options._isComponent) {
    //优化内部组件实例化过程
    // 由于动态选项合并非常慢，并且内部组件选项均不需要特殊处理。
    initInternalComponent(vm, options);
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    );
  }
  /* istanbul ignore else */
  {
    initProxy(vm);
  }
  // expose real self
  vm._self = vm;
  initLifecycle(vm);
  initEvents(vm);
  initRender(vm);
  callHook(vm, 'beforeCreate');//运行订阅了beforecreate钩子的相关方法
  initInjections(vm); // resolve injections before data/props
  initState(vm);
  initProvide(vm); // resolve provide after data/props
  callHook(vm, 'created');
  if (vm.$options.el) {//如果配置了el,就进行挂载处理挂载
    vm.$mount(vm.$options.el);//会给给option挂上render，staticRenderFns属性
  }
};

function initGlobalAPI (Vue) {
  var configDef = {};
  configDef.get = function () { return config; }; //config对象是vue对象构建过程的内部对象，存储全局配置项
  {
    configDef.set = function () {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      );
    };
  }
  Object.defineProperty(Vue, 'config', configDef);
}

var xx = Vue.extend({
    template:'<div>this is a component</div>'
})

<template id = 'mycom'>
  <div>this is a component</div>
</template>

<script type='text/x-template' id = 'mycom'>
  <div>this is a component</div>
</script>

Vue.component('my-com',myCom)

Vue.component('my-comp',{
    template:'#mycom'
})

var app = new Vue({
    el:'#app',
    components:{
        'my-com':myCom
    }
})

var app = new Vue({
    el:'#app'
    componnets:{
        'my-com':{
            template:'#myCom'
        }
    }
})

provide:function(){ //父组件
    return{
        getMap:this.getMap
    }
}
inject:[getMap]//子组件

<myCom inline-template><div><p>these are compiled as the component's own template</p></div></myCom>

<script type='text/x-template' id = 'mycom'>
  <div>this is a component</div>
</script>
Vue.component('my-comp',{
    template:'#mycom'
})

import Vue from 'vue'
import {expect} from 'chai'
import Counter from '@/counter.vue'

describe('测试Counter.vue',()=>{
    const Constructor = Vue.extend(Counter)
    const vm = new Constructor().$mount()
    const button = vm.$el.querySelector('button')
    const clickE = new window.Event('click')
    button.dispatchEvent(clickE)
    vm._watcher.run()
    expect(Number(vm.$el.querySelector('span').textContent)).to.equal(1)
})

function _createElement (context,tag,data,children,normalizationType) {
  //这里省略一系列边界判断
  var vnode, ns;
  if (typeof tag === 'string') {
    var Ctor;
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag);
    if (config.isReservedTag(tag)) { //标签名是一般的html标签
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      );
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) { //标签名是组件标签名
      vnode = createComponent(Ctor, data, context, children, tag);
    } else {
      //未知或未列出的命名空间元素在运行时检查，
      //因为当其父项标准化子元素时可能会为其分配一个命名空间
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      );
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children);
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) { applyNS(vnode, ns); }
    if (isDef(data)) { registerDeepBindings(data); }
    return vnode
  } else {
    return createEmptyVNode()
  }
}
  function createFunctionalComponent (
    Ctor,
    propsData,
    data,
    contextVm,
    children
  ) {
    var options = Ctor.options;
    var props = {};
    var propOptions = options.props;
    if (isDef(propOptions)) {
      for (var key in propOptions) {
        props[key] = validateProp(key, propOptions, propsData || emptyObject);
      }
    } else {
      if (isDef(data.attrs)) { mergeProps(props, data.attrs); }
      if (isDef(data.props)) { mergeProps(props, data.props); }
    }

    var renderContext = new FunctionalRenderContext(
      data,
      props,
      children,
      contextVm,
      Ctor
    );

    var vnode = options.render.call(null, renderContext._c, renderContext);

    if (vnode instanceof VNode) {
      return cloneAndMarkFunctionalResult(vnode, data, renderContext.parent, options, renderContext)
    } else if (Array.isArray(vnode)) {
      var vnodes = normalizeChildren(vnode) || [];
      var res = new Array(vnodes.length);
      for (var i = 0; i < vnodes.length; i++) {
        res[i] = cloneAndMarkFunctionalResult(vnodes[i], data, renderContext.parent, options, renderContext);
      }
      return res
    }
  }

var strats = config.optionMergeStrategies;
LIFECYCLE_HOOKS.forEach(function (hook) {
    strats[hook] = mergeHook;
  });
function mergeHook (
    parentVal,
    childVal
  ) {
    var res = childVal
      ? parentVal
        ? parentVal.concat(childVal)
        : Array.isArray(childVal)
          ? childVal
          : [childVal]
      : parentVal;
    return res
      ? dedupeHooks(res)
      : res
  }

function mergeOptions (
    parent,
    child,
    vm
  ) {
    {
      checkComponents(child);
    }

    if (typeof child === 'function') {
      child = child.options;
    }

    normalizeProps(child, vm);
    normalizeInject(child, vm);
    normalizeDirectives(child);

    // Apply extends and mixins on the child options,
    // but only if it is a raw options object that isn't
    // the result of another mergeOptions call.
    // Only merged options has the _base property.
    if (!child._base) {
      if (child.extends) {
        parent = mergeOptions(parent, child.extends, vm);
      }
      if (child.mixins) {
        for (var i = 0, l = child.mixins.length; i < l; i++) {
          parent = mergeOptions(parent, child.mixins[i], vm);
        }
      }
    }

    var options = {};
    var key;
    for (key in parent) {
      mergeField(key);
    }
    for (key in child) {
      if (!hasOwn(parent, key)) {
        mergeField(key);
      }
    }
    function mergeField (key) {
      var strat = strats[key] || defaultStrat;
      options[key] = strat(parent[key], child[key], vm, key);
    }
    return options
  }
 function initMixin$1 (Vue) {
    Vue.mixin = function (mixin) {
      this.options = mergeOptions(this.options, mixin);
      return this
    };
  }

//实现把A标签拖到B标签
1.A标签开始拖动时
ondragstart(event){
  event.dataTransfer.setData('source',event.target.id)
}
2.B标签监听拖拽结束后
ondrop(event){
  var source = document.getElementById(event.dataTransfer.getData('source'))
  event.target.appendChild(source)
}

<link rel='stylesheet' media='screen and (max-device-width:480px)' href='./css1.css'>
<link rel='stylesheet' media='screen and (min-device-width:480px)' href='./css2.css'>

1.
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

2.命名的路由
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})
3.方法，动态返回重定向目标：
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

1.如果 props 被设置为 true，route.params 将会被设置为组件属性。
const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

2.如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用
const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

3.创建一个函数返回 props
const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})
URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件

三个参数
to: 即将要进入的目标 路由对象
from: 当前导航正要离开的路由的路由对象
next：一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数
      next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
      next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
      next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
      next(error): 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this` 
    // 因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
    //可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
    next(vm => { //是支持给 next 传递回调的唯一钩子，beforeRouteUpdate，beforeRouteLeave都不支持，因为可以访问的到
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

created () {
  // 组件创建完后获取数据，
  // 此时 data 已经被 observed 了
  this.fetchData()
},
watch: {
  // 如果路由有变化，会再次执行该方法
  '$route': 'fetchData'
},

beforeRouteEnter (to, from, next) {
  getPost(to.params.id, (err, post) => {
    next(vm => vm.setData(err, post))
  })
},
// 路由改变前，组件就已经渲染完了
// 逻辑稍稍不同
beforeRouteUpdate (to, from, next) {
  this.post = null
  getPost(to.params.id, (err, post) => {
    this.setData(err, post)
    next()
  })
},
methods: {
  setData (err, post) {
    if (err) {
      this.error = err.toString()
    } else {
      this.post = post
    }
  }
}

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {

    // return 期望滚动到哪个的位置
    if (to.hash) {
      return {
        selector: to.hash //模拟“滚动到锚点”的行为
      }
    }
    if (savedPosition) {
      return savedPosition //返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样
    } else {
      return { x: 0, y: 0 } //让页面滚动到顶部
    }
    return new Promise((resolve, reject) => { //返回一个 Promise 来得出预期的位置描述
      setTimeout(() => {
        resolve({ x: 0, y: 0 })
      }, 500)
    })
  }
})

1.居中
//居中设置原来
.center {
  position: absolute
  top: 50%;
  left: 50%;
  marging-top: -150px;
  margin-left: -150px;
}

//使用calc
.center {
  position: absolute
  top: calc(50% - 150px);
  left: calc(50% - 150px);
}

2.设置字体，在页面上的任何文本，将会根据视口自动缩放，
相同比例的视口总会显示相同的文本数量，不管视口的真实尺寸是多少。
html {  
    font-size: calc(100vw / 30);
}

width:calc(100%-320px)

-webkit-appearance: none;/*去除系统默认appearance的样式*/
line-height: normal;

function makeLoggable(target){
	return new Proxy(target,{
		get:(target,property)=>{
			report('READING:'+property)
			return target[property]
		},
		set:(target,property,value)=>{
			report('writing value' +value +'to'+'property')
			target[property] = value
		}
	})
}

var personValidator = {
    name(val){
        return typeof val === 'string'
    }
    age(val){
        return typeof val === 'number' && val>18
    }
}
class person{
    constructor(name,age){
        this.name = name;
        this.age = age;
        return createValidator(this,personValidator)
    }
}
function createValidator(target,validator){
    return new Proxy(target,{
        _validator:validator,
        set(target,key,value,proxy){
            if(target.hasOwnproperty(key)){
                var validator = this._validator[key]
                if(validator(value)){
                    return Reflect.set(target,key,value,proxy)
                }else{
                    throw Error('type error')
                }
            }
        }
    })
}

function Folder(){
	return new Proxy({},{
		get:(target,property)=>{
			if(!(property in target)){
				target[property] = new Folder()
			}
			return target[property]
		}
	})
}

const rootFolder = new Folder()
try {
	rootFolder.ninjasDir.firstNinjaDir.ninjaFile = 'yoshi.txt'
}catch(e){
	console.log(e)
}

function creatNegativeArrayProxy(array){
	if(!Array.isArray(array)){
		throw new TypeError('expected an array')
	}
	return new Proxy(array,{
		get:(target,index)=>{
			index = +index
			return target[index<0?target.length+index:index]
		},
		set:(target,index,val)=>{
			index = +index
			return target[index<0?target.length+index:index] = val
		}
	})
}

const ninja = [1,2,3]
const proxi = creatNegativeArrayProxy(ninja)
console.log(proxi[-1]) //==> 3
proxi[-2] = 22 // ninja ==>1,22,3

.div1{
  overflow-x: auto;
  overflow-y: hidden;
}

解决前：
<div1 style='position:relative'>
  <table>
    <tbody>
    <tr>
      <td>
      <div2 style='position:relative'>
        <div3 style="position:absolute"><i class="fa fa-pencil" ></i></div3>
        <popwindow>具体内容</popwindow> /** 组件弹窗div设置有position:absolute**/
      </div2>
      </td>
    </tr>
    </tbody>
  </table>
</div1>

解决后：
<div1 style='position:relative'>
  <table>
    <tbody>
    <tr>
      <td>
      <div2>
        <div4 style='position:relative'>
          <div3 style="position:absolute"><i class="fa fa-pencil" ></i></div3>
        </div4>
        <popwindow>具体内容</popwindow> /** 组件弹窗div设置有position:absolute**/
      </div2>
      </td>
    </tr>
    </tbody>
  </table>
</div1>