模块的暴露的引入

commonJS简介

  • commonJS 是一种模块化规范. 『纸面上的东西』
  • nodeJS 是一个应用程序, 它实现了 commonJS 模块化规范

commonJS暴露模块

暴露模块方法一:
module.exports = test
// module.exports 可以暴露任意数据
// 可以使用 module.exports 暴露多个数据

暴露模块方法二:
// exports 也可以暴露数据,不过不能使用 `exports.xxx = xxx` 的形式
exports.aaa = test;
exports.bbb = test2
exports.foo = function(){} 

commonJS引入模块

引入自定义模块,要写相对路径
require('./a.js');

引入node_modules 文件夹中的模块,可以直接写模块名
require('express');

在浏览器中使用commonJS语法要进行以下操作

0. 按照 commonJS 语法编写功能代码
1. 用npm安装: npm i -g browserify
2. browserify 入口文件路径 -o 出口文件路径
    入口文件路径: JS 代码运行的『起点』
3. 在html中引入打包后的文件

ES6注意事项

浏览器默认不支持 ES6 模块化. 通过 『type="module"』 使其支持

ES6模块的暴露(打√的是经常使用的)

1. 分别暴露 √  当有多个数据需要暴露时, 选择分別暴露
2. 统一暴露
3. 默认暴露 √ 当只有一个数据需要暴露时, 选择默认暴露

//分别暴露 export
可以使用通用方式引入
可以使用解构赋值方式引入
export function add(a, b){
    return a + b;
}

export function minus(a, b){
    return a - b;
}

export var a = 100;
export let b = 'iloveyou';
export const c = [1,2,3];


//统一暴露(用的少)
可以使用通用方式引入
可以使用解构赋值方式引入
function cheng(a, b){
    return a * b;
}

function chu(a, b){
    return a / b;
}

var a = 5211314;

//这里不是对象的简写形式
//这里一定要写『简便方式』
export {
    cheng,
    chu, 
    a
}



//默认暴露
可以使用通用方式引入
也可以使用简便方式引入
const a = 100;
const b = 200;
export default b;

ES6模块的引入

1. 通用方式        
    import * as m1 from './m1.js';

2. 结构赋值 √   当目标模块使用『分别暴露』时
    import {add, minus} from './m1.js';
    
3. 简便方式 √   当目标模块使用『默认暴露』时
    import test from './m3.js';

你可能感兴趣的:(javascript前端es6)