Vue模块化

 

目录

一、模块化的必要性

二、ES模块化的导入和导出

---

一、模块化的必要性

不模块化可能出现的问题：

1. 全局变量命名冲突的问题（多人开发，多个js文件）；
2. js文件的引用顺序会造成影响；

模块化的雏形：

//小明

;var moduleA = (function () {
    const name = '小明';
    const age = 20;

    var obj = {};

    function sum(num1, num2) {
        return num1 + num2;
    }

    let flag = true;
    obj.name = name;
    obj.flag = flag;
    obj.sum = sum;
    return obj;
})()


;(function () {
    if (moduleA.flag){
        console.log(moduleA.name)
    }

})();

常见的模块化规范：CommonJS、AMD、CMD、还有ES6的Modules

 

二、ES模块化的导入和导出

1、指定模块化

index.html

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

2、导出

aaa.js

var name = 'rocke'
var flag = true

function sum(n1, n2) {
    return n1 + n2;
}

if (flag) {
    console.log(sum(10, 50))
}

//导出方式一
export {
    flag,
    sum,
}

//导出方式二
export var color = 'red';

//导出函数
export function mul(n1, n2) {
    return n1 * n2
}

//导出自定义命名:default在一个模块中只能有一个
const adressIdAndNo = '1234567'
export default adressIdAndNo

default在一个模块中只能有一个

3、导入

bbb.js

import {sum,color,mul} from "./aaa.js";
import add from "./aaa.js"
var name = 'maFei'
var age = 21
var flag = false

console.log(sum(100,100))
console.log(color)
console.log(mul(5,5))
console.log(add)