当前位置:首页 > 技术博客 > JavaScript > ES6模块化-每日一小记

ES6模块化-每日一小记

3年前 (2022-11-14)JavaScript726

ES6模块化

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

//module/index.js

const name = 'liuzhixi.cn ';

const age = 18;

const color = 'red ';

const sayName = function() {

    console.log(fristName);

}

export {name,age,color,sayName}

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块

//main.js

import {name,age,color,sayName,fn} from './modules/index.js';

ES6 的模块化主要包含如下 3 种用法:


① 默认导出与默认导入


导出的语法: export default(只允许使用唯一的一次) 默认导出的成员


导入的语法: import 接收名称(只要是合法的成员名称即可) from '模块标识符'(路径)


② 按需导出与按需导入


导出的语法: export 按需导出的成员(导入的成员名称必须和导出的名称保持一致)


导入的语法: import { s1 } from '模块标识符'(可以使用 as 关键字进行重命名)


③ 直接导入并执行模块中的代码


如果只想单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员,可以直接导入并执行模块代码 

版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/276.html

标签: JavaScript
返回列表

上一篇:Javascript 的深色和浅色模式

没有最新的文章了...

相关文章

动态加载 js 文件

动态加载 js 文件

1.直接document.writedocument.write("<script src='test.js'>...

JavaScript 中定义数组和操作数组

JavaScript 中定义数组和操作数组

一.认识数组数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),...

禁止F12控制台调试JavaScript

禁止F12控制台调试JavaScript

(function (a) {     return (function (a...

【硬核原创】网站标题根据用户变化而变化

【硬核原创】网站标题根据用户变化而变化

最近有朋友问我 www.timicm.com 这个网站的标题效果什么实现的,本着无私奉献的精神和你们分享一下title是不断变化的,怎么变化呢?当你访...

Bilibili头部景深对焦效果

Bilibili头部景深对焦效果

交互式鼠标悬停头图景深对焦效果<head>       <meta n...

javascript 滚动插入元素动画特效

javascript 滚动插入元素动画特效

监听窗体滚动条,新的元素会以 左移、右移、淡出、淡入 等各种方式插入到文档流中<head>     <...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。