码农，程序猿，未来的昏析师

 var a = 2;
浏览器的处理逻辑
1. 遇到var a,编译器会询问作用于是否有一个该名称的变量存在于同一个作用于集合中，若有，则忽略该条，继续编译，否则会要求当前作用域在在当前作用域集合中声明一个新变量，并命名a。
2.接下来编译器会为引擎生成运行时所需要的代码，用来处理a = 2操作。此时引擎会先询问作用域是否存在变量a，如果是，就使用这个变量，并将2赋值给a，否则继续向上查找，直到超出作用域，抛出一个异常。
总结： 编译器会首先声明一个变量（如果之前没有声明过），然后运行时引擎会查找该变量并对该变量进行赋值。

同时，在这个例子中，也存在LHS和RHS查询，L和R分别表示一个赋值操作的左侧和右侧。
RHS只是简单的找到这个变量的值，而LHS是找到这个变量的容器本身。

function foo(num) {
    console.log('foo' + num);
    
    // 记录foo 被调用的次数
    foo.count++;
}
foo.count = 0;
var i = 0;
for (i = 0; i < 10; i++ ) {
    if (i > 5) {
        foo(i);
    }
}
console.log(foo.count); //0
因为词法作用域的原因，foo函数中的this绑定到全局变量，导致count永远是0；
// 解决方法

1. 创建一个带count的对象
2. 使用foo.count 替代 this.count
3. 使用call函数使this强制绑定到foo上（荐）

function baz() {
    // 当前调用栈是：baz;
    // 因此,当前调用位置是全局作用域
    console.log('baz');
    bar(); // bar的调用位置
}

function bar() {
    // 当前调用栈是baz --> bar
    // 因此，当前调用位置再baz中
     console.log('bar');
     foo(); // <-- foo的调用位置
}

function foo() {
    // 当前调用栈是baz --> bar --> foo
    // 因此，当前调用位置是在bar中
    console.log('foo')
}
baz(); // <-- baz的调用位置

Function.prototype.bind = function(newThis) {
   var args = Array.prototype.slice.call(arguments, 1);
   var that = this;
   return function() {
       return that.apply(newThis, args.concat(Array.prototype.slice.call(arguments, 1));o
   }
}

Vue.options.components = {}
Vue.options.directives = {};
Vue.options.filters = {};

// 相当于,且更方便维护
const ASSET_TYPES = ['component','directive','filter'];
ASSET_TYPES.forEach(type => {Vue.options[type + 's'] = Object.create(null)});

// 获取滚动的总高度
  getScrollTop() {
    let scrollTop = 0;
    let bodyScrollTop = 0;
    let documentScrollTop = 0;
    if (document.body) {
      bodyScrollTop = document.body.scrollTop;
    }
    if (document.documentElement) {
      documentScrollTop = document.documentElement.scrollTop;
    }
    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
    return scrollTop;
  },
  // 文档的总高度
  getScrollHeight() {
    let scrollHeight = 0;
    let bodyScrollHeight = 0;
    let documentScrollHeight = 0;
    if (document.body) {
      bodyScrollHeight = document.body.scrollHeight;
    }
    if (document.documentElement) {
      documentScrollHeight = document.documentElement.scrollHeight;
    }
    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
    return scrollHeight;
  },
  // 获取可见页面的总高度
  getWindowHeight() {
    let windowHeight = 0;
    if (document.compatMode === 'CSS1Compat') {
      windowHeight = document.documentElement.clientHeight;
    } else {
      windowHeight = document.body.clientHeight;
    }
    return windowHeight;
  },
  window.onscroll = function(){
    if(getScrollTop() + getWindowHeight() == getScrollHeight()){
      alert("已经到最底部了！!");
    }
  };

let draging = false;
let isdrop = false;

function getDOMs(el) {
  return document.querySelectorAll(el);
}

function setData(e, data) {
  const setDate =  JSON.stringify(data);
  if (e.dataTransfer.setData) {
    e.dataTransfer.setData('dropData', setDate)
  }else {
    sessionStorage.setItem('dropData', setDate);
  }
}

function getData(e) {
  if (e.dataTransfer.getData) {
    return JSON.parse(e.dataTransfer.getData('dropData'));
  }else {
    return JSON.parse(sessionStorage.getItem('dropData'));
  }
}

function bindDrag(dom,dragStart,dragEnd) {
  let offsetX;
  let offsetY;
  dom.ondragstart=function(e){
    if (draging) return;
    draging = true;
    dom.style.opacity = 0;
    if (dragStart) {
      dragStart();
    }
    setData(e, {
      componentName: e.srcElement.dataset.componentname,
      groupName: e.srcElement.dataset.group,
      type: 'component',
    })
  }
  dom.ondrag=function(e){
    let x= e.pageX;
    let y= e.pageY;
    //drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0
    if(x === 0 && y === 0){
      return; //不处理拖动最后一刻X和Y都为0的情形
    }
    x-=offsetX;
    y-=offsetY;
  }
  dom.ondragend=function(e){
    draging = false;
    // if (isdrop) {
    //   isdrop =false;
    // }else {
    // dom.style.opacity = 1;
    //};
    dom.style.opacity = 1;
    if (dragEnd) {
     dragEnd();
    };
  }
}


function dragenter(e) {
  e.stopPropagation();
  e.preventDefault()
};
function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
};
function drop(e, dropCB) {
  e.stopPropagation();
  e.preventDefault();
  console.log(getData(e))
  if (dropCB) {
    // 调用增加组件方法
    return dropCB(getData(e));
  }
  return false;
}

function getDOM(el) {
  return document.querySelector(el);
}

const DragUtil = {
  drag (el,dragStart,dragEnd) {
    const doms = getDOMs(el);
    doms.forEach( item => {
      bindDrag(item,dragStart,dragEnd);
    })

  },
  addDropListen(el,dropCB) {
    let dom = getDOM(el);
    dom.ondragenter = function(e){
      dragenter(e);
    };
    dom.ondragover = function(e) {
      dragover(e);
    };
     dom.ondrop = function(e) {
      const returnFlag = drop(e,dropCB);
      isdrop = true;
    };
  },
};

export default DragUtil;
// 因为业务的原因，也增加了一些多余的逻辑，当拖拽的元素使用opacity:0时，如果不加动画效果延迟，拿拖拽就为空，这里需要注意下

computed: {
    showDrawerTemp: {
      get() {
        return this.showDrawer;
      },
      set() {
      },
    },
  },

git commit --amend

if (to.path !== '/login' && !Util.getDataFormSessionStorage('USERINFO', true, '') && !Util.getDataFromLocalStorage('USERINFO', true)) {
   router.push({ path: '/login' });
   next({
       path: '/login',
       // query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
     });    
 } else {
    next();
 }

//640px作为设计稿基准
$vm_base: 640; 
@function vm($px) {
    @return ($px / 640) * 100vw;
}

//通过代码，假如设计稿中元素的宽度是 40px ，那么就可以在样式中写
.test{
    width:vm(40)
}

img: require('../../assets/guessLike.png'),

https://github.com/chrisvfritz/prerender-spa-plugin/tree/e2c49428e0efab5a672f421a3a33da45fc345710/examples/vue2-webpack-router

<display-name>webapp</display-name>
  <description>
     webapp
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/</location>  
</error-page>

对于一般的对象属性需要用字符串指定属性的名称   如：
let mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar  // returns true
"model" in mycar // returns true

// 错误方式

a.Vue
import xxx from '../../../xx';

b.Vue
import xxx from '../../../xx';

//正确方式
webpack.config.js
 alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
    
a.Vue
import xxx from '@/xx';

b.Vue
import xxx from '@/xx';

使用别名，减少代码耦合，这样多出修改的时候，就不用那么麻烦了

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 
rpx 为小程序中使用的相对单位，用法和rem类似， 1rpx = 屏幕宽度/750 px, 所以在屏幕宽度为750的设计稿中，1rpx = 1px。