javascript设计模式篇之工厂设计模式
一、简介
JavaScript是一门弱类型语言,一种 解释性脚本语言,无需编译即可以运行,它的特征是抽象、封装、继承、多态。而工厂设计模式体现了封装的特性,通过关键词new实现了同一封装,抽象出具体一类事物。
二、设计思路
对象的封装,通过工厂设计模式实现创建
1.工厂函数的实现
通过函数创建对象的私有变量,或者说对象的具体特征,通过原型链prototype来创建对象的共有行为特征。
const Product = function(...options) {
this.name = options[0].name
}
Product.prototype.methods = function() {
console.log('methods')
}
let product = new Product({
name:"test"})
2. 工厂类的实现
es6中提供的通过class方法创建对象,以及构造器的概念,静态方法是类拥有的方法,可用于创建对象实例,类的设计还可用于继承实现父子类共享属性方法。
class Product {
//构造器
constructor(options) {
this.name = options.name
}
//静态方法
static getInstance(prop) {
return new Product(prop)
}
}
三、案例
1.vue项目开发实例
vue也是一个工厂设计的对象实例,以解析vue实例化部分源代码为例,目录在src/core/instance/index.js
import {
initMixin } from './init'
import {
stateMixin } from './state'
import {
renderMixin } from './render'
import {
eventsMixin } from './events'
import {
lifecycleMixin } from './lifecycle'
import {
warn } from '../util/index'
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue
vue的创建是通过函数工厂创建,initMixin(Vue)、stateMixin(Vue)、eventsMixin(Vue)、lifecycleMixin(Vue)、renderMixin(Vue)五个初始化,状态、事件、生产周期、渲染相关的逻辑处理,以initMixin(Vue)为例分析
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${
vm._uid}`
endTag = `vue-perf-end:${
vm._uid}`
mark(startTag)
}
// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {
},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
vm._self = vm
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(`vue ${
vm._name} init`, startTag, endTag)
}
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
}
initMixin方法通过prototype挂载了_init初始化方法。
export function initLifecycle (vm: Component) {
const options = vm.$options
// locate first non-abstract parent
let parent = options.parent
if (parent && !options.abstract) {
while (parent.$options.abstract && parent.$parent) {
parent = parent.$parent
}
parent.$children.push(vm)
}
vm.$parent = parent
vm.$root = parent ? parent.$root : vm
vm.$children = []
vm.$refs = {
}
vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false
vm._isDestroyed = false
vm._isBeingDestroyed = false
}
initLifecycle为vue挂载了很多共有的属性对象。
2.elementUI框架实例
以解析table组件为例,packages/table/src/table.vue
data() {
const {
hasChildren = 'hasChildren', children = 'children' } = this.treeProps;
this.store = createStore(this, {
rowKey: this.rowKey,
defaultExpandAll: this.defaultExpandAll,
selectOnIndeterminate: this.selectOnIndeterminate,
// TreeTable 的相关配置
indent: this.indent,
lazy: this.lazy,
lazyColumnIdentifier: hasChildren,
childrenColumnName: children
});
const layout = new TableLayout({
store: this.store,
table: this,
fit: this.fit,
showHeader: this.showHeader
});
return {
layout,
isHidden: false,
renderExpanded: null,
resizeProxyVisible: false,
resizeState: {
width: null,
height: null
},
// 是否拥有多级表头
isGroup: false,
scrollPosition: 'left'
};
}
this.store = createStore(this, {})是通过函数方式创建实例element/packages/table/src/store/helper.js
export function createStore(table, initialState = {
}) {
if (!table) {
throw new Error('Table is required.');
}
const store = new Store();
store.table = table;
// fix https://github.com/ElemeFE/element/issues/14075
// related pr https://github.com/ElemeFE/element/pull/14146
store.toggleAllSelection = debounce(10, store._toggleAllSelection);
Object.keys(initialState).forEach(key => {
store.states[key] = initialState[key];
});
return store;
}
const layout = new TableLayout({});通过es6类的用法来创建实例,及其拥有的方法updateScrollY
class TableLayout {
constructor(options) {
this.observers = [];
this.table = null;
this.store = null;
this.columns = null;
this.fit = true;
this.showHeader = true;
this.height = null;
this.scrollX = false;
this.scrollY = false;
this.bodyWidth = null;
this.fixedWidth = null;
this.rightFixedWidth = null;
this.tableHeight = null;
this.headerHeight = 44; // Table Header Height
this.appendHeight = 0; // Append Slot Height
this.footerHeight = 44; // Table Footer Height
this.viewportHeight = null; // Table Height - Scroll Bar Height
this.bodyHeight = null; // Table Height - Table Header Height
this.fixedBodyHeight = null; // Table Height - Table Header Height - Scroll Bar Height
this.gutterWidth = scrollbarWidth();
for (let name in options) {
if (options.hasOwnProperty(name)) {
this[name] = options[name];
}
}
if (!this.table) {
throw new Error('table is required for Table Layout');
}
if (!this.store) {
throw new Error('store is required for Table Layout');
}
}
updateScrollY() {
const height = this.height;
if (height === null) return false;
const bodyWrapper = this.table.bodyWrapper;
if (this.table.$el && bodyWrapper) {
const body = bodyWrapper.querySelector('.el-table__body');
const prevScrollY = this.scrollY;
const scrollY = body.offsetHeight > this.bodyHeight;
this.scrollY = scrollY;
return prevScrollY !== scrollY;
}
return false;
}