[new feature] 增加支持合并page生命周期的extend函数 (#90)

* [new feature] 添加支持合并生命周期的extend函数

* 增加yarn.lock

* fix comment

* 保持example引用与文档一致

example/pages/tab/index.js

@@ -1,6 +1,6 @@
-var Zan = require('../../dist/index');
+const { Tab, extend } = require('../../dist/index');
 
-Page(Object.assign({}, Zan.Tab, {
+Page(extend({}, Tab, {
   data: {
     tab1: {
       list: [{

packages/common/helper.js

@@ -5,6 +5,56 @@ function extractComponentId(event = {}) {
   return componentId;
 }
 
-module.exports = {
-  extractComponentId
+const LIFE_CYCLE = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll'];
+/*
+  1. 直接合并所有生命周期函数
+  Page(extend({}, {
+    onLoad() {},
+    ...
+  }));
+
+  2. 只合并指定的生命周期
+  const extendOnload = extend(['onLoad']);
+  Page(extendOnload({}, {
+    onLoad() {},
+    ...
+  }));
+*/
+const extend = (obj, ...rest) => {
+  if (Array.isArray(obj)) {
+    let lifeCycleList = obj.filter(item => LIFE_CYCLE.indexOf(item) >= 0);
+    return extendWithLife.bind(null, lifeCycleList);
+  }
+  return extendWithLife(LIFE_CYCLE, obj, ...rest);
+};
+
+const extendWithLife = (lifeCycleList, target, ...objList) => {
+  objList.forEach((source) => {
+    if (source) {
+      let keys = Object.keys(source);
+      keys.forEach((key) => {
+        let value = source[key];
+        if (lifeCycleList.indexOf(key) >= 0 && typeof value === 'function') {
+          // 合并生命周期函数，可选择改成闭包函数列表
+          let funcArrayName = `__$${key}`;
+          if (!target[funcArrayName]) {
+            target[funcArrayName] = [value];
+            target[key] = function(...rest) {
+              target[funcArrayName].forEach(func => func.apply(this, rest));
+            };
+          } else {
+            target[funcArrayName].push(value);
+          }
+        } else {
+          target[key] = value;
+        }
+      });
+    }
+  });
+  return target;
+};
+
+module.exports = {
+  extractComponentId,
+  extend
 };

packages/dialog/README.md

@@ -13,10 +13,10 @@
 <template is="zan-dialog" data="{{ zanDialog }}"></template>
 ```
 ```js
-const Dialog = require('path/to/zanui-weapp/dist/dialog/index');
+const { Dialog, extend } = require('path/to/zanui-weapp/dist/index');
 
 // 在 Page 中混入 Dialog 里面声明的方法
-Page(Object.assign({}, Dialog, {
+Page(extend({}, Dialog, {
   // ...
 }));
 ```

packages/field/README.md

@@ -14,10 +14,10 @@
 <template is="zan-field" data="{{ value }}"></template>
 ```
 ```js
-const Field = require('path/to/zanui-weapp/dist/field/index');
+const { Field, extend } = require('path/to/zanui-weapp/dist/index');
 
 // 在 Page 中混入 Field 里面声明的方法
-Page(Object.assign({}, Field, {
+Page(extend({}, Field, {
   // ...
 }));
 ```
@@ -30,7 +30,7 @@ field 支持多种展示方式，在 `data` 中传入对应的设置即可。
 
 当 field 触发输入事件时，可以在页面中注册 handleZanFieldChange 方法来监听
 ```js
-Page(Object.assign({}, Field, {
+Page(extend({}, Field, {
   // 输入框内容更改时触发
   handleZanFieldChange({ componentId, detail }) {
     /*

packages/index.js

@@ -7,3 +7,6 @@ exports.Switch = require('./switch/index');
 exports.Tab = require('./tab/index');
 exports.Toast = require('./toast/index');
 exports.TopTips = require('./toptips/index');
+
+const { extend } = require('./common/helper');
+exports.extend = extend;

packages/noticebar/README.md

@@ -16,7 +16,9 @@
 
 // 在 Page 中混入 Noticebar 里面声明的方法
 ```js
-Page(Object.assign({}, Noticebar, {
+const { Noticebar, extend } = require('path/to/zanui-weapp/dist/index');
+
+Page(extend({}, Noticebar, {
   // ...
 }));
 ```
@@ -31,7 +33,7 @@ Page(Object.assign({}, Noticebar, {
 
 如果组件需要开启滚动展示，需要在 Page 的脚本中执行 initZanNoticeBarScroll 方法，来开启滚动展示
 ```js
-Page(Object.assign({}, Noticebar, {
+Page(extend({}, Noticebar, {
   // ...
   onShow() {
     // 在方法中传入对应的 componentId

packages/stepper/README.md

@@ -13,10 +13,10 @@
 <template is="zan-stepper" data="{{ ...stepper, componentId: 'stepper' }}"></template>
 ```
 ```js
-const Stepper = require('path/to/zanui-weapp/dist/stepper/index');
+const { extend, Stepper } = require('path/to/zanui-weapp/dist/index');
 
 // 在 Page 中混入 Stepper 里面声明的方法
-Page(Object.assign({}, Stepper, {
+Page(extend({}, Stepper, {
   // ...
 }));
 ```
@@ -39,7 +39,7 @@ const stepper = {
 
 当 stepper 被点击时，可以在页面中注册 handleZanStepperChange 方法来监听
 ```js
-Page(Object.assign({}, Stepper, {
+Page(extend({}, Stepper, {
   handleZanStepperChange({ componentId, stepper }) {
     // componentId 即为在模板中传入的 componentId
     // 用于在一个页面上使用多个 stepper 时，进行区分

packages/switch/README.md

@@ -11,10 +11,10 @@
 <import src="path/to/zanui-weapp/dist/switch/index.wxml" />
 ```
 ```js
-const Switch = require('path/to/zanui-weapp/dist/switch/index');
+const { Switch, extend } = require('path/to/zanui-weapp/dist/index');
 
 // 在 Page 中混入 Switch 里面声明的方法
-Page(Object.assign({}, Switch, {
+Page(extend({}, Switch, {
   // ...
 }));
 ```
@@ -34,7 +34,7 @@ Page(Object.assign({}, Switch, {
 
 当 switch 被点击时，可以在页面中注册 handleZanSwitchChange 方法来监听
 ```js
-Page(Object.assign({}, Tab, {
+Page(extend({}, Tab, {
   handleZanSwitchChange({ componentId, checked }) {
     // componentId 即为在模板中传入的 componentId
     // 用于在一个页面上使用多个 switch 时，进行区分

packages/tab/README.md

@@ -11,10 +11,10 @@
 <import src="path/to/zanui-weapp/dist/tab/index.wxml" />
 ```
 ```js
-const Tab = require('path/to/zanui-weapp/dist/tab/index');
+const { extend, Tab } = require('path/to/zanui-weapp/dist/index');
 
 // 在 Page 中混入 Tab 里面声明的方法
-Page(Object.assign({}, Tab, {
+Page(extend({}, Tab, {
   // ...
 }));
 ```
@@ -57,7 +57,7 @@ tab 组件中，list 数据格式如下
 
 当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听
 ```js
-Page(Object.assign({}, Tab, {
+Page(extend({}, Tab, {
   handleZanTabChange({ componentId, selectedId }) {
     // componentId 即为在模板中传入的 componentId
     // 用于在一个页面上使用多个 tab 时，进行区分

packages/toast/README.md

@@ -14,10 +14,10 @@
 <template is="zan-toast" data="{{ zanToast }}"></template>
 ```
 ```js
-const Toast = require('path/to/zanui-weapp/dist/toast/index');
+const { Toast, extend } = require('path/to/zanui-weapp/dist/index');
 
 // 在 Page 中混入 Toast 里面声明的方法
-Page(Object.assign({}, Toast, {
+Page(extend({}, Toast, {
   // ...
 }));
 ```

packages/toptips/README.md

@@ -14,10 +14,10 @@
 <template is="zan-toptips" data="{{ zanTopTips }}"></template>
 ```
 ```js
-const Toptips = require('path/to/zanui-weapp/dist/toptips/index');
+const { Toptips, extend } = require('path/to/zanui-weapp/dist/index');
 
 // 在 Page 中混入 Toptips 里面声明的方法
-Page(Object.assign({}, Toptips, {
+Page(extend({}, Toptips, {
   // ...
 }));
 ```