vue的公共方法封装以及class高阶封装

一、Vue.use与Vue.prototype的区别和用法

1、Vue.use和Vue.prototype区别

相同点都是注册插件的方式,没有本质区别,都是在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:ss'return 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() // 'hello'var 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60991.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL提权

参考&#xff1a; mysql提权篇 | Wh0ales Blog MySQL 提权方法整理 - Geekbys Blog MySQL_UDF提权漏洞复现-云社区-华为云 MYSQL UDF手动提权及自动化工具使用_udf提权工具_小直789的博客-CSDN博客 MySQL提权的三种方法 - FreeBuf网络安全行业门户 ...

hive问题总结

往往用了很久的函数却只知道其单一的应用场景&#xff0c;本文将不断完善所遇到的好用的hive内置函数。 1.聚合函数或者求最大最小值函数搭配开窗函数使用可以实现滑动窗口 例&#xff1a; collect_list函数&#xff0c;搭配开窗函数&#xff0c;实现了在滑动窗口内对事件路径…

idea 常用插件和常用快捷键 - 记录

idea 常用插件 记得下载插件完成后&#xff0c;点击 Apply 和 OK Alibaba Java Coding Guidelines 作用&#xff1a;使用该插件可以&#xff0c;自动提示相关的语法格式问题&#xff0c;格式参考 阿里巴巴代码规范 详情链接&#xff1a; 代码规范之Alibaba Java Coding G…

js深拷贝三种方法

使用递归函数实现深拷贝 const obj {name: zzz,age: 18,hobby: [篮球, 足球],family: {baby: baby}} // 深拷贝 数组 对象 一定要先筛数组再筛对象,因为万物皆对象function deepcopy(newObj, oldObj) {for (const k in oldObj) {// 判断值是否属于array类if (oldObj[k] i…

深度学习怎么学?

推荐这本小白看的《深度学习&#xff1a;从基础到实践&#xff08;上下册&#xff09;》。 深度学习&#xff1a;从基础到实践&#xff08;上下册&#xff09; 深入浅出的讲述了深度学习的基本概念与理论知识&#xff0c;不涉及复杂的数学内容&#xff0c;零基础小白也能轻松掌…

在应用条上共享内容

动作提供者是一个动作&#xff0c;能定义自己的外观和行为&#xff0c;下面是为应用条增加一个动作提供者。 共享动作提供者允许用户与其他应用共享应用中的内容。可以使用动作提供者让用户向他们某个联系人发送一个特色披萨的详细信息。 共享动作提供者会定义自己的图标&#…

Scala中的类型检查和转换,以及泛型,scala泛型的协变和逆变

Scala中的类型检查和转换&#xff0c;以及泛型 类型检查和转换 说明 &#xff08;1&#xff09; obj.isInstanceOf[T]&#xff1a;判断 obj 是不是T 类型。 &#xff08;2&#xff09; obj.asInstanceOf[T]&#xff1a;将 obj 强转成 T 类型。 &#xff08;3&#xff09; cla…

2023-8-31 Dijkstra求最短路(二)

题目链接&#xff1a;Dijkstra求最短路 II #include <iostream> #include <cstring> #include <algorithm> #include <vector> #include <queue>using namespace std;typedef pair<int, int> PII;const int N 150010;int n, m; int h[N…

解决 PaddleClas 下载预训练模型报错 ModuleNotFoundError No module named ‘ppcls‘ 的问题

当我们在使用 PaddleClas 进行预训练模型下载时&#xff0c;可能会遇到一个报错&#xff0c;报错信息为 ModuleNotFoundError: No module named ppcls。这个错误通常是因为 Python 解释器无法找到名为 ppcls 的模块&#xff0c;而我们的代码中正尝试导入它。让我们一起来解决这…

HTTP 代理原理及 Python 简单实现

HTTP 代理是一种网络代理服务器(Proxy Server),它能够作为客户端与 HTTP 服务器之间的中介,它的工作原理是: 当客户端向 HTTP 代理发送 HTTP 请求时,HTTP 代理会收到请求。 HTTP 代理会将请求转发给目标 HTTP 服务器。 目标 HTTP 服务器处理请求并生成响应。 HTTP 代理将…

什么是操作系统,数据结构

1、什么是操作系统&#xff1f; 操作系统是一组主管并控制计算机操作、运用和运行硬件、软件资源和提供公共服务来组织用户交互的相互关联的系统软件程序。根据运行的环境&#xff0c;操作系统可以分为桌面操作系统&#xff0c;手机操作系统&#xff0c;服务器操作系统&#x…

QT Creator工具介绍及使用

一、QT的基本概念 QT主要用于图形化界面的开发&#xff0c; QT是基于C编写的一套界面相关的类库&#xff0c;如进程线程库&#xff0c;网络编程的库&#xff0c;数据库操作的库&#xff0c;文件操作的库等。 如何使用这个类库&#xff1a;类库实例化对象(构造函数) --> 学习…

数据结构(Java实现)-二叉树(上)

树型结构 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&#xff0c;称为根结点&…

Docker搭建elasticsearch+kibana测试

最近需要做大数据画像&#xff0c;所以先简单搭建一个eskibana学习使用&#xff0c;记录一下搭建过程和遇到的问题以及解决办法 1.拉取es和kibana镜像 在拉取镜像之前先搜索一下 elasticsearch发现是存在elasticsearch镜像的&#xff0c;我一般习惯性拉取最新镜像&#xff0c…

信息化发展12

数字民生 数字民生建设重点通常强调&#xff1a; 1 &#xff09; 普惠&#xff1a; 充分开发利用信息技术体系&#xff0c; 扩大民生保障覆盖范围&#xff0c; 助力普惠型民生建设&#xff0c; 解决民生资源配置不均衡等问题。 2&#xff09; 赋能&#xff1a; 信息技术体系与…

若依富文本 html样式 被过滤问题

一.场景 进入页面&#xff0c;富文本编辑框里回显这条新闻内容&#xff0c;如下图&#xff0c; 然后可以在富文本编辑框里对它实现再编辑&#xff0c;编辑之后将html代码提交保存到后台数据库。可以点击详情页进行查看。 出现问题&#xff1a;在提交到后台controller时&#x…

线程和进程的区别是什么?

线程(Thread)和进程(Process)是操作系统中两个重要的概念,用于管理程序的执行。它们有以下区别: 定义:进程:进程是程序的一个执行实例,它包含了程序的代码、数据以及执行上下文。进程是操作系统分配资源和调度的基本单位。线程:线程是进程的子执行单元,一个进程可以…

通过HTTP进行并发的数据抓取

在进行大规模数据抓取时&#xff0c;如何提高效率和稳定性是关键问题。本文将介绍一种可操作的方案——使用HTTP代理来实现并发的网页抓取&#xff0c;并帮助您加速数据抓取过程。 1. 选择合适的HTTP代理服务供应商 - 寻找信誉良好、稳定可靠且具备较快响应时间的HTTP代理服务…

单片机通用学习-​什么是寄存器?​

什么是寄存器&#xff1f; 寄存器是一种特殊的存储器&#xff0c;主要用于存储和检查微机的状态。CPU寄存器用于存储和检查CPU的状态&#xff0c;具体包括计算中途数据、程序因中断或子程序分支时的返回地址、计算结果为零时的负值、计算结果为零时的信息、进位值等。 由于CP…

相机SD卡数据丢失如何恢复?

出门在外&#xff0c;相机是人们记录生活点滴的重要工具&#xff0c;是旅游的最佳玩伴。人们每到一个地方&#xff0c;都喜欢用相机来见证自己来过的痕迹&#xff0c;拍好的照片都会被放到相机卡里&#xff0c;但在使用相机时&#xff0c;有时我们会意外删除了重要的照片或视频…