提升代码复用性：探讨Mixin类在面向对象语言中的独特作用和优势

  

 🎬 江城开朗的豌豆：个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想，就是为了理想的生活 !

在这里插入图片描述

目录

 ⭐  专栏简介

 📘  文章引言

一、mixin是什么

Vue中的mixin

局部混入

全局混入

注意事项：

二、使用场景

三、源码分析

替换型

合并型

队列性

叠加型

小结：

⭐  写在最后

 ⭐  专栏简介

        欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者，我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新，为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念，并提供实际案例和练习，让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具，我们都将为你提供丰富的内容和实用技巧，帮助你更好地理解并运用前端开发中的各种技术。

        同时，我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进，前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术，使你能够站在前沿，与时俱进。通过掌握最新的前端技术，你将能够在竞争激烈的Web开发领域中有更大的竞争力。

 📘  文章引言

一、mixin是什么

Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类

Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂

Vue中的mixin

先来看一下官方定义

mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods 、created、computed等等

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来

在Vue中我们可以局部混入跟全局混入

局部混入

定义一个mixin对象，有组件options的data、methods属性

var myMixin = {created: function () {this.hello()},methods: {hello: function () {console.log('hello from mixin!')}}
}

组件通过mixins属性调用mixin对象

Vue.component('componentA',{mixins: [myMixin]
})

该组件在使用的时候，混合了mixin里面的方法，在自动执行create生命钩子，执行hello方法

全局混入

通过Vue.mixin()进行全局的混入

Vue.mixin({created: function () {console.log("全局混入")}
})

使用全局混入需要特别注意，因为它会影响到每一个组件实例（包括第三方组件）

PS：全局混入常用于插件的编写

注意事项：

当组件存在与mixin对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖mixin的选项

但是如果相同选项为生命周期钩子的时候，会合并成一个数组，先执行mixin的钩子，再执行组件的钩子

二、使用场景

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立

这时，可以通过Vue的mixin功能将相同或者相似的代码提出来

举个例子

定义一个modal弹窗组件，内部通过isShowing来控制显示

const Modal = {template: '#modal',data() {return {isShowing: false}},methods: {toggleShow() {this.isShowing = !this.isShowing;}}
}

定义一个tooltip提示框，内部通过isShowing来控制显示

const Tooltip = {template: '#tooltip',data() {return {isShowing: false}},methods: {toggleShow() {this.isShowing = !this.isShowing;}}
}

通过观察上面两个组件，发现两者的逻辑是相同，代码控制显示也是相同的，这时候mixin就派上用场了

首先抽出共同代码，编写一个mixin

const toggle = {data() {return {isShowing: false}},methods: {toggleShow() {this.isShowing = !this.isShowing;}}
}

两个组件在使用上，只需要引入mixin

const Modal = {template: '#modal',mixins: [toggle]
};const Tooltip = {template: '#tooltip',mixins: [toggle]
}

通过上面小小的例子，让我们知道了Mixin对于封装一些可复用的功能如此有趣、方便、实用

三、源码分析

首先从Vue.mixin入手

源码位置：/src/core/global-api/mixin.js

export function initMixin (Vue: GlobalAPI) {Vue.mixin = function (mixin: Object) {this.options = mergeOptions(this.options, mixin)return this}
}

主要是调用merOptions方法

export function mergeOptions (parent: Object,child: Object,vm?: Component
): Object {if (child.mixins) { // 判断有没有mixin 也就是mixin里面挂mixin的情况 有的话递归进行合并for (let i = 0, l = child.mixins.length; i < l; i++) {parent = mergeOptions(parent, child.mixins[i], vm)}
}const options = {} let keyfor (key in parent) {mergeField(key) // 先遍历parent的key 调对应的strats[XXX]方法进行合并}for (key in child) {if (!hasOwn(parent, key)) { // 如果parent已经处理过某个key 就不处理了mergeField(key) // 处理child中的key 也就parent中没有处理过的key}}function mergeField (key) {const strat = strats[key] || defaultStratoptions[key] = strat(parent[key], child[key], vm, key) // 根据不同类型的options调用strats中不同的方法进行合并}return options
}

从上面的源码，我们得到以下几点：

  • 优先递归处理 mixins
  • 先遍历合并parent 中的key，调用mergeField方法进行合并，然后保存在变量options
  • 再遍历 child，合并补上 parent 中没有的key，调用mergeField方法进行合并，保存在变量options
  • 通过 mergeField 函数进行了合并

下面是关于Vue的几种类型的合并策略

  • 替换型
  • 合并型
  • 队列型
  • 叠加型

替换型

替换型合并有props、methods、inject、computed

strats.props =
strats.methods =
strats.inject =
strats.computed = function (parentVal: ?Object,childVal: ?Object,vm?: Component,key: string
): ?Object {if (!parentVal) return childVal // 如果parentVal没有值，直接返回childValconst ret = Object.create(null) // 创建一个第三方对象 retextend(ret, parentVal) // extend方法实际是把parentVal的属性复制到ret中if (childVal) extend(ret, childVal) // 把childVal的属性复制到ret中return ret
}
strats.provide = mergeDataOrFn

同名的props、methods、inject、computed会被后来者代替

合并型

和并型合并有：data

strats.data = function(parentVal, childVal, vm) {    return mergeDataOrFn(parentVal, childVal, vm)
};function mergeDataOrFn(parentVal, childVal, vm) {    return function mergedInstanceDataFn() {        var childData = childVal.call(vm, vm) // 执行data挂的函数得到对象var parentData = parentVal.call(vm, vm)        if (childData) {            return mergeData(childData, parentData) // 将2个对象进行合并                                 } else {            return parentData // 如果没有childData 直接返回parentData}}
}function mergeData(to, from) {    if (!from) return to    var key, toVal, fromVal;    var keys = Object.keys(from);   for (var i = 0; i < keys.length; i++) {key = keys[i];toVal = to[key];fromVal = from[key];    // 如果不存在这个属性，就重新设置if (!to.hasOwnProperty(key)) {set(to, key, fromVal);}      // 存在相同属性，合并对象else if (typeof toVal =="object" && typeof fromVal =="object") {mergeData(toVal, fromVal);}}    return to
}

mergeData函数遍历了要合并的 data 的所有属性，然后根据不同情况进行合并：

  • 当目标 data 对象不包含当前属性时，调用 set 方法进行合并（set方法其实就是一些合并重新赋值的方法）
  • 当目标 data 对象包含当前属性并且当前值为纯对象时，递归合并当前对象值，这样做是为了防止对象存在新增属性

队列性

队列性合并有：全部生命周期和watch

function mergeHook (parentVal: ?Array<Function>,childVal: ?Function | ?Array<Function>
): ?Array<Function> {return childVal? parentVal? parentVal.concat(childVal): Array.isArray(childVal)? childVal: [childVal]: parentVal
}LIFECYCLE_HOOKS.forEach(hook => {strats[hook] = mergeHook
})// watch
strats.watch = function (parentVal,childVal,vm,key
) {// work around Firefox's Object.prototype.watch...if (parentVal === nativeWatch) { parentVal = undefined; }if (childVal === nativeWatch) { childVal = undefined; }/* istanbul ignore if */if (!childVal) { return Object.create(parentVal || null) }{assertObjectType(key, childVal, vm);}if (!parentVal) { return childVal }var ret = {};extend(ret, parentVal);for (var key$1 in childVal) {var parent = ret[key$1];var child = childVal[key$1];if (parent && !Array.isArray(parent)) {parent = [parent];}ret[key$1] = parent? parent.concat(child): Array.isArray(child) ? child : [child];}return ret
};

生命周期钩子和watch被合并为一个数组，然后正序遍历一次执行

叠加型

叠加型合并有：component、directives、filters

strats.components=
strats.directives=strats.filters = function mergeAssets(parentVal, childVal, vm, key
) {    var res = Object.create(parentVal || null);    if (childVal) { for (var key in childVal) {res[key] = childVal[key];}   } return res
}

叠加型主要是通过原型链进行层层的叠加

小结：

  • 替换型策略有props、methods、inject、computed，就是将新的同名参数替代旧的参数
  • 合并型策略是data, 通过set方法进行合并和重新赋值
  • 队列型策略有生命周期函数和watch，原理是将函数存入一个数组，然后正序遍历依次执行
  • 叠加型有component、directives、filters，通过原型链进行层层的叠加

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

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

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

相关文章

Spring 只用一招，就摆脱被垃圾回收的命运，拯救了自己

Spring 只用一招，就摆脱被垃圾回收的命运，拯救了自己

SpringBoot ApplicationContext 会被 JVM 当成垃圾对象&#xff0c;然后回收掉吗&#xff1f; 最近五阳哥在复习JVM 垃圾回收的知识&#xff0c;被别人问到这个问题&#xff0c;我心里感到一惊&#xff0c;如果Spring 被回收掉&#xff0c;Spring管理的bean全部会被回收&#…
阅读更多...
Linux系统简介与开源精神

Linux系统简介与开源精神

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Linux系统理论 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言&#x1f324;️Linux系统背景☁️UNIX发展史☁️Linux发展史☁️Linux系统企业应用现…
阅读更多...
TDengine 与煤科院五大系统实现兼容性互认，助力煤矿智能化安全体系搭建

TDengine 与煤科院五大系统实现兼容性互认，助力煤矿智能化安全体系搭建

近日&#xff0c;涛思数据与煤炭科学技术研究院&#xff08;以下简称煤科院&#xff09;已完成数个产品兼容互认证工作&#xff0c;经双方共同严格测试&#xff0c;涛思数据旗下物联网、工业大数据平台 TDengine V3.X 与煤炭科学技术研究院旗下煤矿复合灾害监测监控预警系统、煤…
阅读更多...
LeetCode算法心得——高级访客（模拟枚举+小窗口）

LeetCode算法心得——高级访客（模拟枚举+小窗口）

大家好&#xff0c;我是晴天学长&#xff0c;今天的周赛第二题&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .高级访客 给你一个长度为 n 、下标从 0 开始的二维字符串数组 access_times 。对于每个 …
阅读更多...
μC/OS-II---计时器管理1（os_tmr.c）

μC/OS-II---计时器管理1（os_tmr.c）

目录 创建一个计时器重新启动一个计时器停止一个计时器删除一个计时器 计时器是倒计时器&#xff0c;当计数器达到零时执行某个动作。用户通过回调函数提供这个动作。回调函数是用户声明的函数&#xff0c;在计时器到期时被调用。在回调函数中绝对不能进行阻塞调用&#xff08;…
阅读更多...
Ansible playbook详解

Ansible playbook详解

playbook是ansible用于配置&#xff0c;部署&#xff0c;和被管理被控节点的剧本 playbook常用的YMAL格式&#xff1a;&#xff08;文件名称以 .yml结尾&#xff09; 1、文件的第一行应该以 "---" (三个连字符)开始&#xff0c;表明YMAL文件的开始。 　　 2、在同一…
阅读更多...
原型制作神器ProtoPie的使用Unity与网页跨端交互

原型制作神器ProtoPie的使用Unity与网页跨端交互

什么是ProtoPie&#xff1f; ProtoPie是一款面向设计师的软件原型设计工具&#xff0c;例如制作App界面交互展示&#xff0c;制作好的原型可以一键发布到Web服务器&#xff0c;就可以浏览器访问。由于其内置了大量常用交互类型&#xff0c;以及"程序化"模块&#xf…
阅读更多...
hash算法

hash算法

一、Hash散列算法介绍 1.引言 每个人在这个社会上生存&#xff0c;都会有一个属于自己的标记&#xff0c;用于区分不同的个体。通常使用名字就可以了。但是一个名字也并不能完全表示一个人&#xff0c;因为重名的人很多。所以我们可以使用一个身份证号或者指纹来表示独一无二…
阅读更多...
力扣每日一道系列 --- LeetCode 160. 相交链表

力扣每日一道系列 --- LeetCode 160. 相交链表

&#x1f4f7; 江池俊&#xff1a; 个人主页 &#x1f525;个人专栏&#xff1a; ✅数据结构探索 ✅LeetCode每日一道 &#x1f305; 有航道的人&#xff0c;再渺小也不会迷途。 LeetCode 160. 相交链表 思路&#xff1a; 首先计算两个链表的长度&#xff0c;然后判断两个链…
阅读更多...
Open X-Embodiment 超大规模开源真实机器人数据集分享

Open X-Embodiment 超大规模开源真实机器人数据集分享

近期&#xff0c;Google旗下的前沿人工智能企业DeepMind汇集了来自 22 种不同机器人类型的数据&#xff0c;创建了 Open X-Embodiment 数据集并开源了出来。该数据集让他们研发的RT-2 机器人在制造和编程方式上有了重大飞跃。 有分析称&#xff0c;在上述数据集上训练的 RT-2-…
阅读更多...
gpt-4-turbo、gpt-4v、dall-e-3 api实测！

gpt-4-turbo、gpt-4v、dall-e-3 api实测！

上周GPT大更新&#xff0c;不仅开放了GPT-4-Turbo、GPT-4-Vision等模型api&#xff0c;还发布了GPTs&#xff0c;使得用户能够根据需要定义自己的GPT应用&#xff0c;OpenAI在这波AI革命上又一次震撼世人。 笔者也在上周拿到了几个新模型的api资格&#xff0c;一直盼着可以测试…
阅读更多...
专业的SRM系统全流程管理服务

专业的SRM系统全流程管理服务

一、什么是SRM系统 SRM系统&#xff0c;即供应商关系管理&#xff0c;是供应链管理中的重要组成部分&#xff0c;帮助企业与供应商建立、维护和改善业务关系&#xff0c;以实现双方共赢。本文将从供应商寻源到合同签订、订单履行、到付款及供应商评价等环节&#xff0c;阐述SR…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023