十年专注于品牌网站建设 十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

南昌微信开发实战——模块化

百恒 2017-03-24 169

JavaScript模块规范

在任何一个大型应用中模块化是很常见的,与一些更传统的编程语言不同的是,JavaScript (ECMA-262版本)还不支持原生的模块化。

Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果。通行的JavaScript模块规范主要有两种:CommonJS、AMD、UMD、CMD等。

CommonJS

CommonJS规范是服务器端Javascript模块规范。

Node.js的模块系统,就是参照CommonJS规范实现的。NPM也遵循了commonJS定义的包规范,从而形成了一套完整的生态系统。

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}。require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。

exports对象

module对象

AMD

AMD是"Asynchronous Module Definition"的缩写,意思是"异步模块定义",是前端模块规范。

RequireJS就是实现了AMD规范的呢。

AMD规范定义了一个自由变量或者说是全局变量 define 的函数。

define( id?, dependencies?, factory );

id 为字符串类型,表示了模块标识,为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在,那么模块标识必须为顶层的或者一个绝对的标识。

dependencies ,是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。

factory,是一个需要进行实例化的函数或者一个对象。

define

UMD

CommonJS module以服务器端为第一的原则发展,选择同步加载模块。它的模块是无需包装的,但它仅支持对象类型(objects)模块。AMD以浏览器为第一(browser-first)的原则发展,选择异步加载模块。它的模块支持对象、函数、构造器、字符串、JSON等各种类型的模块,因此在浏览器中它非常灵活。这迫使人们想出另一种更通用格式 UMD(Universal Module Definition),希望提供一个前后端跨平台的解决方案。

UMD

UMD的实现很简单,先判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。再判断是否支持Node.js模块格式(exports是否存在),存在则使用Node.js模块格式。前两个都不存在,则将模块公开到全局(window或global)。

define是否存在

exports是否存在

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 是一个对象,上面存储了与当前模块相关联的一些属性和方法

CMD

微信小程序模块化机制

微信小程序秉承了JavaScript模块化的机制,通过module.exports暴露对象,通过require来获取对象。

模块开发

以微信小程序QuickStart为例,微信小程序模块采用CommonJS规范

utils/util.js

utils

util.js

模块运行

微信小程序还是要以前端程序方式在微信浏览器中运行,由于CommonJS规范是服务器端模块规范,微信小程序运行时会自动转换为前端模块规范。

以微信小程序QuickStart调试时代码为例

utils/util.js

utils

util.js

微信小程序运行的代码与CMD模块规范基本符合。

使用第三方模块

微信小程序运行环境exports、module没有定义,无法通过require导入模块,需要对第三方模块强制导出后才能正常导入。

微信小程序使用Immutable.js https://segmentfault.com/a/11...

微信小程序使用Underscore.js https://segmentfault.com/a/11...

ECMAScript 6模块系统

ECMAScript 6,模块被作为重要组成部分加入其中。

ES6的模块提供了2个新的语法,分别是export和import。

export模块导出

export模块导出

import模块导入

import模块导入

微信小程序还没实现ECMAScript 6。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。文章出自:南昌微信开发公司-百恒网络。

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×