前端模块化

前端模块化

传统模块化

var moduleA = (function() {
	var obj = {}
    var flag = false
    obj.flag = flag
    return obj
})()
// 这样就可以用作模块化开发了 ，这时只需要注意 moduleA 的命名不要冲突就可以， 因为函数有自己的作用域，不需要关注

script标签模块化

当 type 设置为 module 时， 引入的每个 js 文件都将作为单独的模块使用，但同时 不同的js 文件之间不能通信

<script src="./aaa.js" type="module"></script>

CommonJS

node中的实现的规范就是 CommonJS

导出

var flag = false
var sum = function(a,b) {a + b}

module.exports = {		// 这玩意需要特殊环境才能解析，比如webpack，因为 webpack 是支持 node 的
    // 导出对象的属性和方法
    flag: flag,
    sum: sum
}

导入

let {flag, sum} = require('./文件路径')

AMD

CMD

ES6的Modules

script标签模块化

当 type 设置为 module 时， 引入的每个 js 文件都将作为单独的模块使用，但同时 不同的js 文件之间不能通信，可以使用es6的导入与导出通信。注： 常规引入会导致跨域，需要本地起个服务器

<script src="./aaa.js" type="module"></script>

导出 export

方式一

精准导出

var flag = false
var sum = function(a, b) {a+b}
export {
	flag,
    sum
}

方式二

声明的时候就可以进行导出

export let num1 = 1000

方式三

导出的时候不起名，引入的时候起名，export default 一个文件只能用一次，不能多次用

export default {
    // 内容
}

导入 import

import {flag, sum} from './文件路径'

导入 import （*通配符导入）

这种情况在导入的属性或方法过多的时候使用，相当于把所有的导入值统一设置一个对象，并起了一个名字

import {name, age, num, ... , add} from './文件路径' // 表示导入很多东西，根本写不下

// 这时候可以采用以下写法

import * as objName from './文件路径'

// objName 为对象的别名， 此时 引用 即为

objName.name, objName.age