Vue提升开发速度小结

1.将对象挂载在全局

在开发过程中，如果没有将方法挂载在全局，在每个也就就出出现n个import的情况，不单看着烦，还累人。
比如说我们自己封装了一个js，里面有各种快捷的方法。如果说长这样：

comnon.js：
let objFunction = {
//   对象深度克隆
cloneObj (obj) { 
        if(obj === null) return null 
        if(typeof obj !== 'object') return obj;
        if(obj.constructor===Date) return new Date(obj); 
        var newObj = new obj.constructor ();  //保持继承链
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {   //不遍历其原型链上的属性
                var val = obj[key];
                newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; // 使用arguments.callee解除与函数名的耦合
            }
        }  
        return newObj;  
    },
    
      //读取cookies
      export function getCookie(name) {
        var arr,
          reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  
        if ((arr = document.cookie.match(reg))) return unescape(arr[2]);
        else return null;
      },

      //删除cookies
      export function  delCookie(name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = getCookie(name);
        if (cval != null)
          document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
      }
}
//将对象导出
export {
	lotusUtils
}

如果这时我们又没挂载在全局，这时候在a页面需要使用方法的时候，就需要现在script中 import {objFunction} from "…/…/comnon.js"引入， objFunction.delCookie（）来进行使用。 在一两个页面引入还无所谓，毕竟少。但是如果一个项目有20、30个页面。 这波操作不但代码沉冗，还很累人。

这时候可以将objFunction挂载在全局，操作如下：

main.js

import {objFunction} from "./static/utils/utils.js"

Vue.prototype.$objFunction = objFunction;  //当然，这里不加$符号也行

使用：首先在main.js中引入js，然后通过（vue.prototype.方法名） 将方法挂载在全局，这样子在页面中使用的时候，就可以直接

a.vue

this.$objFunction.delCookie()//例如删除cookie