JavaScript模块化学习复习笔记

最新推荐文章于 2025-09-13 09:06:35 发布

原创最新推荐文章于 2025-09-13 09:06:35 发布 · 416 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #笔记 #前端 #开发语言 #es6

JS模块化学习复习笔记

一、模块化概述

1.什么是模块化

将程序文件根据一定规则拆分成多个文件
拆分出的每个文件就是一个模块，模块中的数据都是私有的，模块之间相互隔离
模块内的数据可以暴露出去供其它模块使用

2.为什么需要模块化

解决全局污染问题
解决依赖混乱问题
解决数据安全问题

3.模块化核心思想——导入和导出

模块之间是隔离的，通过导入（引入）和导出（暴露）进行数据和功能的共享

二、模块化规范

CommonJS规范——服务端应用广泛

导出

//导出方式一：
exports.name = name
//导出方式二：
module.exports = {name}

每个模块内部的 this 、 exports 、 module.exports 在初始时，都指向同一个空对象，该空对象就是当前模块导出的数据
无论如何修改导出对象，最终导出 module.exports 指向的对象（导出的可能不是原来指向的空对象）
exports 是对 module.exports 的初始引用，仅为了方便给导出对象添加属性，module.exports 修改指向则 exports 的工作就没用了

导入

//导入方式：
const a = require('相对路径')
//可以导入时直接解构想要的属性方法
const {b,c} = require('相对路径')
//对于同名的可以解构时重命名
const {b:b1,c:c1} = require('相对路径')

扩展理解

一个JS模块在执行时，是被包裹在一个内置函数中执行的，所以每个模块都有自己的作用域

//通过以下方法验证：
console.log(arguments.callee.toString())
//内置函数形式如下：
function(exports,require,module,__filename,__dirname){
    //******************
}

浏览器端运行

Node.js默认支持CommonJS规范，浏览器端不支持，需要经过编译

//全局安装browserify：npm i browserify -g
//编译：browserify index.js -o build.js
//index.js是源文件，build.js是输出的目标文件
//页面中引入使用
<script src="./build.js"></script>

ES6模块化规范——浏览器端应用广泛

导出

//分别导出：在定义属性方法的代码前加上 export
export const a = "xxx"
//统一导出：
export {a,b,c} //此处{}并不是对象
//默认导出
export default {a,b,c}//此处{}是对象，且是default属性的值，并采用ES6简写
//以上三种方式可以同时使用

导入

//全部导入（通用）
import * as obj from '相对路径'

//命名导入（适用于分别导出和统一导出，因为默认导出的对象属性default是保留字，不能用）
import {b as b1,c,d} from '相对路径'
//默认导入（适用于默认导出）
import obj from '相对路径'
//命名导入和默认导入可以同时使用

//动态导入（通用），返回promise值，可以放在事件响应函数中接收
import('相对路径')

//import可以不接收任何数据
import '相对路径'

//页面导入使用，采用模块方式导入，内容不会出现在全局作用域
<script type="module" src="相对路径"></script>