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

最新推荐文章于 2025-01-18 22:00:00 发布

2401_85124719

最新推荐文章于 2025-01-18 22:00:00 发布

阅读量738

点赞数 27

文章标签： javascript 设计模式 vue.js

本文链接：https://blog.csdn.net/2401_85124719/article/details/139579750

版权

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) {

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 || {},

)

}

/* 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. $m o u n t (v m .$ 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: \dotstions.abstract &̲& parent.$ parent) {

parent = parent.$parent

}

parent.$children.push(vm)

}

vm.$parent = parent

vm. $roo t = p a re n t ? p a re n t .$ 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;

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。