为什么使用模块化
JavaScript原始功能
- js作为一种脚本语言,做一些简单的表单验证和动画实现,代码中使用
常用的模块化规范
- CommonJS 、AMD、CMD、Modules(ES6)
- 模块化的核心:导入和导出
CommonJS规范
导入:
module.exports = {
flag : true,
test(a, b){
retur a+b;
}
}
导出:
//CommonJS模块
let { test, demo, flag } = require('moduteA');
//等同于 (类似于对对象的解剖)
let _mA = require('moduteA');
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;
ES6规范
export 指令用于导出变量,如:
//info.js
export let name = 'zhangsan';
export let age = 20;
export let height = 1.70;
//上面代码简写
let name = 'zhangsan';
let age = 20;
let height = 1.70;
export {name, age, height}
export 指令用于导出函数,如:
//导出函数
export function nul(num1, num2){
return num1 + num2;
}
//导出类
export class Person {
run(){
console.log('play');
}
}
//上面代码简写
function test(num1, num2){
return num1 + num2;
}
//简写
class Person {
run(){
console.log('play');
}
}
//导出
export{test, Person}
export default
使用场景:一个模块中的某个功能,可以让导入者自己命名;如:
注意事项:export default在同一个模块中,不允许同时存在多个。
const address = '西安市';
//export default address;
export default function(argument){
console.log(argument);
}
import指令用于导入
//导入单一变量
import {name, height, age} from './Person.js'
//导入默认值(自定义名称)
import aaa from './Demo.js'
//统一全部导入
import * as obj from './Person.js'