javascript设计模式篇之工厂设计模式

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._nam 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 e = 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.KaTeX parse error: Expected 'EOF', got '&' at position 18: …tions.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’);

}

}