javascript-模块化相关规范
目录
文章目录
内容
1、模块化概述
1.1、传统开发模式的主要问题
- 命名冲突
- 文件依赖
1.2、通过模块化解决上述问题
- 模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块
- 模块化开发的好处:方便代码重用,从而提高开发效率,并且方便后期维护
2、浏览器端模块化规范
-
AMD:Require.js
-
CMD : Sea.js
3、服务器端模块化规范
3.1、CommonJS
- 模块分为单文件模块与包
- 模块成员导出:module.exports和exports
- 模块成员导入:require(‘模块标识符’)
4、通用模块化规范-ES6模块化
在ES6模块化规范但是之前,javascript社区已经提出了AMD、CMD、CommonJS等模块化规范。
但是,这些社区提出的模块化标准,还是存在一定的差异性与局限性,并不是浏览器与服务器通用的模块化标准。
因此,ES6语法规范中,在语义层面上定义了ES6模块化规范,是浏览器与服务端通用的模块化开发规范。
4.1、ES6规范
- 每个js文件都是一个独立的模块
- 导入模块成员使用import
- 暴露模块成员使用export
4.2、Node.js中通过babel体验ES6模块化
-
安装依赖
npm i -D @babel/core @babel/cli @babel/preset-env @babel/node npm i -D @babel/polyfill
-
项目根目录创建文件-babel.comfig.js,不能改名,固定写法,内容如下:
const presets = [ [ "@babel/env", { targets: { edge: "17", firefox: "60", chrome: "67", safari: "11.1" } } ] ] module.exports = { presets }
-
编写index.js文件-项目入口文件,文件内容:
consolo.log('es6')
-
命令行执行:
npx babel-node ./index.js // 结果 es6
5、ES6模块化的基本语法
5.1、默认导出与默认导入
-
默认导出格式
export default {...}/对象名
-
默认导入格式
import 模块名(自定义) from '模块路径'
-
示例代码5.1-1
-
编写测试文件(模块)m1.js:
// 模块m1 let a = 10 let b = '模块m1' function show() { console.log('默认导出'); } // 默认导处 export default { a, b, show }
-
index.js中导入
// console.log(1111); import m1 from './m1' console.log(m1);
-
命令行执行
npx babel-node ./index.js // 结果 { a: 10, b: '模块m1', show: [Function: show] }
-
-
解析:
- 每个模块中,只允许使用一次export default,否则报错
5.2、按需导出与按需导入
-
按需导出语法
export 变量声明/函数声明
-
按需导入语法
import {变量名或者函数名} from '模块路径/模块'
-
使用:
变量名/函数名()
-
-
示例:
-
m1文件:
// 按需导出 export let s1 = 'es6' export let s2 = 'babel' export function say() { console.log('按需导出'); }
-
index.js
import {s1, s2, say } from './m1' console.log(s1); console.log(s2); console.log(say); // 结果 es6 babel [Function: say]
-
-
解析:
- 每个模块中,可以多次按需导出
- 按需导入变量名或者函数名必须与导出一致
5.3、直接导入并执行模块代码
有时候,我们只想单纯的执行某个模块中的代码,并不需要得到模块中向外暴露的成员,此时,可以直接导入并执行模块代码
-
格式
import '模块路径/模块'
-
示例代码5.3-1:
-
m1.js
// 模块m1 let a = 10 let b = '模块m1' function show() { console.log('默认导出'); } for (let index = 0; index < 4; index++) { console.log(index); } // 默认导处 export default { a, b, show }
-
index.js
import './m1' // 结果 0 1 2 3
-
后记 :
vue官网地址:https://cn.vuejs.org/
本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785
前端项目源代码地址:https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA