前端代码复杂时出现的问题及解决思路--前端模块化

前端代码复杂时出现的问题及解决思路：

1.命名重复 （使用闭包函数来限制作用域）

(function(){
    var flag = true
})()

2.不能复用 （使用模块作为出口）

在匿名函数内部，定义一个对象

给对象添加各种需要暴露到外面的属性和方法（不需要暴露的直接定义即可）

最后将这个对象返回，并在外面使用了一个ModuleA接收

var ModuleA = (function(){
    //1.定义一个对象
    var obj = {}
    //在对象内部添加变量和方法
    obj.flag = true
    obj.myFunc = function(info){
        console.log(info);
    }
    //将对象返回
    return obj;
})()

接下来我们在main.js中 只需要使用属于自己模块的属性和方法即可

if(ModuleA.flag)
	console.log('调用模块A')
}
ModuleA.myFunc('调用Func')

这些只是模块化的雏形，前端模块化开发已经有了许多既有的方案

常见的模块化规范：

CommonJS、AMD、CMD、也有ES6的Modules

模块化有两个核心：导出和导入

CommonJS的导出(webpack里用得到)

module.exports={
	flag:flag,
    sum:sum
}

导入require关键字：

let { flag, sum }=require('./aaa.js');

ES6的模块化实现

export（导出）/ import (导入)

<script src="aaa.js" type="module"></script>
<!--type="module"就不会命名冲突-->

export

导出方式1：

let name = 'xiaoming'
let age = 18
let height = 1.88

export {name, age, height}

导出方式2：定义变量的时候直接导出

export let name ='xiaoming'

3.导出函数/类

export function test(arg){
	console.log(arg);
}

export class Person{
	constructor(name,page){
		this.name = name;
		this.age = age;
	}
	run(){
		console.log(this.name+"run")
	}
}
//或者定义好后统一导出
function test(arg){
	console.log(arg);
}

class Person{
	constructor(name,page){
		this.name = name;
		this.age = age;
	}
	run(){
		console.log(this.name+"run")
	}
}
export { test, Person }

4 .export default

某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名，默认的只能有一个

export default function(arg){
	console.log(arg)
}
//info.js

在main.js中这样使用就可以了

import myFunc from './info.js'
myFunc()

【注意】
export default在同一个模块中，不允许同时存在多个

import

1.首先，需要在html代码中引入js文件时，设置type="module"
2.示例

import {name, age, height} from './info.js'
console.log(name, age, height)

3.统一全部导入
通过 * 可以导入模块中的所有export变量
但是通常情况下，我们要给 * 起个别名，方便后续的使用

import * as aaa from './b.js'
console.log(aaa.flag);