微信小程序模块化开发需要了解什么？
现在开发小程序已经成为一种趋势，越来越多的人开始专研这项技能，但小程序在开发时都是需要模块来进行小程序的运行和构建的。并且小程序模块化开发已经逐渐的形成了新的开发模式。下面小编就整理了一些微信小程序模块化开发的相关内容。
一、小程序JavaScript模块规范
在任何一个大型应用中模块化是很常见的，与一些更传统的编程语言不同的是，JavaScript (ECMA-262版本)还不支持原生的模块化。
Javascript社区做了很多努力，在现有的运行环境中，实现"模块"的效果。通行的JavaScript模块规范主要有四种：CommonJS、AMD、UMD、CMD等
(1)CommonJs
CommonJs主要用于服务器端的一些简单的模块引用，如nodejs：
[javascript] view plain copyfs=require('fs');
对它来说，一个单独的文件就是一个模块，一个文件定义一个作用域，变量在文件内部都是私有的。
CommonJs采用了同步加载的方式，把文件加载下来才会执行后面的代码，由于在服务端，文件一般在某个目录下，加载不需要网络，所以这种方式不用考虑网络的成本。
下面讲到的AMD和CMD，主要用在浏览器端。
(2)AMD
AMD
AMD是"Asynchronous Module Definition"的缩写，意思是"异步模块定义"，是前端模块规范。
RequireJS就是实现了AMD规范的呢。
AMD规范定义了一个自由变量或者说是全局变量 define 的函数。
requireJs是最典型的例子。这也是国外目前比较流行的模块化标准。
AMD把一个文件(模块)里需要用到的其它模块，定义在头部刚开始的地方，以告诉浏览器，加载这个模块所需要的其它的依赖，这就把依赖前置并执行。
(3)CMD
CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解 决的问题和requireJS一样，只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同。
Sea.js 推崇一个模块一个文件，遵循统一的写法
define(id?, deps?, factory)
因为CMD推崇一个文件一个模块，所以经常就用文件名作为模块id,CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中写。
factory是一个函数，有三个参数，function(require, exports, module)
require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口
exports 是一个对象，用来向外提供模块接口
module 是一个对象，上面存储了与当前模块相关联的一些属*和方法
define( "pages/module/mathCMD.js", function( require, exports, module ) {
function MathClass() {
}
MathClass.PI = 3.14;
MathClass.E = 2.72;
MathClass.prototype.add = function( a, b ) {
return a + b;
};
module.exports = MathClass;
})
define( "pages/module/mathCMD.js", function( require, exports, module ) {
function MathClass() {
}
MathClass.PI = 3.14;
MathClass.E = 2.72;
MathClass.prototype.add = function( a, b ) {
return a + b;
};
module.exports = MathClass;
})
CommonJS module以服务器端为第一的原则发展，选择同步加载模块。它的模块是无需包装的,但它仅支持对象类型(objects)模块。AMD以浏览器为第一(browser-first)的原则发展，选择异步加载模块。它的模块支持对象、函数、构造器、字符串、JSON等各种类型的模块,因此在浏览器中它非常灵活。这迫使人们想出另一种更通用格式 UMD(Universal Module Definition)，希望提供一个前后端跨平台的解决方案。
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('jquery'));
} else {
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
function myFunc(){};
return myFunc;
}));
(4)UMD
UMD的实现很简单，先判断是否支持AMD(define是否存在)，存在则使用AMD方式加载模块。再判断是否支持Node.js模块格式(exports是否存在)，存在则使用Node.js模块格式。前两个都不存在，则将模块公开到全局(window或global)。
( function( global, factory ) {
if( typeof define === 'function' && define.amd ) {
define( factory );
} else if( typeof exports === 'object' ) {
module.exports = factory();
} else {
root.returnExports = factory();
}
} ( this, function() {
function MathClass() {
}
MathClass.PI = 3.14;
MathClass.E = 2.72;
MathClass.prototype.add = function( a, b ) {
return a + b;
};
return MathClass;
}) );
var MathClass = require( './mathUMD.js' );
Page( {
onLoad: function() {
console.log( "PI: " + MathClass.PI );
var mathClass = new MathClass();
console.log( "3 + 4: " + mathClass.add( 3, 4 ) );
}
});
2、微信小程序的模块化
wxml、wxss、js，这三类都可以做模块化。
(1)小程序js的模块化
首先先要了解一点，每个js里定义的变量、函数，只在当前的文件里有效，也就是说每个js文件的作用域只在文件内部。
MINA框架其实也做了挺多模块化的封装和合并等工作，开发的时候，我们可以不用在意自己在用的是什么样的标准，最后怎么被合并，也不用去考虑网络问题，因为MINA也帮我们打好包了，按照微信小程序官方文档给出的例子来使用就行，其它的工作它都帮我们做好了。
js的模块引用语法如下：
[javascript] view plain copy// a.js
var xxx = require('xxx.js')
其中，.js的后缀可以省略。导出的语法，在每个文件里定义
[javascript] view plain copy// b.js
function yyy() {
// ...
}
module.exports = {
yyy: yyy
}
这样，在a.js文件里，就可以用xxx.yyy来调用到b.js里定义的方法。这个看起来很简单，不过我们要关注的是怎么去做模块化，而不是这个语法本身。
(2)小程序wxml的模块化
wxml代码里也可以根据界面上不同的部分去分块。从主wxml文件里分出来的文件，可以写成一个模板template。
如何定义一个模板?语法很简单
[html] view plain copy
...
使用：
[html] view plain copy
讲到模块化，这里我们就需要把template的定义分开，放到另外的wxml文件里，作为另一个wxml文件。在使用的时候，用import来引入。
假设我们的模板写在一个单独的文件item.wxml里，要在主页面中引入：
[html] view plain copy
这样就可以把独立的UI模块给拆分出来。上面传入data的时候，注意要用…三个点把data这个object平铺开，官方文档时规定这里传入的数据必须是
[javascript] view plain copy{{a: xxx, b: xxx}}
这样的格式，跟wx:for还是有差别的，读者可以测试下，后面在使用的时候多注意。
另外，微信还提供了一个include操作。跟import的区别是，import是把相应的一个文件里定义的模板引入进来，让主wxml文件可以用这个模板。而include是直接把相关文件的源码、内容，原封不动的导入进来。
微信的官方说明在这里。
使用上，读者可以这样简单地来区分：
用模板时，用import引入模板的定义;
不用模板时，用include直接把文件内容导入进来。
前者(import)可以理解为c语法里的引入头文件;后者可以理解为nginx里的ssi，帮你把一个大文件切分成多个内容块，放到几个小文件里。
给了一个非常简单的import和include的演示代码在这里。
(3)小程序wxss的模块化
wxss也支持模块化，用@import来导入其它wxss文件到主wxss文件中。这个用法跟sass或less一样，后面记得加分号：
[javascript] view plain copy@import "base.wxss";
另外，这个@import语句要放在wxss文件的最上面，测试过放中间和底部都没用。官方文档中没有说明，不知道是工具的bug还是框架本身是这么设计的，总之开发者在使用的时候，注意下。还有一点提下，.wxss的后缀不能省略，之前的版本可以，v0.10.102800版本测试了省略会使整个wxss没法解析
3、微信小程序模块化的几个小建议
对于微信小程序的开发，如果项目大了，代码自然就多，分的文件可能也会比较多，这里提几点建议。
[1].js共用的模块抽出来，放到一个文件夹里，取名如common，里面可以再按功能去分更细的模块，如网络请求模块common/net.js，工具方法集common/util.js，websocket相关模块，等等。
[2].把共用的页面头部、底部，放到page/common/ 里面，记得把js和wxml也放在一起。
[3].引用外部的库的话，把它们的文件统一放到 lib/ 目录里。
[4].之前文章提到的页面和文件的目录划分，也不用去改。如page/ 目录专门存放页面，一对名字(xxx.wxml和xxx.js)就对应一个页面，如果只是页面的一部分，可以放到page/[page_name]/ 目录里，表示这个页面专门用的模块，但如果是几个页面共享的，可以放在上面第2点提到的page/common/ 里
[5].模板放tpl/ 目录里，并按页面来分文件夹放。
[6].相关的event handler如果逻辑比较多，可以单独抽出来放到一个文件里。
4、微信小程序组件
MINA框架给我们提供了很多小组件，它们是视图层的基本组成单元，功能相对比较独立，而且组件风格跟微信保持得比较一致，各自有各自的特有的属*，当然也可以自定义属*(如data-xxx)。
以上就是微信小程序模块化开发的全部内容啦，感兴趣的小伙伴们赶紧尝试起来吧，希望对大家学习小程序模块化开发有所帮助。想了解更多微信小程序的话就请关注微小乔。
相关推荐：
小程序语音识别接口开发和使用介绍
小程序的后端开发资料详解
小程序语音对话开发实例