From 021d30efb116fba46c76a27fc929d2a6f7a9d707 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 20 Dec 2017 17:39:51 +0800
Subject: [PATCH] [Improvement] optimize area performance (#457)

---
 docs/markdown/zh-CN/area.md   |  61 +++++++-------
 packages/area/index.vue       | 145 +++++++++++++---------------------
 packages/locale/lang/en-US.js |   2 +-
 packages/locale/lang/zh-CN.js |   2 +-
 test/unit/selector.js         |   4 +-
 test/unit/specs/area.spec.js  |   6 +-
 6 files changed, 98 insertions(+), 122 deletions(-)

diff --git a/docs/markdown/zh-CN/area.md b/docs/markdown/zh-CN/area.md
index ebfcfaddd..8c2e486da 100644
--- a/docs/markdown/zh-CN/area.md
+++ b/docs/markdown/zh-CN/area.md
@@ -2,7 +2,7 @@
 
 ### 使用指南
 
-``` javascript
+```javascript
 import { Area } from 'vant';
 
 Vue.use(Area);
@@ -12,25 +12,23 @@ Vue.use(Area);
 
 #### 基础用法
 
-要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`数据格式具体可看下面数据格式章节。
+要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`数据格式具体可看下面数据格式章节
 
 ```html
 <van-area :areaList="areaList" />
 ```
 
-
 #### 选中省市县
 
-如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
+如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`
 
 ```html
 <van-area :areaList="areaList" value="110101" />
 ```
 
-
 #### 配置显示列
 
-可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
+可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择
 
 ```html
 <van-area :areaList="areaList" :columnsNum="2" title="标题" />
@@ -38,29 +36,30 @@ Vue.use(Area);
 
 ### API
 
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| value | 当前选中的省市区`code` | `String` | - | - |
-| title | 顶部栏标题 | `String` | `''` | - |
-| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - |
-| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
+| 参数       | 说明                                                                | 类型              | 默认值 | 可选值 |
+| ---------- | ------------------------------------------------------------------- | ----------------- | ------ | ------ |
+| value      | 当前选中的省市区`code`                                              | `String`          | -      | -      |
+| title      | 顶部栏标题                                                          | `String`          | `''`   | -      |
+| areaList   | 省市县数据，必须与`province_list`、`city_list`和`county_list`为 key | `Object`          | -      | -      |
+| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省                              | `String`,`Number` | 3      | -      |
 
 ### Event
 
-| 事件名称 | 说明 | 回调参数 |
-|-----------|-----------|-----------|
-| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
-| cancel | 点击取消按钮时 | - |
+| 事件名称 | 说明               | 回调参数                                 |
+| -------- | ------------------ | ---------------------------------------- |
+| confirm  | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
+| cancel   | 点击取消按钮时     | -                                        |
 
 ### 数据格式
 
 #### 省市县列表数据格式
 
-整体是一个Object，包含 `province_list`, `city_list`, `county_list` 三个key。
+整体是一个 Object，包含 `province_list`, `city_list`, `county_list` 三个 key。
 
-每项以省市区编码作为key，省市区名字作为value。编码为6位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以0补足6位。如北京编码为 `11`，以零补足6位，为 `110000`。
+每项以省市区编码作为 key，省市区名字作为 value。编码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。如北京编码为 `11`，以零补足 6 位，为 `110000`。
 
 `AreaList`具体格式如下：
+
 ```javascript
 {
   province_list: {
@@ -91,18 +90,24 @@ Vue.use(Area);
 完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
 
 #### 点击完成时返回的数据格式
+
 返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
 
 `code` 代表被选中的地区编码， `name` 代表被选中的地区名称
+
 ```javascript
-[{
-  code: '110000',
-  name: '北京市'
-}, {
-  code: '110100',
-  name: '北京市'
-},{
-  code: '110101',
-  name: '东城区'
-}]
+[
+  {
+    code: '110000',
+    name: '北京市'
+  },
+  {
+    code: '110100',
+    name: '北京市'
+  },
+  {
+    code: '110101',
+    name: '东城区'
+  }
+];
 ```
diff --git a/packages/area/index.vue b/packages/area/index.vue
index 8603c2767..86c0f6d0a 100644
--- a/packages/area/index.vue
+++ b/packages/area/index.vue
@@ -1,26 +1,21 @@
 <template>
-  <div class="van-area">
-    <picker
-      ref="picker"
-      showToolbar
-      :title="title"
-      valueKey="name"
-      :columns="areaColumns"
-      @change="onChange"
-      @confirm="$emit('confirm', $event)"
-      @cancel="$emit('cancel', $event)"
-    />
-  </div>
+  <picker
+    class="van-area"
+    ref="picker"
+    showToolbar
+    valueKey="name"
+    :title="title"
+    :columns="columns"
+    @change="onChange"
+    @confirm="$emit('confirm', $event)"
+    @cancel="$emit('cancel', $event)"
+  />
 </template>
 
 <script>
 import { create } from '../utils';
 import Picker from '../picker';
 
-const PROVINCE_TYPE = 'provice';
-const CITY_TYPE = 'city';
-const COUNTY_TYPE = 'county';
-
 export default create({
   name: 'van-area',
 
@@ -40,52 +35,33 @@ export default create({
   },
 
   computed: {
-    DEFAULT_PROVINCE() {
-      return {
-        code: '-1',
-        name: this.$t('province')
-      };
-    },
-    DEFAULT_CITY() {
-      return {
-        code: '-1',
-        name: this.$t('city')
-      };
-    },
-    DEFAULT_COUNTY() {
-      return {
-        code: '-1',
-        name: this.$t('district')
-      };
-    },
-    areaColumns() {
-      const areaList = this.areaList;
-
-      if (!areaList || (areaList && typeof areaList.province_list !== 'object')) return [];
-
+    columns() {
       const columns = [];
-      const curValue = this.value || '';
-      const { columnsNum } = this;
+      const { areaList } = this;
+
+      if (!areaList || typeof areaList.province_list !== 'object') {
+        return columns;
+      }
+
+      const code = this.value || '';
+      const columnsNum = +this.columnsNum;
 
       columns.push({
-        values: [this.DEFAULT_PROVINCE].concat(this.computedAreaList(PROVINCE_TYPE)),
-        className: 'van-area__province',
-        defaultIndex: this.getAreaIndex(PROVINCE_TYPE, curValue)
+        values: this.getList('province'),
+        defaultIndex: this.getIndex('province', code)
       });
 
-      if (+columnsNum > 1) {
+      if (columnsNum > 1) {
         columns.push({
-          values: [this.DEFAULT_CITY].concat(this.computedAreaList(CITY_TYPE, curValue.slice(0, 2))),
-          className: 'van-area__city',
-          defaultIndex: this.getAreaIndex(CITY_TYPE, curValue)
+          values: this.getList('city', code.slice(0, 2)),
+          defaultIndex: this.getIndex('city', code)
         });
       }
 
-      if (+columnsNum > 2) {
+      if (columnsNum > 2) {
         columns.push({
-          values: [this.DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, curValue.slice(0, 4))),
-          className: 'van-area__county',
-          defaultIndex: this.getAreaIndex(COUNTY_TYPE, curValue)
+          values: this.getList('county', code.slice(0, 4)),
+          defaultIndex: this.getIndex('county', code)
         });
       }
 
@@ -95,37 +71,40 @@ export default create({
 
   methods: {
     // 根据省市县类型和对应的`code`获取对应列表
-    computedAreaList(type, code) {
-      const result = [];
-      const curAreaList = this.areaList;
-      const areaList = type === PROVINCE_TYPE
-        ? curAreaList.province_list
-        : (type === CITY_TYPE ? curAreaList.city_list : curAreaList.county_list);
+    getList(type, code) {
+      const { areaList } = this;
+      const list =
+        type === 'province'
+          ? areaList.province_list
+          : type === 'city' ? areaList.city_list : areaList.county_list;
 
-      for (const i in areaList) {
-        // 如果为省类型直接插入，因为省那一列是全部显示的
-        // 其他类型需要找到前缀相同的
-        if (type === PROVINCE_TYPE || (code && i.slice(0, code.length) === code)) {
-          result.push({
-            code: i,
-            name: areaList[i]
-          });
-        }
+      let result = Object.keys(list).map(code => ({
+        code,
+        name: list[code]
+      }));
+
+      if (type !== 'province' && code) {
+        result = result.filter(item => item.code.indexOf(code) === 0);
       }
 
+      result.unshift({
+        code: '-1',
+        name: this.$t(type)
+      });
+
       return result;
     },
 
     // 获取对应省市县在列表中的索引
-    getAreaIndex(type, code) {
-      const compareNum = type === PROVINCE_TYPE
-        ? 2
-        : (type === CITY_TYPE ? 4 : 6);
-      const areaList = this.computedAreaList(type, code.slice(0, compareNum - 2));
+    getIndex(type, code) {
+      const compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
+      const areaList = this.getList(type, code.slice(0, compareNum - 2));
 
       for (let i = 0; i < areaList.length; i++) {
-        if (+areaList[i].code.slice(0, compareNum) === +code.slice(0, compareNum)) {
-          return i + 1;
+        if (
+          +areaList[i].code.slice(0, compareNum) === +code.slice(0, compareNum)
+        ) {
+          return i;
         }
       }
 
@@ -136,25 +115,15 @@ export default create({
       const code = values[index].code;
       // 处理省变化
       if (index === 0) {
-        picker.setColumnValues(
-          1,
-          [this.DEFAULT_CITY].concat(this.computedAreaList(CITY_TYPE, code.slice(0, 2)))
-        );
-        picker.setColumnValues(
-          2,
-          [this.DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
-        );
+        picker.setColumnValues(1, this.getList('city', code.slice(0, 2)));
+        picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
       } else if (index === 1) {
-        picker.setColumnValues(
-          2,
-          [this.DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
-        );
+        picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
       }
     },
 
     getValues() {
-      const { picker } = this.$refs;
-      return picker ? picker.getValues() : [];
+      return this.$refs.picker ? this.$refs.picker.getValues() : [];
     }
   }
 });
diff --git a/packages/locale/lang/en-US.js b/packages/locale/lang/en-US.js
index 0c13c9668..1523d74cd 100644
--- a/packages/locale/lang/en-US.js
+++ b/packages/locale/lang/en-US.js
@@ -58,7 +58,7 @@ export default {
   vanArea: {
     province: 'Province',
     city: 'City',
-    district: 'District'
+    county: 'District'
   },
   vanAddressEdit: {
     areaTitle: 'Area',
diff --git a/packages/locale/lang/zh-CN.js b/packages/locale/lang/zh-CN.js
index 6546626c6..ebd5cf04c 100644
--- a/packages/locale/lang/zh-CN.js
+++ b/packages/locale/lang/zh-CN.js
@@ -61,7 +61,7 @@ export default {
   vanArea: {
     province: '选择省份',
     city: '选择城市',
-    district: '选择地区'
+    county: '选择地区'
   },
   vanAddressEdit: {
     areaTitle: '收件地区',
diff --git a/test/unit/selector.js b/test/unit/selector.js
index ea3b633eb..7a7e410a8 100644
--- a/test/unit/selector.js
+++ b/test/unit/selector.js
@@ -13,7 +13,9 @@ inquirer.prompt([{
   name: 'select',
   message: '请选择要运行的测试文件：',
   choices: files
-}], (result) => {
+}]).then(result => {
   const file = result.select.replace('.spec.js', '');
   shell.exec('karma start test/unit/karma.conf.js --color alway --file ' + file);
+}).catch(error => {
+  console.log(error);
 });
diff --git a/test/unit/specs/area.spec.js b/test/unit/specs/area.spec.js
index 16a8fd039..a9d35a958 100644
--- a/test/unit/specs/area.spec.js
+++ b/test/unit/specs/area.spec.js
@@ -64,7 +64,7 @@ describe('Area', () => {
       }
     });
 
-    expect(wrapper.vm.areaColumns.length).to.equal(0);
+    expect(wrapper.vm.columns.length).to.equal(0);
   });
 
   it('create an area with columnsNum equal 2', () => {
@@ -75,7 +75,7 @@ describe('Area', () => {
       }
     });
 
-    expect(wrapper.vm.areaColumns.length).to.equal(2);
+    expect(wrapper.vm.columns.length).to.equal(2);
   });
 
   it('create an area with columnsNum equal 1', () => {
@@ -86,7 +86,7 @@ describe('Area', () => {
       }
     });
 
-    expect(wrapper.vm.areaColumns.length).to.equal(1);
+    expect(wrapper.vm.columns.length).to.equal(1);
   });
 
   it('create an area and click cancel', done => {