小程序的逻辑代码使用 JavaScript 语法进行编写。可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块,以实现逻辑共享复用。主要有 ESModule 和 CommonJS 两种形式。一个项目内应保持使用一种语法形式,否则可能出现导入异常的情况。
ESModule 模块功能主要由两个命令构成:export
和 import
。export
命令用于规定模块的对外接口,import
命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用 export
关键字输出该变量。下面是一个 JS 文件,里面使用 export
命令输出变量。
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
上面代码是 profile.js 文件,保存了用户信息。ES6 将其视为一个模块,里面用 export
命令对外部输出了三个变量。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };
上面代码在 export
命令后面,使用大括号指定所要输出的一组变量。它与前一种写法(直接放置在 var
语句前)是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量
export
命令除了输出变量,还可以输出函数或类(class)。
export function multiply(x, y) {
return x \* y;
};
上面代码对外输出一个函数 multiply。
更多详细 export
介绍,请参考 此处。
使用 export
命令定义了模块的对外接口以后,其他 JS 文件就可以通过 import
命令加载这个模块。
// main.js
import { firstName, lastName, year } from './profile';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
上面代码的 import
命令,用于加载 profile.js 文件,并从中输入变量。import
命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。
更多详细 import
介绍,请参考 此处。
CommonJS 模块通过 module.exports
导出接口,require
命令导入。
exports
是 module.exports
的一个引用,因此在模块里边随意更改 exports
的指向会造成未知的错误。所以更推荐开发者采用 module.exports
来暴露模块接口,除非你已经清晰知道这两者的关系。
模块只能通过 module.exports
或 exports
对外暴露接口。
module.exports = {
firstName: 'Michael',
lastName: 'Jackson',
year: '1958',
};
上面代码是 profile.js 文件使用 CommonJS 的写法。对外部输出了三个变量。
同样还可以输出函数或类(class)。
module.exports = {
multiply: function (x, y) {
return x \* y;
}
}
使用 module.exports
命令定义了模块的对外接口以后,其他 JS 文件就可以通过 import
命令加载这个模块。
// main.js
const profile = require('./profile');
const { firstName, lastName, year } = profile;
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
上面代码的 require
命令,用于加载 profile.js 文件,并定义为 profile 变量。该变量等于 module.exports
的对象。
注意 不要在一个文件内出现不同的模块语法,应保持文件内只有一种语法,否则程序可能无法正常运行。
在 JS 模块文件中声明的变量和函数只在该模块内有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。
模块的应用支持绝对路径、相对路径、NPM 三方包。
import a from '/absolute';
import b from './relative';
import pkg from 'lodash';
模块的引用应避免出现文件名与文件夹名重名的情况,除非你了解其中的差异。因此建议在使用绝对路径、相对路径时写全文件名路径。
├── foo
│ └──index.js
├── foo.js
import foo from '/foo/'; // 引入 foo/index.js
import foo from '/foo/index'; // 引入 foo/index.js
import foo from '/foo'; // 引入 foo.js
注意
智能小程序默认支持 NPM 生态。在根目录下创建 package.json
并通过 npm yarn 等包管理工具安装后的模块,即可在项目逻辑代码中引用。
JavaScript 是弱类型语言,为保障项目的质量,智能小程序默认支持使用 TypeScript 进行逻辑编写。