(VueJs)前端模块化

为什么引入模块化思想?

当我们是以一个开发小组的形式开发项目,每个人负责项目的某个模块,若没有模块化思想,各模块之间定义的变量,方法很容易交杂在一起导致错误。

模块化实现的基本思想

闭包

  • 在匿名函数内部,定义一个对象
  • 给对象添加各种需要暴露到外面的属性和方法
  • 将这个对象返回,外面加一个ModuleA接收
var ModuleA=(function(){
//1、定义一个对象
var obj={};
//2、在对象内部添加变量和方法
obj.flag=true    //属性flag
obj.myFunc=function(info){
console.log(info);
//3、返回对象
return obj;
}

使用:

if(ModuleA.flag){
	console.log('输出内容');
}
moduleA.myFunc('输出');
常见的模块化规范:
  • CommonJS
  • AMD
  • CMD
  • ES6的Modules
    export / import
    导出和导入,一旦你通过导出的方式给别人暴露出来,任何人只需要通过导入的方式就可以调用。
    (VueJs)前端模块化_第1张图片

html:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Es6模块化title>
head>
<body>
<script src="./xiaoming.js" type="module">script>
<script src="./xiaohong.js" type="module">script>
<script src="./xiaogang.js" type="module">script>
body>
html>

xiaoming.js:

const name='xiaoming';

function sum(num1,num2) {
    return num1+num2;
}
if (flag){
    console.log(sum(20,300))
}
//导出方式1
export {
    name,sum
}
//导出方式2
export var age=18;
export var flag=true;
export function sum1(num1,num2){
    return num1+num2;
}
//Es5定义类
function Person5() {

}
//Es6定义类
export class Person6 {
    run(){
        console.log('奔跑')
    }
}

//导出方式3   export default   导入这可以自己明明,当然default导出时只能设置一个
const city='山东青岛';
export default city;


//导出方式2
export var age=18;
export var flag=true;

xiaogang.js:


//导入方式1
import {flag} from "./xiaoming.js";
//导入方式2 导入export default时可以随意命名
import abcd from "./xiaoming.js";
//导入方式3 全部统一导入
import * as abc from "./xiaoming.js"
if(flag){
    console.log('很强');
    console.log(abc.name);
    console.log(abcd);
}

输出结果:
(VueJs)前端模块化_第2张图片

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