网站推广网站制作网站建设公司,做贸易常用的网站,flash网站建设技术精粹,wordpress 图片连接插件一、Vue.use与Vue.prototype的区别和用法 1、Vue.use和Vue.prototype区别
相同点#xff1a;都是注册插件的方式#xff0c;没有本质区别#xff0c;都是在vue.prototype上添加了一个方法不同点#xff1a;vue.use适用于注册vue生态内的插件(vuex、router、elementUI)都是注册插件的方式没有本质区别都是在vue.prototype上添加了一个方法不同点vue.use适用于注册vue生态内的插件(vuex、router、elementUI)vue.prototype适用于注册生态外的插件(echarts、)
//1.1、vue.prototype用法
需要设置全局变量在main.js中Vue实例化的代码里添加。 不想污染全局作用域。这种情况下你可以通过在原型上定义它们使其在每个Vue实例中可用。
vue.prototype.$echarts echarts //变量前加上$是防止被组件中的变量意外覆盖//1.2vue.use用法
通过全局方法Vue.use()使用插件
Vue.usew会自动阻止多次注册插件
它需要在你调用new Vue()启动应用之前完成
注意Vue.use() 方法至少传入一个参数该参数类型必须是 Object 或 Function如果是 Object 那么这个 Object 需要定义一个 install方法如果是Function那么这个函数就被当做install方法。在 Vue.use()执行时install会默认执行当install执行时第一个参数就是Vue其他参数是Vue.use()执行时传入的其他参数。
2、vue的封装和公共方法的调用 方式一单个组件以及公共组件的使用 //方式一
1.在vue项目中src/assets/js/创建js文件 例如文章下面的common.js文件
2.在main.js引用common-然后实例化/*引入公共函数*/
import common from ./assets/js/common
Vue.use(common);3、在任何.vue组件中的生命周期利用this.方法名调用因为已经在main.js全局实例化了4、在单个.vue组件中使用
4.1、在.vue文件中引入import { unique } from %/utils/utils
4.2、let params unique(this.proportionArr)
common.js文件————//公共方法export default{install(Vue){//这里是示例方法 getTime是方法名 function()可以携带参数Vue.prototype.getTime function(){var date new Date()var y date.getFullYear()var m date.getMonth() 1m m 10 ? (0 m) : mvar d date.getDate()d d 10 ? (0 d) : dalert(y m d)};Date.prototype.Format function(fmt){let o {M: this.getMonth() 1,d: this.getDate(),h: this.getHours(),m: this.getMinutes(),s: this.getSeconds(),};if(/(y)/.test(fmt))fmt fmt.replace(RegExp.$1, (this.getFullYear() ).substr(4 - RegExp.$1.length));for(let k in o){if(new RegExp(( k )).test(fmt))fmt fmt.replace(RegExp.$1, (RegExp.$1.length 1) ? (o[k]) : ((00 o[k]).substr(( o[k]).length)));}return fmt;};Vue.filter(formatDate, function(value,fmt){if(!fmt) fmt yyyy-MM-dd hh:mm:ssreturn new Date(value).Format(fmt)});Vue.prototype.throttle function (fn,delay) {var startTime Date.now();return function(){let context this;let args arguments;let nowTime Date.now();if(nowTime-startTime delay){fn.apply(context,args);startTime Date.now();}}}}
} 方式二公共方法封装方式(熟悉对外接口写法) common2.js
//export命令用于规定模块的对外接口import命令用于输入其他模块提供的功能。
function _debounce(fn, delay 200) {var timerreturn function() {var th thisvar args argumentsif (timer) {clearTimeout(timer)}timer setTimeout(function() {timer nullfn.apply(th, args)}, delay)}
}// 节流
function _throttle(fn, interval 200) {var lastvar timerreturn function() {var th thisvar args argumentsvar now new Date()if (last now - last interval) {clearTimeout(timer)timer setTimeout(function() {last nowfn.apply(th, args)}, interval)} else {last nowfn.apply(th, args)}}
}
export { _debounce, _throttle }export function unique(arr) {for (let i 0; i arr.length - 1; i) {for (let j i 1; j arr.length; j) {if (arr[i].id arr[j].id) {arr.splice(i, 1);j--;}}}return arr;
} 二、class高阶封装 在ES6中class (类)作为对象的模板被引入可以通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖让对象原型的写法更加清晰、更像面向对象编程的语法。
一、生成实例对象的传统方法是通过构造函数。
function Point(x, y) {this.x x;this.y y;
}Point.prototype.toString function () {return ( this.x , this.y );
};var p new Point(1, 2);二、Es6通过class关键字可以定义类基本上ES6 的 class 可以看作只是一个语法糖它的绝大部分功能ES5 都可以做到新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。//上述方法用class实现使用的时候也是直接对类使用new命令和构造函数的用法完全一致。
class Point {constructor(x, y){this.x x;this.y y;}toString() {return ( this.x , this.y );}
}四、ES6 的类完全可以看作构造函数的另一种写法(类的数据类型就是函数类本身就指向构造函数);。
class Point {// ...
}typeof Point // function
Point Point.prototype.constructor // true五、事实上类的所有方法都定义在类的prototype属性上面
class Point {constructor() {// ...}toString() {// ...}toValue() {// ...}
}// 等同于Point.prototype {constructor() {},toString() {},toValue() {},
//上述三个方法其实都是定义在Point.prototype上面。
};六、注意类的内部所有定义的方法都是不可枚举的
class Point {constructor(x, y) {// ...}toString() {// ...}
}Object.keys(Point.prototype)//返回给定对象的所有可枚举属性的字符串数组
// []
Object.getOwnPropertyNames(Point.prototype)//返回一个数组成员是参数对象自身的全部属性的属性名不管该属性是否可遍历
// [constructor,toString] 3.1、class的constructor() 方法 3.3、constructor()方法是类的默认方法通过new命令生成对象实例时自动调用该方法。一个类必须有constructor()方法如果没有显式定义一个空的constructor()方法会被默认添加。class Point {
}// 等同于
class Point {constructor() {}
}3.4、类的实例类的属性和方法除非显式定义在其本身即定义在this对象上否则都是定义在原型上即定义在class上
class Point {constructor(x, y) {this.x x;this.y y;}toString() {return ( this.x , this.y );}
}var point new Point(2, 3);point.toString() // (2, 3)point.hasOwnProperty(x) // true
point.hasOwnProperty(y) // true
point.hasOwnProperty(toString) // false
point.__proto__.hasOwnProperty(toString) // true注意上面代码中x和y都是实例对象point自身的属性因为定义在this对象上所以hasOwnProperty()方法返回true而toString()是原型对象的属性因为定义在Point类上所以hasOwnProperty()方法返回false。这些都与 ES5 的行为保持一致。3.5、静态方法类相当于实例的原型所有在类中定义的方法都会被实例继承。如果在一个方法前加上static关键字就表示该方法不会被实例继承而是直接通过类来调用这就称为“静态方法”。
静态方法 类相当于实例的原型所有在类中定义的方法都会被实例继承。如果在一个方法前加上static关键字就表示该方法不会被实例继承而是直接通过类来调用这就称为“静态方法”。class Foo {static classMethod() {return hello;}
}Foo.classMethod() // hellovar foo new Foo();
foo.classMethod(); // TypeError: foo.classMethod is not a function注意如果静态方法包含this关键字这个this指的是类而不是实例。
class Foo {static bar() {this.baz();}static baz() {console.log(hello);}baz() {console.log(world);}
}Foo.bar() // hello3.6、私有方法和私有属性是只能在类的内部访问的方法和属性外部不能访问。
class IncreasingCounter {#count 0;get value() {console.log(Getting the current value!);return this.#count;}increment() {this.#count;}
}
// #count就是私有属性只能在类的内部使用this.#count。如果在类的外部使用就会报错。
const counter new IncreasingCounter();
counter.#count // 报错
counter.#count 42 // 报错3.7、通过 extends 实现类的继承。
class Child extends Father { ... }3.8、this指向
class Logger {printName(name there) {this.print(Hello ${name});}print(text) {console.log(text);}
}const logger new Logger();
const { printName } logger;
printName(); // TypeError: Cannot read property print of undefined
printName方法中的this默认指向Logger类的实例。但是如果将这个方法提取出来单独使用this会指向该方法运行时所在的环境由于class内部是严格模式所以 this 实际指向的是undefined从而导致找不到print方法而报错。一个比较简单的解决方法是在构造方法中绑定this这样就不会找不到print方法了。
class Logger {constructor() {this.printName this.printName.bind(this);}// ...
}
或者
class Obj {constructor() {this.getThis () this;}
}const myObj new Obj();
myObj.getThis() myObj // true
