五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用

一、JavaScript原始功能

-在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。那个时候的代码是怎么写的呢？
直接将代码写在<script>标签中即可

随着ajax异步请求的出现，慢慢形成了前后端的分离客户端需要完成的事情越来越多，代码量也是与日俱增。
为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。但是这种维护方式，依然不能避免一些灾难性的问题。
比如全局变量同名问题：看下边的例子

另外，这种代码的编写方式对js文件的依赖顺序几乎是强制性的
但是当js文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较同时的事情。
而且即使你弄清楚顺序了，也不能避免上面出现的这种尴尬问题的发生。

二、匿名函数的解决方案

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

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

三、使用模块作为出口

我们可以使用将需要暴露到外面的变量，使用一个模块作为出口，什么意思呢？
来看下对应的代码：

我们做了什么事情呢？
非常简单，在匿名函数内部，定义一个对象。
给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。
最后将这个对象返回，并且在外面使用了一个MoudleA接受。

接下来，我们在man.js中怎么使用呢？
我们只需要使用属于自己模块的属性和方法即可

这就是模块最基础的封装，事实上模块的封装还有很多高级的话题：

但是我们这里就是要认识一下为什么需要模块，以及模块的原始雏形。
幸运的是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案。
常见的模块化规范：
CommonJS、AMD、CMD，也有ES6的Modules

四、CommonJS（了解）

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

CommonJS的导出：
CommonJS的导入：

五、ES6 export基本使用

export指令用于导出变量，比如下面的代码：

上面的代码还有另外一种写法：
上面我们主要是输出变量，也可以输出函数或者输出类：
上面的代码也可以写成这种形式：
export default
某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名

这个时候就可以使用export default

我们来到main.js中，这样使用就可以了
这里的myFunc是我自己命名的，你可以根据需要命名它对应的名字

另外，需要注意：
export default在同一个模块中，不允许同时存在多个。

六、ES6 import使用

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

首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module
import指令用于导入模块中的内容，比如main.js的代码：
如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦：

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
</body>
</html>

var name = '小明'
var age = 18
var flag = truefunction sum(num1,num2) {return num1 + num2
}if (flag) {console.log(sum(20, 30));
}// 1.导出方式一
export {flag,sum
}// 2.导出方式二
export var num1 = 1000;
export var height = 188;// 3.导出函数/类
export function mul(num1, num2) {return num1 + num2;
}export class Person {run() {console.log('在奔跑');}
}// 5.export default
/*
const address = '深圳市'
export {address
} *//*export const address = '北京市'*//*
const address = '深圳市'
export default address*/export default function (argument) {console.log(argument);
}

// 1.导入{}中定义的变量
import {flag,sum} from "./aaa.js";if (flag) {console.log('小明是天才');console.log(sum(10,20));
}// 2.直接导入export定义的变量
import {num1,height} from "./aaa.js";console.log(height);
console.log(num1);// 3.导入 export的function
import {mul, Person} from "./aaa.js";console.log(mul(30, 50));const p = new Person();
p.run();/*import addr from "./aaa.js"
console.log(addr)*/// 4.导入export default中的内容
import arg from "./aaa.js"
arg("你好啊")// 5.统一全部导入
/*
import {flag,num,num1,height,Person,mul,sum} from "./aaa.js"
*/import * as aaa from './aaa.js'
console.log(aaa.flag)
console.log(aaa.height)

var name = '小红'
var flag = false

五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用相关推荐

① ESP8266 开发学习笔记_By_GYC 【更新 ets_printf 函数使ESP_IDF 能够支持浮点数打印】
① ESP8266 开发学习笔记_By_GYC [更新 ets_printf 函数使ESP_IDF 能够支持浮点数打印] 在我们日常的开发过程中,经常使用到的一个功能就是串口打印功能.在ESP826 ...
Web前端学习笔记——JavaScript之数组、函数、作用域
数组为什么要学习数组之前学习的数据类型,只能存储一个值(比如:Number/String.我们想存储班级中所有学生的姓名,此时该如何存储? 数组的概念所谓数组,就是将多个元素(通常是同一类型)按 ...
微信小程序云开发学习笔记（二）云函数
一.创建一个云开发的小程序 1. 如下图所示创建小程序 2. 删除无关文件删除前: 删除后: 3. 删除无关代码 index.wxml index.wxss 内的代码全部清空,index.js保留如 ...
初探swift语言的学习笔记三(闭包－匿名函数)
作者:fengsh998 原文地址:http://blog.csdn.net/fengsh998/article/details/29353019 转载请注明出处如果觉得文章对你有所帮助,请通过留言 ...
PHP学习笔记(一)：理解匿名函数与Closure
1.PHP里的匿名函数实质是Closure类的实例 (1)不能自己实例化Closure类型的对象,会触发一个Error try{$closure = new \Closure(); }catch(Er ...
windows内核开发学习笔记十五：IRP结构
windows内核开发学习笔记十五:IRP结构 IRP(I/O Request Package)在windows内核中,有一种系统组件--IRP,即输入输出请求包.当上层应用程序需要访问底层输入输 ...
Polyworks脚本开发学习笔记(五)-变量使用基本语法
Polyworks脚本开发学习笔记(五)-变量使用基本语法定义变量及赋值定义各种类型的变量定义变量时,只需要使用DECLARE 关键字即可定义,为了区别变量和脚本中的其它字符,建议都以小写v开头 ...
Windows驱动开发学习笔记（五）—— SSDT HOOK
Windows驱动开发学习笔记(五)-- SSDT HOOK 系统服务表系统服务描述符表实验一:通过代码获取SSDT表地址通过页表基址修改页属性方法1:修改页属性方法2:修改CR0寄存器实 ...
GTK+图形化应用程序开发学习笔记（五）—组装盒、组合表、固定容器构件
GTK+图形化应用程序开发学习笔记(五)-组装盒.组合表.固定容器构件一.组装盒组装盒(GtkBox)也称为组合构件.使用组装盒可以将多个构件放在一个容器中.容器可以把组装盒看作是一个构件.不像按 ...