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

ES6模块化-每日一小记

admin10个月前 (11-14)JavaScript428

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 的深色和浅色模式

没有最新的文章了...

相关文章

zblog纯净主题文字标签云、文字标签云上下滚动动画

zblog纯净主题文字标签云、文字标签云上下滚动动画

如图所示原生javascript 文字标签云仿快播文字标签云上下滚动出现<style> #divTags dd { &nbs...

JavaScript实现网页中繁体简体切换,纯Es5写的高兼容性

JavaScript实现网页中繁体简体切换,纯Es5写的高兼容性

HTML代码<span onclick="zh_tran('t');">繁体中文</span&g...

Bilibili头部景深对焦效果

Bilibili头部景深对焦效果

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

javascript 滚动插入元素动画特效

javascript 滚动插入元素动画特效

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

响应式人物介绍列表ui切换特效

响应式人物介绍列表ui切换特效

一款js css3制作响应式的人物介绍图文列表,带左右按钮控制列表滑动切换效果。可用于企业团队人物介绍ui布局。下载链接: https://pan.baidu....

js轮播图滑块过渡特效

js轮播图滑块过渡特效

js flipping插件制作简洁时尚的带缩略图的大图轮播幻灯片展示,点击左右箭头按钮,标题,缩略图,大图滑动切换效果。下载链接: https://pan.ba...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。
X 要酷!乐于助人,网络是一个神奇的地方,玩得愉快,击掌