Java登陆第三十三天——ES6(二)模块、模块化

合集 - Java登陆(70)
1.Java登陆第一天——Mysql安装2.Java登陆第一天——Maven入门3.Java登陆第二天——SQL之DDL4.Java登陆第二天——SQL之DML5.Java登陆第三天——SQL之DQL(一)基础查询、聚合函数、分组查询6.Java登陆第四天——SQL之DQL(二)分页查询、多表查询、自连接7.Java登陆第五天——SQL之DQL(三)子查询8.Java登陆第六天——SQL之表复制，表去重，合并查询9.Java登陆第六天——SQL之SQL(四)外连接10.Java登陆第六天——SQL之约束11.Java登陆第七天——SQL之事务12.Java登陆第七天——SQL之事务隔离13.Java登陆第八天——SQL之DCL14.Java登陆第九天——JDBC(一)DriverManager、Connection、Statement15.Java登陆第十天——JDBC(二)ResultSet16.Java登陆第十一天——JDBC(三)PreparedStatement、CLOB、BLOB17.Java登陆第十二天——网络编程(一)网络的概念18.Java登陆第十二天——网络编程(二)InetAddress、Socket19.Java登陆第十三天——网络编程(三)DatagramSocket20.Java登陆第十四天——网络编程(四)韩顺平网络编程21.Java登陆第十五天——网络编程(四)韩顺平网络编程22.Java登陆第十六天——网络编程(四)韩顺平网络编程23.Java登陆第十七天——网络编程(四)韩顺平网络编程完成24.Java登陆第十七天——正则表达式25.Java登陆第十八天——Java8之Lambda表达式26.Java登陆第十九天——HTML规范与语法27.Java登陆第二十天——HTML常用标签28.Java登陆第二十一天——CSS29.Java登陆第二十二天——JavaScript入门30.Java登陆第二十三天——JavaScript对象、JSON、事件31.Java登陆第二十四天——JavaScriptBOM、DOM32.Java登陆第二十五天——Tomcat、认识JavaWeb项目33.Java登陆第二十六天——Http34.Java登陆第二十六天——Servlet35.Java登陆第二十七天——多种方法Servlet映射、Content-Type36.Java登陆第二十八天——Servlet生命周期37.Java登陆第二十九天——Servlet继承关系，service和doGet的区别38.Java登陆第二十九天——ServletConfig和ServletContext39.Java登陆第二十九天——HttpServletRequest和HttpServletResponse40.Java登陆第二十九天——请求转发和响应重定向41.Java登陆第三十天——Cookie和Session42.Java登陆第三十天——域对象43.Java登陆第三十一天——Filter44.Java登陆第三十一天——监听器45.Java登陆第三十二天——AJAX和异步46.Java登陆第三十二天——前端工程化47.Java登陆第三十二天——ES6(一)let、const、模板字符串、解构表达式、箭头函数48.Java登陆第三十三天——ES6(二)reset、spread、Class类语法糖49.Java登陆第三十三天——ES6(二)浅拷贝、深拷贝
50.Java登陆第三十三天——ES6(二)模块、模块化
51.Java登陆第三十四天——Node.js安装、npm配置、npm命令52.Java登陆第三十四天——使用Vite创建工程化的Vue3项目53.Java登陆第三十五天——Vite+Vue3目录结构、.vue文件理解（SFC）54.Java登陆第三十五天——VUE初始页面解析55.Java登陆第三十六天——VUE3引入CSS56.Java登陆第三十六天——VUE3响应式入门、setup语法糖57.Java登陆第三十七天——VUE3插值表达式、文本渲染、属性渲染、事件绑定58.Java登陆第三十七天——VUE3响应式基础、条件渲染、列表渲染59.Java登陆第三十八天——VUE3双向绑定，监听器(侦听器)60.Java登陆第三十八天——VUE3生命周期、钩子函数、组件拼接、组件传参(组件通信)61.Java登陆第三十九天——Router路由入门62.Java登陆第三十九天——Router编程式路由，路由传参63.Java登陆第四十天——Router路由守卫64.Java登陆第四十天——Router路由守卫练习65.Java登陆第四十一天——Promise、async关键字、await关键字66.Java登陆第四十一天——Axios67.Java登陆第四十二天——Axios拦截器68.Java登陆第四十二天——跨域69.Java登陆第四十三天——Pinia70.Java登陆第四十四天——跟写微头条遇到的问题
收起

模块化是管理JS代码的一种手段，把代码拆分成小模块，提高代码维护性，复用性，拓展性。

模块类似与Java的包，可以从外部导入。

模块有三种导出方式

  1. 分别导出

  2. 统一导出

  3. 默认导出

  • 三种导出方式可以混用。

模块化的关键字有export、import、as和default。

ES6的模块会自动开启严格模式。

在被导入时，JS会把整个模块当作一个对象。该对象内部属性、方法都是局部的。

模块栗子

定义外部模块temp.js

temp.js

const title="张三自传";

function fun() {
    console.log("张三开心的嘞");
}

class Person  {
    constructor() {
        console.log("张三构造器")
    }
    say(){
        console.log("张三的say方法");
    }
}

定义导入模块app.js，也会被当作程序的入口

//此时空白

定义首页index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 导入JS文件 添加type='module' 属性,否则不支持ES6的模块化 -->
    <script src="./app.js" type="module"></script>
</head>
<body>
基础定义完毕
</body>
</html>

结构如下，（忽略文件夹名）
image

分别导出

  • 在外部模块temp.js中使用export关键字选择需要导出的内容。

  • 在导入模块app.js中

    • 使用import关键字导入模块

    • 使用as关键字给导入模块设置对象名。（类似与SQL的设置别名）

    • 使用from关键字填写导入模块的地址。

因为被导入的模块会被解析成一个对象，所以需要设置对象名。

temp.js

export const title="张三自传";//选择导出属性title

export function fun() {//选择导出方法fun
    console.log("张三开心的嘞");
}

class Person  {
    constructor() {
        console.log("张三构造器")
    }
    say(){
        console.log("张三的say方法");
    }
}

app.js

//*表示temp.js中的所有成员  zs为设置的对象名
import * as zs from "./temp.js";

console.log(zs.title);//输出zs对象的属性title 打印内容 张三自传

zs.fun();//测试fun方法 打印内容 张三开心的嘞

let p1=new zs.Person();//报错 zs.Person is not a constructor

因为只选择导出常量title和方法fun()， 所以Person对象不会被找到。

统一导出

  • 在外部模块temp.js最后，使用export+花括号{}关键字统一导出，花括号内选择需要导出的内容。

  • 在导入模块app.js中

    • 使用import关键字导入模块

    • 使用as关键字给导入模块设置对象名。（类似与SQL的设置别名）

    • 使用from关键字填写导入模块的地址。

放置最后仅是确保导出生效。

temp.js

const title="张三自传";

function fun() {
    console.log("张三开心的嘞");
}

class Person  {
    constructor() {
        console.log("张三构造器")
    }
    say(){
        console.log("张三的say方法");
    }
}
//可以是无序的
export {Person,title}

app.js

//可以使用解构表达式，但名一定要相同
import {title,Person}  from "./temp.js";
//可以有多个import
import * as zs from "./temp.js";

let p1=new Person();//张三构造器
console.log(title);//张三自传

let p2=new zs.Person();//张三构造器
console.log(zs.title);//张三自传

解构表达式使用{ }表示对象，使用[ ]表示数组

默认导出

  • 在外部模块temp.js最后，使用export+default关键字选择一个导出，唯一

  • 在导入模块app.js中

    • 看注释

放置最后仅是确保导出生效。

temp.js

const title="张三自传";

function fun() {
    console.log("张三开心的嘞");
}

class Person  {
    constructor() {
        console.log("张三构造器")
    }
    say(){
        console.log("张三的say方法");
    }
}

//默认导出title
export default title;

app.js

//常规导入
import * as zs from "./temp.js";

//因为default本身是JS中的关键字了，需要使用解构表达式
import {default as z} from "./temp.js";
//等价于使用解构表达式{default as t}
import t from "./temp.js";

console.log(zs.default);//张三自传

console.log(z.default);//undefined
console.log(z);//张三自传

console.log(t);//张三自传
posted @   rowbed  阅读(17)  评论(0)  编辑  收藏  举报
相关博文：
·  Java登陆第三十二天——ES6(一)let、const、模板字符串、解构表达式、箭头函数
·  Java登陆第三十三天——ES6(二)reset、spread、Class类语法糖
·  【ES6】模块化
·  ES6的模块化
·  JavaScript学习笔记（二十七）——es6模块化
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手