网站建设与设计实习报告,石家庄建站模板源码,分销平台搭建,在阿里巴巴做网站多少钱在UE#xff08;用户体验#xff09;设计中#xff0c;Mixin#xff08;混入#xff09;是一种设计模式和方法#xff0c;用于实现代码的复用和功能的扩展。Mixin 的基本概念是将一个或多个已定义的功能集合#xff08;例如方法、样式、状态等#xff09;注入到一个对象… 在UE用户体验设计中Mixin混入是一种设计模式和方法用于实现代码的复用和功能的扩展。Mixin 的基本概念是将一个或多个已定义的功能集合例如方法、样式、状态等注入到一个对象或组件中以增强其功能而无需改变其原有结构。 一、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(全局混入)}
})使用全局混入需要特别注意因为它会影响到每一个组件实例包括第三方组件 全局混入常用于插件的编写 注意事项 当组件存在与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入手
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: ?ArrayFunction,childVal: ?Function | ?ArrayFunction
): ?ArrayFunction {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 Firefoxs 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.directivesstrats.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通过原型链进行层层的叠加 四、Mixin 在 UE 设计中具有以下优点和缺点
优点 代码复用Mixin 可以将可复用的功能单元定义为独立模块通过注入到不同的对象或组件中进行复用避免了重复编写相同的代码提高了代码的可维护性和重用性。 功能扩展通过注入额外的功能Mixin 可以扩展对象或组件的能力使其拥有更多的行为和特性从而增强了用户体验。 灵活组合Mixin 允许多个功能组合成一个整体可以根据需要将不同的 Mixin 组合起来创建具有多种功能的对象或组件提供更丰富的用户体验。 解耦和灵活性Mixin 的使用可以降低代码间的耦合度功能与对象解耦使得代码更加灵活、可测试便于进行模块化和重构。
缺点需注意点 命名冲突使用多个 Mixin 时如果命名冲突可能会导致代码冲突或覆盖需要谨慎管理命名避免命名冲突产生意外结果。 复杂性增加当使用多个 Mixin 时可能会增加代码的复杂性特别是在处理多个 Mixin 之间的依赖关系和执行顺序时需要仔细管理。 隐式依赖Mixin 的使用可能导致代码间的隐式依赖关系使得代码更加难以理解和维护特别是在大型项目中。 增加理解成本对于不熟悉 Mixin 的开发人员理解和使用 Mixin 可能需要额外的学习成本特别是在处理复杂的 Mixin 组合和冲突解决时。 综上所述Mixin 在 UE 设计中具有代码复用、功能扩展和灵活组合等优点但也存在命名冲突、复杂性增加、隐式依赖和理解成本增加等缺点。因此在使用 Mixin 时需要权衡利弊并根据具体情况做出合理的选择和管理。
