模块化开发-export和import的基本使用

JavaScript原始功能

在网页开发的早期, js制作作为-种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。直接将代码写在<script>标签中即可
随着ajax异步请求的出现,慢慢形成了前后端的分离客户端需要完成的事情越来越多,代码量也是与日俱增。为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护。但是这种维护方式,依然不能避免一些灾难性的问题。
比如全局变量同名问题:

<script>
document.getelementById('button'). onc1ick=function(){
console.1og('按钮发生了点击');
}
</script>

// mmmm.js文件中,小明定义了一个变量，名称是flag,井且为true
flag =true
// hhhh. js文件中,小红也喜欢用flag这个变量名称,只是为false
flag= false
//mmm2.js文件中,小明想通过flag进行-些判断。完成后续的事情
if (flag)
console. log('小明是个天才'):
)

但是在以上情况小明就是无法运行自己代码“小明是个天才”就是不显示，因为与小红的flag设置发生了冲突

另外,这种代码的编写方式对js文件的依赖顺序几乎是强制性的。但是当js文件过多,比如有几十个的时候,弄清楚它们的顺序是一件比较麻烦的事情。

匿名函数的解决方案

■我们可以使用匿名函数来解决方面的重名问题
在mmmm.js文件中,我们使用匿名函数

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

■但是如果我们希望在mmm2.js文件中,用到flag ,应该如何处理呢?
显然,另外-一个文件中不容易使用,因为flag是一个局部变量。

使用模块作为出口

我们可以使用将需要暴露到外面的变量,使用一个模块作为出口,什么意思呢?
来看下对应的代码:
我们做了什么事情呢?
(1)非常简单,在匿名函数内部,定义一个对象。
(2)给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。
(3)最后将这个对象返回,并且在外面使用了一个MoudleA接受。
接下来,我们在mmm2.js中怎么使用呢?
我们只需要使用属于自己模块的属性和方法即可
这就是模块最基础的封装,事实上模块的封装还有很多高级的话题:但是我们这里就是要认识一下为什么需要模块 ,以及模块的原始雏形。幸运的是,前端模块化开发已经有了很多既有的规范,以及对应的实现方案。
常见的模块化规范:
CommonJS、AMD、CMD ,也有ES6的Modules

CommonJS (了解)

■模块化有两个核心:导出和导入
■CommonJS的导出:

module.exports = {
	flag: true,
	test(a, b) {
		return a + b
	}，
	demo(a, b) {
		return a*b
	}
}

■CommonJS的导入

// CommonJS模块
let { test, demo, flag } = require('moduleA'); 
//等同于
let _mA = require('moduleA');
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;

export基本使用

■export指令用于导出变量,比如下面的代码:

export let name = 'why'
export let age = 18
export let height = 1.88

■. 上面的代码还有另外-种写法:

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

export {name, age, height}

导出函数或类

■.上面我们主要是输出变量,也可以输出函数或者输出类
上面的代码也可以写成这种形式:

export function test(content) {
	console. log(content);
}
export class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	run() {
		console. log(this.name + '在奔跑');
		}
}

function test(content)  {
    console.log(content);
}
class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	run() {
		console. log(this.name + '在奔跑'):
	}
}
export (test,Person)

export default

■某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名
这个时候就可以使用export default

export default function () {
	console.log(' default function');
}

■我们这样使用就可以了
口这里的myFunc是我自己命名的,你可以根据需要命名它对应的名字

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

■另外, 需要注意:
export default在同一个模块中,不允许同时存在多个。
M;

import使用

我们使用export指令导出了模块对外提供的接口，下面我们就可以通过import命令来加载对应的这个模块了

首先,我们需要在HTML代码中引入两个js文件,并且类型需要设置为module

<script src="info.js" type="module"></script>
<script src="main.js" type="module"></script>

import指令用于导入模块中的内容

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

如果我们希望某个模块中所有的信息都导入,一个个导入显然有些麻烦:

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

import * as info from ' ./info.js'
console. log(info.name, info.age, info.height, info. friends) ;

import {flag,sum} from "./mmmm";不对
改成import {flag,sum} from "./mmmm.js"; 在这里插入图片描述

导入导出方式一：

导入导出方式二：

导入导出方式三：

导入导出方式四：

导入导出方式五：

或者

紫框内

导入导出方式六：

导出七：

（以上内容根据微博“coderwhy”的vue视频课程整理）