javascript-模块化相关规范

javascript-模块化相关规范

---

目录

---

---

内容

---

1、模块化概述

1.1、传统开发模式的主要问题

• 命名冲突
• 文件依赖

1.2、通过模块化解决上述问题

• 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
• 模块化开发的好处：方便代码重用，从而提高开发效率，并且方便后期维护

2、浏览器端模块化规范

• AMD：Require.js

• CMD : Sea.js

3、服务器端模块化规范

3.1、CommonJS

1. 模块分为单文件模块与包
2. 模块成员导出：module.exports和exports
3. 模块成员导入：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