微信小程序----模块儿化

小程序开发中的模块儿化

在我们做开发的过程中，会有一些公共方法、工具函数是在多个地方都会使用到的。那么每次写会很麻烦，而且不利于后面的维护。
因此就需要抽取出来作为一个单独的模块（可以简单的理解为作为一个单独的js文件）。
模块儿化开发涉及两个部分，一个是页面，一个是方法。

页面

页面就是一些公用的部分，或者非常相似的部分也可以抽离出来。比如产品的列表页，可能在不同的地方会用到。WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用 name 属性，作为模板的名字。然后在 template 内定义代码片段。

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板。
模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 wxs 模块。

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

方法函数

这部分一般称为模块儿化管理。模块儿化管理的好处是：维护方便、大大减少代码量，而且工具函数、功能函数写一起便于后来者查看，从而避免了多写重复代码。

模块儿

小程序模块儿只有通过 exports 或者 module.exports 向外暴露接口才能使用。如下模块儿：

function sayHi() {
  console.log('hello guys')
}

function sayGoodbye() {
  console.log('bye bye beautiful');  
}

// 第一种暴露方法
// exports.sayHi = sayHi;
// exports.sayGoodbye = sayGoodbye;

// 第二种暴露方法
module.exports = {
  sayHi: sayHi,
  sayGoodbye: sayGoodbye
}

使用模块儿

// 首先引入
// 第一种引入方法
// const common = require("../../utils/common.js")
// import common from '../../utils/common.js'
// 第二种引入方法
import {sayHi, sayGoodbye} from '../../utils/common.js'

// 使用
// 第一种
// 第一种
// common.sayHi();
// common.sayGoodbye();
// 第二种
sayGoodbye();
sayHi()

两种方法各有优劣：
第一种方法，写法复杂一下，但是能够一眼看到所在文件位置，修改和检查的时候方便。
第二种方法，写法简单，无法一眼看到源文件。
现在的编辑器一般都有跳转到引用的源文件的位置的功能。所以两种写法，按自己习惯来吧。