模块
模块:模块是一个应用里面对局部通用业务的划分,只跟部分业务关联抽离出来的方法。模块只有 .js 文件
特点
特点 | BUI 模块 | ES6 模块 |
---|---|---|
一次性加载 | 支持 | 支持 |
按需加载 | 支持 | 不支持 |
模块定义
pages/main/cart.js
loader.define(function (requires, exports, module, global) {
// 只定义返回方法,不在模块中执行
// 缓存购物车数据
let data = [];
return {
data: data,
add(opt) {
// 添加购物车方法
data.push(opt);
},
remove(id) {
// 删除购物车的某个数据
bui.array.delete(data, id, "id");
},
};
});
模块使用
pages/main/main.js
方法 1: 使用依赖前置的方式,模块中都可以调用
loader.define(
["pages/main/cart"],
function (cart, requires, exports, module, global) {
// 业务组件中调用对应的方法
cart.add({
id: "cart1",
name: "",
type: "",
});
}
);
方法 2: 局部使用
loader.define(function (requires, exports, module, global) {
// 异步局部使用
loader.require("pages/main/cart", function (cart) {
// 业务组件中调用对应的方法
cart.add({
id: "cart1",
name: "",
type: "",
});
});
});
方法 3: 同步使用
loader.define(async function (requires, exports, module, global) {
// 同步:
const cart = await loader.require("pages/main/cart");
// 业务组件中调用对应的方法
cart.add({
id: "cart1",
name: "",
type: "",
});
console.log(cart.data);
});