• ES6 - 模块化

    文章目录

    浅谈ES6模块化（前言）

    在ES6之前我们的 JavaScript 是没有模块化这个概念的，ECMAScript2015之前想要实现模块化我们需要引入第三方的库，比如AMD规范的requireJS库,再或者遵循CMD规范的seaJS库，这都是过去式了，现在的 JavaScript 已经支持了模块化开发规范 ES Module，这使得 JavaScript 支持了原生模块化开发，ES Module把一个文件当作一个模块，每个模块都有自己的独立作用域，核心点就是import导入模块以及export导出模块，这可在我们的框架中大有用处，如果你想学习框架，那么这个ES6知识点是你必须要学会的

    ES6模块化有什么优点？

    • 有效的避免了命名冲突以及变量的污染
    • 提高整体开发代码的复用性
    • 相对来说具有极强的维护性
    • 提升了执行的效率
    • 大程度避免了引入时的层层依赖

    模块化导出

    const testFunc = name => `我的名字是:${name}`;
export default testFunc;

    • 1
    • 2

    模块化导入

    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
  
    <script type="module">
      import testFunc from './script.js';
      console.log(testFunc('小郭'));
    script>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    请添加图片描述

    导出多个 – 导入多个

    // 导出
const name = 'Brave-AirPig';
const testFunc = name => `我的名字是:${name}`;
export { testFunc, name };

    • 1
    • 2
    • 3
    • 4
    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <script type="module">
      import { testFunc, name } from './script.js';
      console.log(testFunc(name));
    script>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    //----------------或者---//
// 导出
const name = 'Brave-AirPig';
const testFunc = name => `我的名字是:${name}`;
export default { testFunc, name };

// 导入
<script type="module">
   import myScript from './script.js';
   console.log(myScript.testFunc(myScript.name));
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    请添加图片描述

    命名冲突的解决方案

    比如我在导入的script脚本文件中又声明了一个name变量，那么我们该怎么避免这样的命名冲突呢？

        <script type="module">
      import { testFunc, name } from './script.js';
      const name = '小郭';
      console.log(testFunc(name));
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5

    请添加图片描述

    解决方案：导入时重命名

        <script type="module">
      import { testFunc, name as first_name } from './script.js';
      const name = '小郭';
      console.log(testFunc(name));
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述
    或者呢，我们可以在导出时进行一个重命名：

    const name = 'Brave-AirPig';
const testFunc = name => `我的名字是:${name}`;
export { testFunc, name as first_name };

    • 1
    • 2
    • 3

    导入整个模块

        <script type="module">
      import * as myScript from './script.js';
      const name = '小郭';
      console.log(myScript.testFunc(myScript.first_name));
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
  • 相关阅读:
    数学学习经验
    如何在项目运行过程中动态修改邮箱发件人的配置信息
    左神高级提升班2 约瑟夫环结构
    【qml】QML | 创建自定义组件（02）
    【Proteus仿真】【Arduino单片机】数码管显示
    【入门篇】UML-ClassDiagram类图
    怪兽存活概率问题
    c++ - 第10节 - list类
    超简单Windows-kafka安装配置
    JAVA毕业设计097—基于Java+Springboot+Vue+uniapp的医院挂号小程序系统(源码+数据库)
  • 原文地址：https://blog.csdn.net/weixin_63836026/article/details/126293555