使用類實(shí)現(xiàn)小程序組件

一些小程序組件通常會(huì)被設(shè)計(jì)成一個(gè)類。用代碼表示，大概是下面的樣子：

1. //componentXX.js
2.  
3. class ComponentXX() {
4.  
5. constructor(opts) {
6. this.$scope = opts.$scope;
7. },
8.  
9. methodA() {
10. // 使用this.$scope.setData()達(dá)到修改ViewModel的能力
11. }
12. }
13.  
14. export default ComponentXX;

使用時(shí)，先引用定義，然后在onLoad時(shí)new一個(gè)實(shí)例，再調(diào)用實(shí)例相應(yīng)的方法，如：

1. import ComponentXX from 'path/to/conpoentxx/conpoentxx';
2.  
3. Page({
4. data: {
5.  
6. },
7.  
8. onLoad(opts) {
9. this.componentXX = new ComponentXX({
10. $scope: this,
11. opts: {}
12. });
13. },
14.  
15. bindTap() {
16. this.componentXX.doSomething();
17. }
18. });

項(xiàng)目里有幾個(gè)組件，也的確是這樣實(shí)現(xiàn)的。但這里有幾個(gè)問題：  1. 使用麻煩。除new之外，每次還得增加一些不必要的方法去調(diào)用組件實(shí)例相應(yīng)的方法，比如上面的bindTap方法  2. 因?yàn)閱栴}1，所以組件的封裝性很差  3. 同頁面多組件共存問題，是new多個(gè)組件嗎？

那么，還有沒有更簡(jiǎn)單，更好的組件封裝方式呢？

1. page({
2. onLoad(opts) {},
3. method() {}
4. });

其實(shí)我們觀察小程序頁面啟動(dòng)方法會(huì)發(fā)現(xiàn)：  1. page函數(shù)需要傳入一個(gè)對(duì)象參數(shù)，這里參數(shù)里面的特定函數(shù)onXXX(onLoad,onShow)會(huì)在頁面的特定生命同期被調(diào)用  2. 其它掛在對(duì)象參數(shù)上的方法或?qū)傩裕梢酝ㄟ^this訪問到。在wxml模板中，也可以直接調(diào)用  也就是說，我們擴(kuò)展對(duì)象參數(shù)，就可以擴(kuò)展方法在.wxml模板中調(diào)用。基于此，有下面的組件封裝方式：

1. import ComponentXX from 'path/to/conpoentxx/conpoentxx';
2.  
3. Page(extend({
4. data: {
5.  
6. },
7.  
8. onLoad(opts) {
9. this.initComponentXXX(opts);
10. },
11. }, ComponentXX));

這種組件封裝方式，頁面注冊(cè)參數(shù)不需要多寫額外的方法?？雌饋砀?jiǎn)潔，封裝性也更好。

實(shí)戰(zhàn)：使用extend方式實(shí)現(xiàn)AddressPicker組件

1. import location from 'location.js'; // 數(shù)據(jù)文件。如果覺得數(shù)據(jù)文件太大，受小程序1M限制，可以通過cgi返回，然后存于緩存
2.  
3. const AddressPicker = {
4. /**
5. * 省市縣聯(lián)動(dòng)初始化個(gè)數(shù)。注意索引從0開始，例如apNumber = 2,則會(huì)有3個(gè)聯(lián)動(dòng)選擇控件
6. * @param apNumber
7. */
8. initAddressPicker(apNumber = 0) {
9.  
10. // this 即頁面VM，可直接使用this.setData()方法
11.  
12. this.curApIndex = 0;
13. this.conf = [];
14. this.$address = location;
15. this.inited = false;
16.  
17. // TODO 因?yàn)椴荒芸刂剖》轁L動(dòng)到某個(gè)點(diǎn)，所以不能在初始化時(shí)指定某個(gè)省市縣
18. this.$provinceList = this.getProvinceList();
19.  
20. while (apNumber-- >= 0) {
21. this.conf.push({
22. index: 0,
23. show: false,
24. prePid: 0,
25. pid: 0,
26. cid: 0,
27. tid: 0,
28. provinceList: this.$provinceList,
29. cityList: this.$address[0].children,
30. townyList: this.$address[0].children[0].children
31. });
32. }
33.  
34. // init ap VM
35. this.setData({
36. __ap: this.conf
37. });
38.  
39. setTimeout(() => {
40. this.inited = true;
41. }, 200);
42. },
43.  
44. getProvinceList() {
45. return this.$address.map(item => {
46. return {
47. label: item.label,
48. value: item.value
49. };
50. });
51. },
52.  
53. getCityList() {
54. try {