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

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页