模块化技术有哪些：
- CommonJS(nodejs)、ES6模块化、AMD、CMD等
CommonJS：
CommonJS模块化 是2009年发布的，是民间出品的，相对不正规，可以在nodejs中应用
// 导出
module.exports = 对象
// 导入
var obj = require(模块文件)
导出语法:
// 导出：
export default 对象
导入语法:
// 导入：
import 名称 from 模块文件名字(路径名)
例子如下:
- 导出文件
var a = 100
var b = 200
var c = 300
function getInfo(){
return 'hello'
}
// 当前文件对外部导出内容，以便被使用
// 01. 默认导出：通过一个大对象把所有的信息都导出出去
// CommonJS: module.exports = {}
// ES6: export default 对象
export default {
name:'kitty',
age:6,
walk:function(){
console.log('hello kitty')
}
}
- 导入文件
// 01.默认导入
// import 名称 from '模块js文件路径名'
import cat from './modules/01-默认导出.js'
console.log(cat)
按需导出和导入
- 导出语法(在导出的位置前加export)
export const a = 10 // 常量
export function ab(){} // 函数
export const b = 20
export const cat = {name:'kitty',age:5} // 对象
注意：一般按需只做常量、函数导出，var/let变量不导出，本身没有意义
- 导入语法
import {xx,yy,zz} from 模块文件
import {xx as kk,yy as mm,zz as qq} from 模块文件 // 根据需要可以设置别名
注意：1. xx,yy,zz代表被导入的成员名称，与导出的要求一致;
2. 成员不用全部都导入，根据需要，导入 1个或多个或全部 都可以;
3. 如果导入进来的成员名称 与 当前环境名称 有冲突，可以使用 as 设置别名
例子如下:
- 导出
// 02. 按需导出，根据需要导出相关的成员
// 语法： export 常量声明/函数声明/对象声明
// (module.exports.xx = yy)
var a = 100
var b = 200
let c = 300
function getInfo(){
return 'hello world'
}
export const city = 'beijing'
const people = 2000
export function getApple(){
return '苹果'
}
function getPear(){
return '大白梨'
}
export const tiger = {color:'yellow and black'}
const dog = {name:'旺财'}
- 导入
// 02. 按需导入
// import {名称，名称。。} from '模块文件'
import {city as ct,getApple,tiger} from './modules/02-按需导出.js'
console.log(ct)
console.log(getApple)
console.log(tiger)
默认和按需同时导出和导入
- 导出
export const a = 10 // 按需导出
export function ab(){} // 按需导出
export default 对象/{} // 默认导出
export const b = 20
export function abc(){}
- 一个模块只能 默认导出一次，按需导入可以设置多次
- 默认导出 的语句没有摆放位置要求
- 导入
// 1) 分别导入
import 名称 from 模块
import {xx,yy} from 模块
// 2) 一并导入
import 名称,{xx,yy} from 模块
** 一并导入必须是 默认在"前"，按需在"后"**
例子如下:
- 导出
// 03. 默认和按需同时导出
// 语法： export 常量声明/函数声明/对象声明
// (module.exports.xx = yy)
var a = 100
var b = 200
let c = 300
function getInfo(){
return 'hello'
}
// 默认
export default {
City:'changchun'
}
// 按需
const Locals = '东北人'
export const people = 1000
function getApple(){
return '国光苹果'
}
export function getPear(){
return '苹果梨'
}
const tiger = {color:'yellow and black'}
export const dog = {name:'旺财'}
- 导入
// 03. 默认和按需同时导入
// A. 分别导入(具体参考 01 和 02)
// import 名称 from 模块
// import {名称,名称……} from 模块
// B. 一并导入
// import 名称(默认),{名称，名称……} from 模块
import obj,{people as pp,getPear} from './modules/03-默认和按需同 时导出.js'
console.log(obj)
console.log(pp)
console.log(getPear)
没有导出应用
项目开发时有的文件没有做导出动作(例如 css、less)，这样文件可以称为为 非模块文件，那么可以通过如下方式做导入
语法:
import 文件路径名
例子:
- 导出
// 4. 没有导出
for(var i=0; i<5; i++){
console.log(i)
}
- 导入
// 4. 导入空的模块
// import xx模块名字
import './modules/04-没有导出'
