From 20be46572daa94d7901ebb69944a5f22213de328 Mon Sep 17 00:00:00 2001 From: wuhy Date: Tue, 13 Nov 2018 15:50:08 +0800 Subject: [PATCH] feat(okam-core): optimize ant array data operation --- packages/okam-core/src/ant/base/component.js | 37 +++++---- packages/okam-core/src/base/page.js | 1 + .../src/extend/data/observable/Observer.js | 45 ++++++++++- .../src/extend/data/observable/ant/array.js | 81 +++++++++++++++++++ .../src/extend/data/observable/ant/index.js | 38 ++++++++- .../src/extend/data/observable/array.js | 79 ++++++++++++------ .../src/extend/data/observable/index.js | 76 ++++++++--------- .../src/extend/data/observable/initProps.js | 22 +++++ .../src/extend/data/observable/wx/index.js | 13 +++ packages/okam-core/src/extend/data/watch.js | 2 +- packages/okam-core/src/helper/methods.js | 2 +- 11 files changed, 308 insertions(+), 88 deletions(-) create mode 100644 packages/okam-core/src/extend/data/observable/ant/array.js create mode 100644 packages/okam-core/src/extend/data/observable/initProps.js create mode 100644 packages/okam-core/src/extend/data/observable/wx/index.js diff --git a/packages/okam-core/src/ant/base/component.js b/packages/okam-core/src/ant/base/component.js index 6887ed8a..f2c14b7e 100644 --- a/packages/okam-core/src/ant/base/component.js +++ b/packages/okam-core/src/ant/base/component.js @@ -7,22 +7,7 @@ import componentBase from '../../base/component'; - /** - * Emit custom component event - * - * @param {...any} args the event arguments - */ -componentBase.methods.$emit = function (...args) { - this.__beforeEmit && this.__beforeEmit(args); - this.$listener.emit.apply(this.$listener, args); - - let eventProp = args[0]; - eventProp = 'on' + eventProp.charAt(0).toUpperCase() + eventProp.substr(1); - let eventHandler = this.props[eventProp]; - eventHandler.call(this, args[1]); -}; - -export default Object.assign(componentBase, { +const antComponent = Object.assign({}, componentBase, { didMount() { this.created(); this.attached(); @@ -38,3 +23,23 @@ export default Object.assign(componentBase, { this.detached(); } }); + +antComponent.methods = Object.assign({}, antComponent.methods, { + + /** + * Emit custom component event + * + * @param {...any} args the event arguments + */ + $emit(...args) { + this.__beforeEmit && this.__beforeEmit(args); + this.$listener.emit.apply(this.$listener, args); + + let eventProp = args[0]; + eventProp = 'on' + eventProp.charAt(0).toUpperCase() + eventProp.substr(1); + let eventHandler = this.props[eventProp]; + eventHandler.call(this, args[1]); + } +}); + +export default antComponent; diff --git a/packages/okam-core/src/base/page.js b/packages/okam-core/src/base/page.js index e53bd40f..25ccac3c 100644 --- a/packages/okam-core/src/base/page.js +++ b/packages/okam-core/src/base/page.js @@ -16,6 +16,7 @@ export default Object.assign({}, component, { * @param {Object} query the page query params */ onLoad(query) { + this.$isPage = true; this.$query = query || {}; // call component create life cycle method diff --git a/packages/okam-core/src/extend/data/observable/Observer.js b/packages/okam-core/src/extend/data/observable/Observer.js index 09378673..5b933807 100644 --- a/packages/okam-core/src/extend/data/observable/Observer.js +++ b/packages/okam-core/src/extend/data/observable/Observer.js @@ -47,11 +47,12 @@ export function proxyObject(observer, data, root) { * * @param {Observer} observer the observer to observe array * @param {Array} arr the array data to proxy + * @param {boolean} isPage whether is page component * @return {Array} */ -export function proxyArray(observer, arr) { +export function proxyArray(observer, arr, isPage) { let newArr = []; - makeArrayObservable(newArr, observer); + makeArrayObservable(newArr, observer, isPage); // XXX: copy array // we cannot proxy array element visited by index, so we should not proxy array element by default @@ -85,6 +86,41 @@ export default class Observer { this.selector = getDataSelector(this.paths); } + /** + * Set context data + * + * @private + * @param {*} value the value to set + */ + setContextData(value) { + let paths = this.paths; + let result = this.ctx.data; + let lastIdx = paths.length - 1; + for (let i = 0; i < lastIdx; i++) { + let p = paths[i]; + result = result[p]; + } + + /* istanbul ignore next */ + if (lastIdx >= 0) { + result[paths[lastIdx]] = value; + } + } + + /** + * Get context data + * + * @return {*} + */ + getContextData() { + let paths = this.paths; + let result = this.ctx.data; + for (let i = 0, len = paths.length; i < len; i++) { + result = result[paths[i]]; + } + return result; + } + /** * Add dependence to current target computed property * @@ -121,7 +157,7 @@ export default class Observer { if (Array.isArray(value)) { paths || (paths = this.getPaths(k)); let observer = new Observer(ctx, value, paths, this.isProps); - return (observeData[k] = proxyArray(observer, value)); + return (observeData[k] = proxyArray(observer, value, ctx.$isPage)); } else if (value && typeof value === 'object') { paths || (paths = this.getPaths(k)); @@ -189,6 +225,9 @@ export default class Observer { this.rawData[k] = val; } + else { + this.setContextData(this.rawData); + } this.ctx.$setData({[selector]: val}); this.notifyWatcher(val, oldVal, paths); diff --git a/packages/okam-core/src/extend/data/observable/ant/array.js b/packages/okam-core/src/extend/data/observable/ant/array.js new file mode 100644 index 00000000..5cd813db --- /dev/null +++ b/packages/okam-core/src/extend/data/observable/ant/array.js @@ -0,0 +1,81 @@ +/** + * @file Array data update proxy for ant application + * @author sparklewhy@gmail.com + */ + +'use strict'; + +/* eslint-disable fecs-export-on-declare */ + +const componentApi = { + __spliceData(path, spliceArgs, observer) { + let spliceInfo = {[path]: spliceArgs}; + this.$spliceData(spliceInfo, this.__nextTickCallback); + // update the cache raw data + observer.rawData = observer.getContextData(); + } +}; + +const observableArray = { + push(observer, rawPush, ...items) { + let {ctx, selector} = observer; + + ctx.__spliceData(selector, [this.length, 0, ...items], observer); + + return rawPush.apply(this, items); + }, + + shift(observer, rawShift) { + let {ctx, selector} = observer; + if (!this.length) { + return rawShift.call(this); + } + + ctx.__spliceData(selector, [0, 1], observer); + + return rawShift.call(this); + }, + + unshift(observer, rawUnshift, ...items) { + let {ctx, selector} = observer; + ctx.__spliceData(selector, [0, 0, ...items], observer); + + return rawUnshift.apply(this, items); + }, + + pop(observer, rawPop) { + let {ctx, selector} = observer; + let len = this.length; + if (!len) { + return rawPop.call(this); + } + ctx.__spliceData(selector, [len - 1, 1], observer); + + return rawPop.call(this); + }, + + splice(observer, rawSplice, ...args) { + let {ctx, selector} = observer; + ctx.__spliceData(selector, args, observer); + + return rawSplice.apply(this, args); + } +}; + +Object.keys(observableArray).forEach(k => { + let raw = observableArray[k]; + observableArray[k] = function (...args) { + let observer = args[0]; + observer.ctx.__dataUpTaskNum++; + let result = raw.apply(this, args); + + observer.notifyWatcher(this, this, observer.paths); + + return result; + }; +}); + +export { + observableArray as array, + componentApi as component +}; diff --git a/packages/okam-core/src/extend/data/observable/ant/index.js b/packages/okam-core/src/extend/data/observable/ant/index.js index acf5947b..32e4ae5a 100644 --- a/packages/okam-core/src/extend/data/observable/ant/index.js +++ b/packages/okam-core/src/extend/data/observable/ant/index.js @@ -5,8 +5,42 @@ 'use strict'; -import observable, {setPropDataKey} from '../index'; +import observable, {setObservableContext} from '../index'; +import {observableArray, overrideArrayMethods} from '../array'; +import {component as antApi, array as antArray} from './array'; -setPropDataKey('props'); +setObservableContext('props', true); + +Object.assign(observable.component.methods, antApi); + +let arrApis = Object.assign({}, observableArray, antArray); +overrideArrayMethods(arrApis, true); +overrideArrayMethods(arrApis, false); + +/** + * View update hook + * + * @private + * @param {Object} prevProps the previous property data before update + */ +observable.component.didUpdate = function (prevProps) { + let propObserver = this.__propsObserver; + if (!propObserver) { + return; + } + + let currProps = this.props; + // update the cache props data, as for the prop data will be override + // when prop change, it leads to the cache props data will not refer to + // the new props data + propObserver.rawData = currProps; + Object.keys(prevProps).forEach(k => { + let newVal = currProps[k]; + let oldVal = prevProps[k]; + if (newVal !== oldVal) { + propObserver.firePropValueChange(k, newVal, oldVal); + } + }); +}; export default observable; diff --git a/packages/okam-core/src/extend/data/observable/array.js b/packages/okam-core/src/extend/data/observable/array.js index e329aab0..12eb0d65 100644 --- a/packages/okam-core/src/extend/data/observable/array.js +++ b/packages/okam-core/src/extend/data/observable/array.js @@ -5,6 +5,13 @@ 'use strict'; +const hasProto = '__proto__' in {}; + +/** + * The default override Array APIs to proxy array data update + * + * @type {Object} + */ export const observableArray = { push(observer, rawPush, ...items) { let rawData = observer.rawData; @@ -80,6 +87,37 @@ export const observableArray = { } }; +/** + * The Page Array APIs to override + * + * @inner + * @type {Object} + */ +let overridePageArrApis = observableArray; + +/** + * The component Array APIs to override + * + * @inner + * @type {Object} + */ +let overrideComponentArrApis = observableArray; + +/** + * Extend the array operation methods + * + * @param {Object} arrApis the array methods to override + * @param {boolean} isPage whether is page Array APIs to override + */ +export function overrideArrayMethods(arrApis, isPage) { + if (isPage) { + overridePageArrApis = arrApis; + } + else { + overrideComponentArrApis = arrApis; + } +} + /** * Update array item value * @@ -103,41 +141,34 @@ function getArrayItem(observer, idx) { return observer.get(idx); } -let overrideArrApis = observableArray; - /** - * Extend the array operation methods + * Make array observable * - * @param {Object} extension the array method extension - * @param {boolean} isOverride whether override default array extend apis, - * by default false, for test purpose + * @param {Array} arr the array to observe + * @param {Observer} observer the observer + * @param {boolean} isPage whether is page Array APIs to override + * @return {Array} */ -export function extendArrayMethods(extension, isOverride) { +export default function makeArrayObservable(arr, observer, isPage) { + let arrayMethods; /* istanbul ignore next */ - if (isOverride) { - overrideArrApis = extension; + if (hasProto) { + arrayMethods = Object.create(Array.prototype); + /* eslint-disable no-proto */ + arr.__proto__ = arrayMethods; } else { - /* istanbul ignore next */ - Object.assign(overrideArrApis, extension); + arrayMethods = arr; } -} -/** - * Make array observable - * - * @param {Array} arr the array to observe - * @param {Observer} observer the observer - * @return {Array} - */ -export default function makeArrayObservable(arr, observer) { + let overrideArrApis = isPage ? overridePageArrApis : overrideComponentArrApis; Object.keys(overrideArrApis).forEach(method => { - let rawMethod = arr[method]; - arr[method] = overrideArrApis[method].bind(arr, observer, rawMethod); + let rawMethod = arrayMethods[method]; + arrayMethods[method] = overrideArrApis[method].bind(arr, observer, rawMethod); }); - arr.setItem = updateArrayItem.bind(arr, observer); - arr.getItem = getArrayItem.bind(arr, observer); + arrayMethods.setItem = updateArrayItem.bind(arr, observer); + arrayMethods.getItem = getArrayItem.bind(arr, observer); return arr; } diff --git a/packages/okam-core/src/extend/data/observable/index.js b/packages/okam-core/src/extend/data/observable/index.js index a206f769..6c704efb 100644 --- a/packages/okam-core/src/extend/data/observable/index.js +++ b/packages/okam-core/src/extend/data/observable/index.js @@ -20,6 +20,13 @@ import {getSetDataPaths} from './setData'; */ let propDataKey = 'data'; +/** + * Whether skip the `beforeUpdate`/`updated` hook + * + * @type {boolean} + */ +let isSkipUpdateHook = false; + /** * Make computed props observable * @@ -63,7 +70,12 @@ function makePropsObservable(ctx) { return; } - let observer = new Observer(ctx, ctx[propDataKey] || {}, null, true); + let observer = new Observer( + ctx, + ctx[propDataKey] || /* istanbul ignore next */ {}, + null, + true + ); let propsObj = {}; Object.keys(props).reduce((last, item) => { @@ -103,58 +115,40 @@ function makeDataObservable(ctx) { } /** - * Initialize the props to add observer to the prop to listen the prop change. - * - * @inner - * @param {Object} ctx the component definition context - * @param {boolean} isPage whether is page component - */ -function initProps(ctx, isPage) { - // cache the raw props information because the mini program will merge data - // and props later on. - let props = ctx.props; - if (!props) { - return; - } - - let rawProps = Object.assign({}, props); - ctx.rawProps = rawProps; - normalizeExtendProp(ctx, 'rawProps', '$rawProps', isPage); - - Object.keys(props).forEach(p => { - let value = props[p]; - let rawObserver = value.observer; - value.observer = function (newVal, oldVal, changePath) { - rawObserver && rawObserver.call(this, newVal, oldVal, changePath); - let propObserver = this.__propsObserver; - propObserver && propObserver.firePropValueChange(p, newVal, oldVal); - }; - }); -} - -/** - * Set the component property data key + * Set observable context setting * * @param {string} key the prop data key + * @param {boolean} ignoreUpdateHook whether skip update hook */ -export function setPropDataKey(key) { - key && (propDataKey = key); +export function setObservableContext(key, ignoreUpdateHook) { + propDataKey = key; + isSkipUpdateHook = !!ignoreUpdateHook; } export default { component: { /** - * The instance initialization before the instance is normalized and created. + * Initialize the props to add observer to the prop to listen the prop change. * * @param {boolean} isPage whether is page component - * @private */ $init(isPage) { - initProps(this, isPage); - // normalize extend computed property normalizeExtendProp(this, 'computed', '$rawComputed', isPage); + + // cache the raw props information because the mini program will merge data + // and props later on. + let props = this.props; + if (!props) { + return; + } + + let rawProps = Object.assign({}, props); + this._rawProps = rawProps; + normalizeExtendProp(this, '_rawProps', '$rawProps', isPage); + + this.__initProps && this.__initProps(); }, /** @@ -187,7 +181,7 @@ export default { // init computed data computedObserver.initComputedPropValues(); - this.afterObserverInit && this.afterObserverInit(); + this.__afterObserverInit && this.__afterObserverInit(); }, /** @@ -245,7 +239,7 @@ export default { } // call lifecycle updated hook - this.updated && this.updated(); + isSkipUpdateHook || (this.updated && this.updated()); }, /** @@ -263,7 +257,7 @@ export default { if (queues) { // TODO optimize value update: merge operations // call lifecycle beforeUpdate hook - this.beforeUpdate && this.beforeUpdate(); + isSkipUpdateHook || (this.beforeUpdate && this.beforeUpdate()); this.setData(getSetDataPaths(queues), this.__nextTickCallback); this.$upQueues = null; } diff --git a/packages/okam-core/src/extend/data/observable/initProps.js b/packages/okam-core/src/extend/data/observable/initProps.js new file mode 100644 index 00000000..6a81db41 --- /dev/null +++ b/packages/okam-core/src/extend/data/observable/initProps.js @@ -0,0 +1,22 @@ +/** + * @file Props initialization helper + * @author sparklewhy@gmail.com + */ + +'use strict'; + +/** + * Initialize the props to add observer to the prop to listen the prop change. + */ +export default function initProps() { + let props = this.props; + Object.keys(props).forEach(p => { + let value = props[p]; + let rawObserver = value.observer; + value.observer = function (newVal, oldVal, changePath) { + rawObserver && rawObserver.call(this, newVal, oldVal, changePath); + let propObserver = this.__propsObserver; + propObserver && propObserver.firePropValueChange(p, newVal, oldVal); + }; + }); +} diff --git a/packages/okam-core/src/extend/data/observable/wx/index.js b/packages/okam-core/src/extend/data/observable/wx/index.js new file mode 100644 index 00000000..feeed31e --- /dev/null +++ b/packages/okam-core/src/extend/data/observable/wx/index.js @@ -0,0 +1,13 @@ +/** + * @file Make component support data operation like Vue for weixin mini program + * @author sparklewhy@gmail.com + */ + +'use strict'; + +import observable from '../index'; +import initProps from '../initProps'; + +observable.component.__initProps = initProps; + +export default observable; diff --git a/packages/okam-core/src/extend/data/watch.js b/packages/okam-core/src/extend/data/watch.js index 92fd40ad..44388806 100644 --- a/packages/okam-core/src/extend/data/watch.js +++ b/packages/okam-core/src/extend/data/watch.js @@ -128,7 +128,7 @@ export default { * * @private */ - afterObserverInit() { + __afterObserverInit() { let watch = this.$rawWatch; if (typeof watch === 'function') { watch = this.$rawWatch(); diff --git a/packages/okam-core/src/helper/methods.js b/packages/okam-core/src/helper/methods.js index 512f3a7d..8773162d 100644 --- a/packages/okam-core/src/helper/methods.js +++ b/packages/okam-core/src/helper/methods.js @@ -18,7 +18,7 @@ const extendPropMethods = [ ]; /** - * Normalize extended property + * Normalize extended property: convert the extended prop to methods prop * * @param {Object} component the component instance * @param {string} propName the extended property name