智能小程序框架——模块化语法参考(ESModule 语法、CommonJS 语法)

小程序的逻辑代码使用 JavaScript 语法进行编写。可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块,以实现逻辑共享复用。主要有 ESModule 和 CommonJS 两种形式。一个项目内应保持使用一种语法形式,否则可能出现导入异常的情况。

ESModule 语法 (推荐)

ESModule 模块功能主要由两个命令构成:export 和 importexport命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能。

export 命令

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用 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 介绍,请参考 此处。

import 命令

使用 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 语法

CommonJS 模块通过 module.exports 导出接口,require 命令导入。

exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.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;}
}

require 命令

使用 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

注意

  1. 模块引用的应保持大小写敏感,否则可能出现异常的情况。
  2. 模块应避免循环引用如: a.js -> b.js -> c.js -> a.js。否则可能出现异常的情况。

NPM 支持

智能小程序默认支持 NPM 生态。在根目录下创建 package.json 并通过 npm yarn 等包管理工具安装后的模块,即可在项目逻辑代码中引用。

高级进阶

TypeScript 语法支持

JavaScript 是弱类型语言,为保障项目的质量,智能小程序默认支持使用 TypeScript 进行逻辑编写。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot中使用Spring自带线程池ThreadPoolTaskExecutor与Java8CompletableFuture实现异步任务示例

场景 关于线程池的使用: Java中ExecutorService线程池的使用(Runnable和Callable多线程实现): Java中ExecutorService线程池的使用(Runnable和Callable多线程实现)_executorservice executorservice executors.newfix-CSDN博客 Java中创建线程的方式…

springboot(ssm考试信息报名系统 在线考试报名系统Java系统

springboot(ssm考试信息报名系统 在线考试报名系统Java系统 开发语言:Java 框架:springboot(可改ssm) vue JDK版本:JDK1.8(或11) 服务器:tomcat 数据库:mysql 5.7&a…

React+echarts实现排名+自动滚动+X轴自定义titleTop

1、效果 2、环境准备 1、react18 2、antd 4 3、代码实现 原理:自动滚动通过创建定时器动态更新echar的dataZoom属性startValue、endValue,自定义tooltip通过监听echar的鼠标移入移出事件,判断tooltTip元素的显隐以及位置。 /*** 收集完成…

【Java EE】----Spring框架创建和使用

1.Spring框架创建 创建一个maven项目 添加Spring框架支持 <dependencies> 上下文<dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.3.RELEASE</version></depende…

【网站项目】038汽车养护管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

java -jar启动SpringBoot项目时配置文件加载位置与优先级

服务部署启动时,我们经常需要指定配置文件启动. 一般有四种,优先级如下 spring.config.location > spring.profiles.active > spring.config.additional-location > 默认的 application.yml 1.spring.config.location 外部配置文件优先级最高 一般配置文件在服务…

PS之外的平面设计利器:7款高效软件帮你轻松搞定

平面图设计的痕迹体现在日常生活的方方面面&#xff0c;如路边传单、杂志、产品包装袋或手机开屏海报等&#xff0c;平面设计软件层出不穷。Photoshop是大多数平面图设计初学者的入门软件&#xff0c;但随着设计师需求的不断提高&#xff0c;平面图设计软件Photoshop逐渐显示出…

SpringBoot:自动配置报告

自动配置报告demo&#xff1a;点击查看 LearnSpringBoot03AutoConfig 点击查看更多的SpringBoot教程 一、application.properties代码 #开启springboot debug模式 #自动配置报告 #Positive matches: 自动配置类启用了&#xff08;自动配置类匹配上了&#xff09;&#xff0c…

【动态规划】【图论】【C++算法】1928规定时间内到达终点的最小花费

作者推荐 【动态规划】【状态压缩】【2次选择】【广度搜索】1494. 并行课程 II 本文涉及知识点 动态规划汇总 LeetCode1928. 规定时间内到达终点的最小花费 一个国家有 n 个城市&#xff0c;城市编号为 0 到 n - 1 &#xff0c;题目保证 所有城市 都由双向道路 连接在一起…

【python】绘制春节烟花

一、Pygame库春节烟花示例 下面是一个使用Pygame实现的简单春节烟花效果的示例代码。请注意&#xff0c;运行下面的代码之前&#xff0c;请确保计算机上已经安装了Pygame库。 import pygame import random import math from pygame.locals import *# 初始化pygame pygame.ini…

Spring Boot配置文件优先级

1、bat文件启动java程序 java -Dmmmqqq -Dfile.encodingUTF-8 -jar ruoyi-admin.jar --mmmiii --llllll 2、配置类型 程序参数Program arguments : --mmmiii 单个属性值&#xff0c;可以从String[] args读取到&#xff0c;放在jar包命令后面 VM参数VM options :一般以-D …

如何让 Pages 文字分为两栏或更多栏?

通常一份文件都是由上往下仅有「一栏」而已&#xff0c;但在某些情况的排版&#xff0c;我们需要两栏甚至三栏的设计&#xff0c;在Pages 要如何做到呢&#xff1f;来看看吧。 将 Pages 文件改为双栏式设计 点一下「格式」>「布局」&#xff0c;就可以看到预设的「直栏」数…

C++:哈希表的哈希桶(模拟实现)

在这里不赘述哈希表的相关性质有兴趣的参考线性探测&#xff0c;这里直接贴代码 template<class T>struct HashNode{T _data;HashNode<T>* _next;HashNode(const T& data):_data(data), _next(nullptr){}};template<class K, class T, class KOFV>class …

SpringMVC-请求

一、引子 我们在上一篇SpringMVC-响应中提到了如何给客户端返回响应&#xff0c;那么本节来介绍一下如何承接客户端的响应。 二、接收参数 &#xff08;1&#xff09;使用RequestParam注解&#xff1a; RequestMapping(value "/example", method RequestMethod…

LeetCode-第2469题=温度转换

1.题目描述 给你一个四舍五入到两位小数的非负浮点数 celsius 来表示温度&#xff0c;以 摄氏度&#xff08;Celsius&#xff09;为单位。 你需要将摄氏度转换为 开氏度&#xff08;Kelvin&#xff09;和 华氏度&#xff08;Fahrenheit&#xff09;&#xff0c;并以数组 ans …

【AI数字人-论文】GeneFace++

文章目录 前言pipelinePitch-Aware Audio-to-MotionLandmark LLELLELandmark LLE Instant motion-to-video rendering结果对比 前言 为了提高预测的面部关键点序列的长期时间一致性和自然度&#xff0c;我们提出了一个Pitch-Aware Audio-to-Motion音高感知的音频到动作模块。具…

Spring是怎么解决循环依赖的

首先先解释一下什么叫循环依赖 循环依赖:循环依赖其实就是循环引用,也就是两个或两个以上的bean互相持有对方,最终形成闭环.比如A依赖于B,B依赖于A 循环依赖在spring中是允许存在的,spring框架依据三级缓存已经解决了大部分的循环依赖 一级缓存:单例池,缓存已经经历了完整的…

Java字符串(包含字母和数字)通用排序

说明&#xff1a;本文章是之前查到的一篇安卓版的&#xff0c;具体原文路径忘记了。稍微改了一点&#xff0c;挺符合业务使用的&#xff01; 一、看代码 /*** 包含数字的字符串进行比较&#xff08;按照从小到大排序&#xff09;*/private static Integer compareString(Stri…

Character包装类常用方法(Java)

Character包装类常用方法 Character 类是 char 基本数据类型的包装类&#xff0c;用于提供对字符数据的操作和封装。 1. isDigit(char ch) 方法示例&#xff1a; 判断指定字符是否是一个数字&#xff08;0-9&#xff09;。返回值为 boolean 类型。 char ch1 5; char ch2 …

时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于CNN-LST…