>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 16290 个阅读者 刷新本主题
 * 贴子主题:  JavaScript ES2015模块化操作 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2024-04-28 05:48:12     消息  查看  搜索  好友  邮件  复制  引用

你可以创建 JavaScript 模块,在模块里你可以导出需要导出的东西,然后在其它的地方,你可以导入模块提供的东西。

创建模块

创建一个模块,可以放在一个单独的 js 文件里,比如 talk.js:

let greeting = 'hello'
export { greeting }

现在,talk.js 就是一个模块,导出模块里的东西使用的是 export ,这里我们导出来变量 greeting 。

使用模块

使用模块就是导入模块提供的东西,创建一个 js 文件,名字是 index.js,在这个文件里:

import { greeting } from './talk'
console.log(greeting)

执行上面的代码,会在控制台上输出 “hello”,这个值是在 talk 模块里导出的 greeting 表示的东西。在 index.js 里,我们用 import 导入了 talk 模块里导出的 greeting 。

在模块里导出多个东西

这样编辑一下 talk.js:

let greeting = 'hello'
let goodbye = 'see ya ~'
export { greeting, goodbye }

现在这个模块里导
出了两样东西,greeting 与 goodbye 。

导入模块里的多个东西

再这样编辑一下 index.js:

import { greeting, goodbye } from './talk'
console.log(greeting, goodbye) // hello see ya ~

在 index.js 里,导入了来自 talk 模块的 greeting 与 goodbye。

模块里的默认导出

模块里可以提供一个默认导出的东西,在 talk.js 里:

let greeting = 'hello'
let goodbye = 'see ya ~'

const greet = (name) => {
  return `hello ${name}.`
}

export { greeting, goodbye }
export default greet

用 export default 导出了一个默认的东西,就是 greet 函数。

导入模块默认的东西

import greet, { greeting, goodbye } from './talk'

console.log(greeting, goodbye)
console.log(greet('ninghao'))

导入模块默认导出的东西不需要在它周围使用大括号({})。

使用别名

导出与导入的时候都可以使用别名。用的关键词是 as:

import greet, { greeting as g, goodbye as b } from './talk'

console.log(g, b)
console.log(greet('ninghao'))

程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->多线程(下)
  JavaWeb开发-->Servlet技术详解(Ⅲ)
  JSP与Hibernate开发-->使用JPA和注解
  Java网络编程-->XML数据处理
  精通Spring-->CSS过渡和动画
  Vue3开发-->CSS过渡和动画
  不可错过的几种JS优化技巧
  最新的Vue面试题大全含源码级回答,吊打面试官系列
  qs.parse()、qs.stringify()、JSON.stringify() 用法及区别
  axios.all()解决并发请求
  Node.js 实现远程桌面监控
  Vue路由开启keep-alive时的注意点
  css 实现不定数量的tab切换和页面切换
  jQuery与AJAX的整合简介
  JavaScript的HTML DOM Track 对象
  JavaScript中的HTML DOM Label 对象
  JavaScript的Window 对象
  HTML支持的多媒体(Media)
  HTML 表格标签的用法
  JavaScript的 while 循环语句
  应该掌握的几个HTML标记语言(个人总结)
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。