微信小程序开发系列-14模块的导入与导出

news2024/11/28 4:40:58

微信小程序开发系列目录

  • 《微信小程序开发系列-01创建一个最小的小程序项目》

  • 《微信小程序开发系列-02注册小程序》

  • 《微信小程序开发系列-03全局配置中的“window”和“tabBar”》

  • 《微信小程序开发系列-04获取用户图像和昵称》

  • 《微信小程序开发系列-05登录小程序》

  • 《微信小程序开发系列-06事件》

  • 《微信小程序开发系列-07组件》

  • 《微信小程序开发系列-08自定义组件模版特性》

  • 《微信小程序开发系列-09自定义组件样式特性》

  • 《微信小程序开发系列-10组件间通信01》

  • 《微信小程序开发系列-11组件间通信02》

  • 《微信小程序开发系列-12 label组件使用理解》

  • 《微信小程序开发系列-13微信小程序框架认知》

文章目录

  • 微信小程序开发系列目录
  • 前言
  • 什么是CommonJS
  • 什么是ES modules
  • ES modules
    • 模块导出
    • 模块导入
      • import statement
      • import()
    • 示例
  • CommonJS
    • 模块导入
    • 模块导出
    • 示例
  • 总结

前言

对于初学者可能对CommonJS和ESmodules两种规范的导入导出的使用有点儿混淆，另外微信小程序官方文档写得只支持Common JS，一来是想理清两种导入导出方式，二来是想实际验证下微信小程序是否两种规范都支持。于是探索的过程便形成了此文。

什么是CommonJS

CommonJS是一种JavaScript语言的模块化规范，主要用于服务端的Node.js环境。每个文件在CommonJS中都被视为一个模块，具有独立的作用域、变量和方法，对其他模块不可见。模块通过module.exports暴露其公共接口，其他文件则通过require()方法来加载这个模块。CommonJS的主要目的是让各种模块能够在各个服务器环境中得到支持，并实现类似于本地文件模块系统一样的功能。CommonJS从原始设计上就是考虑到服务器端JavaScript，不适合客户端(这就是引入ES模块的原因)。

什么是ES modules

ES Modules（ESM）是ECMAScript的官方模块系统，也被称为ECMAScript Modules或简称ES Modules。它是JavaScript中用于模块化开发的新规范，也是ECMAScript 6（ES6）标准的一部分。

ES Modules引入了一种新的、官方的模块系统，以解决以前在JavaScript中模块化开发中存在的一些问题。它允许动态地导入和导出模块，提供了一种官方的模块化解决方案，促进了代码的模块化和复用。

与CommonJS等其他模块系统相比，ES Modules具有一些优势，例如静态导入和导出、静态模块结构、更好的异步支持、更强的类型检查等。主流的浏览器和Node.js环境都已支持ES Modules，开发者可以使用export和import语句来导入和导出模块，并在script标签中设置type="module"来使用模块内容。

ES modules

模块导出

在创建 JavaScript 模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用 import 进行导入时，这些绑定值只能被导入模块所读取，但在 export 导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。

存在两种 exports 导出方式：

  1. 命名导出（每个模块可包含任意数量）
  2. 默认导出（每个模块仅包含一个）
// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名
export const { name1, name2: bar } = o;

// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 导出模块合集
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript® 2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

因此，对于ESModules 模块导出，是通过export语句来进行模块导出。

模块导入

静态 import 语句用于导入由另一个模块导出的绑定。

import statement

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { default as alias } from "module-name";
import { export1, export2 } from "module-name";
import { export1, export2 as alias2, /* … */ } from "module-name";
import { "string name" as alias } from "module-name";
import defaultExport, { export1, /* … */ } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

import()

The import() syntax, commonly called dynamic import, is a function-like expression that allows loading an ECMAScript module asynchronously and dynamically into a potentially non-module environment.

语法：

import(moduleName)

The import() call is a syntax that closely resembles a function call, but import itself is a keyword, not a function. You cannot alias it like const myImport = import, which will throw a SyntaxError.

标准用法的 import 导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。有些场景中，你可能希望根据条件导入模块或者按需导入模块，这时你可以使用动态导入代替静态导入。

下面的是可能会需要动态导入的场景：

  • 当静态导入的模块很明显的降低了代码的加载速度且被使用的可能性很低，或者并不需要马上使用它。
  • 当静态导入的模块很明显的占用了大量系统内存且被使用的可能性很低。
  • 当被导入的模块，在加载时并不存在，需要异步获取。
  • 当导入模块的说明符，需要动态构建。（静态导入只能使用静态说明符）
  • 当被导入的模块有副作用（这里说的副作用，可以理解为模块中会直接运行的代码），这些副作用只有在触发了某些条件才被需要时。（原则上来说，模块不能有副作用，但是很多时候，你无法控制你所依赖的模块的内容）
import("/modules/my-module.js").then((module) => {
  // Do something with the module.
});

学习完了理论，接下来，看看在微信小程序中，基于ESModules，进行导入导出的实验。

示例

本示例实现一个简单的加法运算，加法函数放在common.js中导出，然后在mod.js中导入并使用。

<!--mod/mod.wxml-->
<view class="container">  
  <view>数字1:</view>  
  <input type="number" placeholder="输入数字" bindinput="onInput1" />  
  <view>+</view>  
  <view>数字2:</view>  
  <input type="number" placeholder="输入数字" bindinput="onInput2" />  
  <button bindtap="onTapButton">计算</button>  
  <view>结果: {{result}}</view>  
</view>

/* mod/mod.wxss */
.container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
input {  
  width: 80%;  
  margin-bottom: 10px;  
}  
button {  
  width: 80%;  
}  
view {  
  margin-bottom: 10px;  
}

// common.js
function add(a,b){
  return (a + b);
}
function sub(a,b){
  return (a - b);
}

export {add, sub};

// mod/mod.js
import {add,sub} from './common'
Page({
  data: {
    num1: 0,
    num2: 0,
    result: 0,
  },
  onInput1: function(e) {  
    this.setData({ num1: e.detail.value });  
  },  
  onInput2: function(e) {  
    this.setData({ num2: e.detail.value });  
  },  
  onTapButton: function() {  
    let result = add(Number(this.data.num1), Number(this.data.num2));
    this.setData({ result: result });  
  },  
})

请添加图片描述

从上图的运行结果来看，导入导出是奏效的。接下来，再看看import()导入是否work。

请添加图片描述

Congratulations!动态导入也是奏效的。

CommonJS

CommonJS模块规范是Node.js中用于处理模块的标准。

模块导入

require(id)

  • id :<string> module name or path
  • Returns:<any> exported module content

Used to import modules, JSON, and local files. Modules can be imported from node_modules. Local modules and JSON files can be imported using a relative path (e.g. ./, ./foo, ./bar/baz, ../foo) that will be resolved against the directory named by __dirname (if defined) or the current working directory.

模块导出

Modules.exports 是一个对象 。

The module.exports object is created by the Module system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired export object to module.exports. Assigning the desired object to exports will simply rebind the local exports variable, which is probably not what is desired.

关于exports，它是一个变量，只是为了更简洁地书写而存在。module.exports.f = ...更简洁的书写成exports.f = ...，但是，请注意，与任何变量一样，如果将新值分配给 exports，则它不再绑定到 module.exports。一般不建议用这种。

The exports variable is available within a module’s file-level scope, and is assigned the value of module.exports before the module is evaluated.

下面一段伪代码可以很好地解释不建议使用exports的原因：

function require(/* ... */) {
  const module = { exports: {} }; // default object
  ((module, exports) => {
    // Module code here. In this example, define a function.
    function someFunc() {};
    exports = someFunc;
    // At this point, exports is no longer a shortcut to module.exports, and
    // this module will still export an empty default object.
    module.exports = someFunc;
    // At this point, the module will now export someFunc, instead of the
    // default object.
  })(module, module.exports);
  return module.exports;
}

示例

这是示例的逻辑和上一节相同，只是将导入和导出用法改成了CommonJS的规范。

请添加图片描述

总结

通过本文的学习，掌握了在微信小程序中的模块的导入导出 既可以使用ES modules标准，也可以使用CommonJS标准。我个人更倾向于ES标准，模块的可移植性更好些。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1356943.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CSS学习之路: 基础学习篇

CSS学习之路: 基础学习篇

css基础 一、css3 概述 1.1、什么是css Cascading style sheets 层叠样式表&#xff0c;级联样式表&#xff0c;简称样式表 1.2、css作用 对页面中html元素进行美化 1.3、HTML和css的关系 HTML&#xff1a;负责页面结构的搭建&#xff0c;负责数据的展示CSS&#xff1a;…
阅读更多...
Python+PyCharm的安装配置及教程（实用）

Python+PyCharm的安装配置及教程（实用）

python and PyCharm 安装教程可参考&#xff1a;https://blog.csdn.net/wangyuxiang946/article/details/130634049 Pyhon 下载地址&#xff1a;https://www.python.org/downloads/ PyCharm 下载地址&#xff1a;https://www.jetbrains.com/pycharm/download/?sectionwindo…
阅读更多...
培训机构管理系统软件哪个比较好？提升培训机构运营效率

培训机构管理系统软件哪个比较好？提升培训机构运营效率

在当前教育行业的激烈竞争环境中&#xff0c;培训机构需要不断提升自身管理水平以应对市场挑战。随着科技的发展&#xff0c;越来越多的培训机构开始引入管理系统&#xff0c;以提升运营效率&#xff0c;解决各种痛点问题。那么&#xff0c;培训机构管理系统软件哪个比较好&…
阅读更多...
用开源大语言模型开发的智能对话机器人初版原型验证

用开源大语言模型开发的智能对话机器人初版原型验证

用开源大语言模型开发的智能对话机器人初版原型验证 0. 背景1. 初版检证效果展示2. 验证效果总结 0. 背景 同事要想做一个智能对话机器人&#xff0c;特别的需求有有些几点&#xff0c; 通过预置提示词&#xff08;包括确认事项&#xff09;&#xff0c;让大语言模型用会话式…
阅读更多...
【C++入门】C++内存管理

【C++入门】C++内存管理

目录 前言 C/C内存分布 C内存管理方式 1. new和delete操作内置类型 快速了解与使用 2. new和delete操作自定义类型 3. operator new与operator delete 4. operator new [ ] *5.定位new 6. malloc/free和new/delete的区别 总结 前言 C作为一种面向对象的编程语言&#xff…
阅读更多...
计算机丢失VCRUNTIME140_1.dll怎么办,6个不同方法教你解决问题

计算机丢失VCRUNTIME140_1.dll怎么办,6个不同方法教你解决问题

一、什么是vcruntime140_1.dll&#xff1f; vcruntime140_1.dll是Visual C Redistributable Packages的一部分&#xff0c;它是Microsoft Visual Studio开发环境中使用的运行时库文件。它包含了许多常用的函数和类&#xff0c;为开发者提供了丰富的功能支持。 二、vcruntime1…
阅读更多...
Python 面向对象之封装和装饰器property

Python 面向对象之封装和装饰器property

Python 面向对象之封装和装饰器property 【一】概念 封装是面向对象的三大特征之一封装&#xff1a;将属性和方法打包在一起&#xff0c;并对外部提供接口&#xff0c;控制外部对内部数据的访问和修改封装有助于隐藏对象的内部细节&#xff0c;提供更清晰的结构&#xff0c;提…
阅读更多...
2023年终总结（脚踏实地，仰望星空）

2023年终总结（脚踏实地，仰望星空）

回忆录 2023年&#xff0c;经历非常多的大事情&#xff0c;找工作、实习、研究生毕业、堂哥结婚、大姐买车、申博、读博、参加马拉松&#xff0c;有幸这一年全家人平平安安&#xff0c;在稳步前进。算是折腾的一年&#xff0c;杭州、赣州、武汉、澳门、珠海、遵义来回跑。完成…
阅读更多...
安全狗入选“2023年福建省信息技术应用创新解决方案”名单

安全狗入选“2023年福建省信息技术应用创新解决方案”名单

近日&#xff0c;福建省数字福建建设领导小组办公室公布了2023年福建省信息技术应用创新解决方案入选项目名单。 作为国内云原生安全领导厂商&#xff0c;安全狗凭借综合且具备突出创新水平的方案入选。 据悉&#xff0c;此次方案征集面向全省信创企业和用户单位&#xff0c;…
阅读更多...
【Linux】——基本指令（二）

【Linux】——基本指令（二）

&#x1f497;个人主页&#x1f497; ⭐个人专栏——数据结构学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 目录 导读&#xff1a;1. vim 指令2. head指令3. tail指令4. tree指令5. 输出重定向6. echo指令7. wc指令8. | 字符9. date指令…
阅读更多...
炼石免改造加密亮相2023商密大会，参编密评行业报告发布

炼石免改造加密亮相2023商密大会，参编密评行业报告发布

2023年8月9-11日&#xff0c;2023商用密码大会在河南省郑州国际会展中心圆满召开&#xff0c;是我国商密领域规格最高、规模最大、影响最广的全国性商用密码盛会&#xff0c;也是《密码法》和新修订的《商用密码管理条例》正式实施以来的第一次全国性的盛会。大会以“密码赋能美…
阅读更多...
51、全连接 - 特征的全局融合

51、全连接 - 特征的全局融合

Resnet50 中的核心算法，除了卷积、池化、bn、relu之外，在最后一层还有一个全连接。 下图是 Resnet50 网络结构结尾的部分，最后一层 Gemm(通用矩阵乘法）实现的就是全连接操作。而矩阵乘法我们之前介绍过，传送门在：矩阵乘。 卷积也好，矩阵乘法也好，其目的都是为了完成神…
阅读更多...
Ajax基础入门_Ajax概述，同步与异步，Axios的使用，JSON数据及FastJSON的使用

Ajax基础入门_Ajax概述，同步与异步，Axios的使用，JSON数据及FastJSON的使用

Ajax 文章目录 Ajax1 概述2 作用3 同步和异步3.1 同步3.2 异步 4 代码编写4.1 服务端4.2 客户端 5 Axios5.1 使用5.2 代码5.2.1 前端5.2.2 后端 5.3 请求方法别名 6 JSON6.1 概述6.2 JSON 基础语法6.2.1 定义格式6.2.2 js 对象与JSON的转换 6.3 发送异步请求携带参数6.4 JSON串…
阅读更多...
高分青海中心完成积石山6.2级地震（青海区域）卫星遥感数据与技术支撑工作

高分青海中心完成积石山6.2级地震（青海区域）卫星遥感数据与技术支撑工作

2023年12月18日23时59分&#xff0c;甘肃临夏州积石山县发生6.2级地震&#xff0c;青海省部分地区有明显震感&#xff0c;海东市民和县、化隆县、循化县出现不同程度人员伤亡和房屋受损情况。地震发生后&#xff0c;高分青海中心在国家航天局对地观测与数据中心的大力支持与紧急…
阅读更多...
羊大师讲解，中国羊奶文化的丰富渊源

羊大师讲解，中国羊奶文化的丰富渊源

羊大师讲解&#xff0c;中国羊奶文化的丰富渊源 中国羊奶文化源远流长&#xff0c;几千年来与中华民族的生活息息相关。自古以来&#xff0c;中国人民就以羊为重要的家畜之一&#xff0c;不仅用于养殖和农业生产&#xff0c;更体现了中国人民的饮食文化和生活方式。中国羊奶文…
阅读更多...
2分钟了解什么是socket?

2分钟了解什么是socket?

文章目录 概念比喻类型Socket 与 TCP、UDP的关系 概念 Socket 是提供网络通信功能的编程接口&#xff08;API&#xff09;&#xff0c;提供了网络通信的基本操作&#xff0c;允许程序或进程之间进行数据交换。是传输层协议的具体软件实现&#xff0c;它封装了协议底层的复杂实…
阅读更多...
mysql死锁排查

mysql死锁排查

查看正在进行中的事务 SELECT * FROM information_schema.INNODB_TRX;字段解释trx_id唯一事务id号&#xff0c;只读事务和非锁事务是不会创建id的trx_state事务的执行状态&#xff0c;值一般分为&#xff1a;RUNNING, LOCK WAIT, ROLLING BACK, and COMMITTING.trx_started事务…
阅读更多...
基于Java SSM框架实现中国古诗词学习平台项目【项目源码】

基于Java SSM框架实现中国古诗词学习平台项目【项目源码】

基于java的SSM框架实现中国古诗词学习平台系统演示 JSP技术介绍 JSP技术本身是一种脚本语言&#xff0c;但它的功能是十分强大的&#xff0c;因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时&#xff0c;它可以使显示逻辑和内容分开&#xff0c;这就极大的方便了用…
阅读更多...
LabVIEW开发分布式光纤油气管道泄漏检测及预警系统

LabVIEW开发分布式光纤油气管道泄漏检测及预警系统

LabVIEW开发分布式光纤油气管道泄漏检测及预警系统 随着油气工业的发展&#xff0c;管道泄漏成为一个严峻的安全问题。本文介绍了一种基于LabVIEW的分布式光纤油气管道泄漏检测及预警系统的设计思路和组成结构。系统包括硬件和软件两部分&#xff0c;其中硬件部分详细阐述了分…
阅读更多...
进程的介绍及相关命令

进程的介绍及相关命令

首先&#xff0c;先了解一下计算机五大性能的命令 cpu top w 内存 top free 硬盘剩余 df 硬盘读写性能 iostat 网络带宽 iftop 一&#xff0c;进程与程序 1&#xff0c;什么是程序 &#xff1a; 硬盘上躺着&#xff0c;执行特点任务的一串代码 2&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023