fix: 修复合并生命周期extend函数 & 修改tab文档 (#93)

packages/common/helper.js

@@ -5,56 +5,72 @@ function extractComponentId(event = {}) {
   return componentId;
 }
 
-const LIFE_CYCLE = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll'];
 /*
-  1. 直接合并所有生命周期函数
+  注：默认合并所有生命周期函数
+  配置合并指定的生命周期 or 忽略指定字段
+  const extend = extendCreator({
+    life: ['onLoad', 'onPullDownRefresh'],
+    exclude: ['binder']
+  });
+
   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 LIFE_CYCLE = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll'];
+
+const extendCreator = (config = {}) => {
+  const {
+    life = LIFE_CYCLE,
+    exclude = []
+  } = config;
+
+  const excludeList = exclude.concat(LIFE_CYCLE.map(getFuncArrayName));
+
+  if (!Array.isArray(life) || !Array.isArray(exclude)) throw new Error('Invalid Extend Config');
+  let lifeCycleList = life.filter(item => LIFE_CYCLE.indexOf(item) >= 0);
+  return function extend(target, ...objList) {
+    objList.forEach((source) => {
+      if (source) {
+        let keys = Object.keys(source);
+        keys.forEach((key) => {
+          let value = source[key];
+          if (excludeList.indexOf(key) >= 0) return;
+          if (lifeCycleList.indexOf(key) >= 0 && typeof value === 'function') {
+            let funcArrayName = getFuncArrayName(key);
+            if (!target[funcArrayName]) {
+              target[funcArrayName] = [];
+              if (target[key]) {
+                target[funcArrayName].push(target[key]);
+              }
+              target[key] = function (...rest) {
+                target[funcArrayName].forEach(func => func.apply(this, rest));
+              };
+            }
+
+            if (source[funcArrayName]) {
+              // 经过生命周期合并的组件直接整合函数列表
+              target[funcArrayName].push(...source[funcArrayName]);
+            } else {
+              // 添加生命周期函数进入函数列表
+              target[funcArrayName].push(value);
+            }
+          } else {
+            target[key] = value;
+          }
+        });
+      }
+    });
+    return target;
+  };
 };
 
-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;
-};
+const getFuncArrayName = name => `__$${name}`;
 
 module.exports = {
   extractComponentId,
-  extend
+  extend: Object.assign,
+  extendCreator
 };

packages/tab/README.md

@@ -22,18 +22,20 @@ Page(extend({}, Tab, {
 ### 代码演示
 在模板中使用 zan-tab 模板，并传入相应数据
 ```html
-<template is="zan-tab" data="{{ list, selectedId: '', componentId: 'tab1' }}"></template>
+<template is="zan-tab" data="{{ tab: { list, selectedId, scroll, height }, componentId: 'tab1' }}"></template>
 ```
 
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
-| list | tab 列表 | Array | - | |
-| selectedId | 当前被选中 tab 项的 id | String | - | |
-| scroll | 是否开启 tab 左右滑动模式 | Boolean | - | |
+| tab | tab 配置对象 | Object | - | |
+| tab.scroll | 是否开启 tab 左右滑动模式 | Boolean | - | |
+| tab.list | 可选项列表 | Array | - | |
+| tab.selectedId | 选中id | - | - | |
+| tab.height | tab高度 | Number | - | |
 | componentId | 用于区分页面多个 tab 组件 | String | - | |
 
 
-tab 组件中，list 数据格式如下
+tab 组件中，tab.list 数据格式如下
 ```js
 [{
   // tab 项 id