首页 > 其他分享 >ES6中模块化详解

ES6中模块化详解

时间:2024-04-06 18:44:48浏览次数:29  
标签:ES6 console name getInfo 模块化 js 详解 export log

前言

因为ES6中的模块化是将来,所以就必须有必要好好的了解一下,学习一下,这篇文章就简单总结一下ES6中模块的概念,语法和用法。纯属个人总结,不喜勿喷。

下面我将通过a.js、b.js和c.js三个文件把ES6的知识点穿起来。

默认导出

导出语法:

export default 默认导出的成员

样例代码a.js:

// 默认暴露
export default {
    name: '果冻想',
    getInfo: function(){
        return "欢迎关注微信公众号:果冻想";
    }
}

注意事项:

  • export default 向外暴露的成员,可以使用任意的变量来接收;
  • 在每个模块中,只允许使用唯一一次export defalut,否则会报错;
  • 如果一个模块未export导出,但在另外一个模块中引入了,会返回一个空对象,不会报错。

统一导出

导出语法:

export {a, b, c};

样例代码b.js:

// 统一暴露
let name = '果冻想';

function getInfo(){
    return "欢迎关注微信公众号:果冻想";
}

export {name, getInfo};

分别导出

导出语法:

export a
export b

样例代码c.js:

// 分别暴露
export let name = '果冻想';

export function getInfo(){
    return "欢迎关注微信公众号:果冻想";
}

导入方式汇总

直接上代码:

<script type="module">
    // 1. 通用的导入方式
    // 引入 a.js 模块内容
    import * as m1 from "./a.js";
    console.log(m1.default.name);
    console.log(m1.default.getInfo());

    // 引入 b.js 模块内容
    import * as m2 from "./b.js";
    console.log(m2.name);
    console.log(m2.getInfo());

    // 引入 c.js
    import * as m3 from "./c.js";
    console.log(m3.name);
    console.log(m3.getInfo());

    //2. 解构赋值形式
    import {name, getInfo} from "./b.js";
    console.log(name);
    console.log(getInfo());

    //3. 简便形式  针对默认暴露
    import a from "./a.js";
    console.log(a.name);
    console.log(a.getInfo());
</script>

在浏览器中如果无法直接运行,安装一个live server插件就OK了。

总结

一天一个小知识点,学到了~

标签:ES6,console,name,getInfo,模块化,js,详解,export,log
From: https://www.cnblogs.com/vipygd/p/18117734

相关文章

  • 智能指针详解
    目录自己管理指针会有什么潜在的问题智能指针的作用share_ptr(共享智能指针)初始化的方式shared_ptr获取原始指针weak_ptr(弱引用智能指针)初始化的方式use_count()expired()lock()reset()返回管理this的shared_ptr循环引用问题图释循环引用:​编辑解决方法:......
  • YOLOv8 深度详解!一文看懂,快速上手
    https://zhuanlan.zhihu.com/p/598566644?utm_id=0&wd=&eqid=a1d56281000fe8920000000464910f3a YOLOv8是ultralytics公司在2023年1月10号开源的YOLOv5的下一个重大更新版本,目前支持图像分类、物体检测和实例分割任务,在还没有开源时就收到了用户的广泛关注。考虑到......
  • Golang中的强大Web框架Fiber详解
    Golang 取消首页编程手机软件硬件安卓苹果手游教程平面服务器首页 > 脚本专栏 > Golang >Golang Web框架FiberGolang中的强大Web框架Fiber详解2023-10-2410:31:51 作者:技术的游戏在不断发展的Web开发领域中,选择正确的框架可以极大地影响项目的效......
  • socket编程——C++实现基于UDP协议的简单通信(含详解)
    文章后面有代码,可以直接复制在VisualStudio2022中运行(注意:必须是两个项目,客户端服务端各一个,连接在同一网络中,先运行服务端,并且客户端数据发送的目标IP要改为你服务端的IP)目录前言帮助文档一、UDP通信框架1.服务端2.客户端二、服务端实现1.加载库(WSAStartup函数)......
  • 腾讯云2核4G轻量服务器应用场景详解:2024年5M带宽服务器测评与优惠活动大放送
     随着云计算技术的日益成熟,腾讯云推出的2核4G5M轻量应用服务器已成为众多用户的首选。那么,这款服务器究竟能干什么?适用哪些场景呢?腾讯云2核4G5M轻量应用服务器,凭借其出色的性能与合理的价格,已成为性价比极高的云服务器产品。对于大部分个人使用需求,如网页浏览、在线视频播放......
  • lsblk命令参数详解
    lsblk命令用于列出块设备的信息,包括磁盘、分区和挂载点等。下面是lsblk命令的一些常用用法和示例讲解: lsblk:简单地运行lsblk命令会列出所有块设备的基本信息,包括设备名、大小和挂载点等。lsblk [设备名称]:显示指定设备的信息,可以是磁盘或分区的设备名称。lsblk -a:显示所......
  • Vue Router 5个导航守卫(详解)
    文章目录导航守卫全局前置守卫全局解析守卫全局后置钩子路由独享的守卫组件内的守卫完整的导航解析流程导航守卫vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航注意:参数或查询的改变并不会触发进入/离开的导航守卫,你可以通过观察$route对象来应......
  • ES6 exports 与 import 使用
    基本用法基本用法exportsNamedexports(命名导出)Defaultexports(默认导出)exportdefault与export的区别:Combinationsexports(混合导出)Re-exporting(别名导出)ModuleRedirects(中转模块导出)Importexport与import的复合写法注意基本用法模块导入导......
  • 练手项目层初阶1—《详解静态版本——通讯录管理系统》
    文章目录......
  • 虚拟内存知识详解
    虚拟内存单片机的CPU是直接操作内存的「物理地址」在这种情况下,要想在内存中同时运行两个程序是不可能的操作系统是如何解决这个问题呢?关键的问题是这两个程序都引用了绝对物理地址,而这正是我们最需要避免的。可以把进程所使用的地址「隔离」开来,即让操作系统为每......