requireJS模块化

Posted 2021-02-20 zlf1914

1. javascript里面js代码的写法：目标是解决冲突和依赖

函数式编程，全局函数和变量--很容易覆盖

对象的写法--也会从外面改变

命名空间:利用名称不同缓冲js代码的冲突---名称太长，不方便维护

闭包--变量一直存在，垃圾回收机制失效，内存泄漏

模块化开发

函数式编程---->面向对象编码---->模块化编程(面向对象可以理解成深度的模块化)

2.COMMONJS规范、AMD规范、CMD规范

CommonJS 最开始是 Mozilla 的工程师于 2009 年开始的一个项目，它的目的是让浏览器之外的 JavaScript

能够通过模块化的方式来开发和协作---Node.js(服务器端)

CommonJS是最早的规范。

CommonJS 的规范中，每个 JavaScript 文件就是一个独立的模块.

CommonJS 规范的主要适用场景是服务器端编程，所以采用同步加载模块的策略。

定义模块

调用模块

配置模块

AMD 是 Asynchronous Module Definition 的简称，即“异步模块定义”，是从 CommonJS 讨论中诞生的。

AMD 优先照顾浏览器的模块加载场景，使用了异步加载和回调的方式。浏览器端异步加载库Require.js实

现的就是AMD规范。

CMD规范，全称”Common Module Definition”，称为 通用模块加载规范 。一般也是用在浏览器端。浏览器

端异步加载库Sea.js实现的就是CMD规范。

3.RequireJS模块化开发

模块化的思想和意义--冲突和依赖

可以更方便地使用别人的代码，想要什么功能，就加载什么模块(每个 JavaScript 文件就是一个独立的模块)

团队开发大家必须以同样的方式编写模块，否则达不到预想的效果.

模块化思想就是指将页面根据内容的关联性分解成不同的且相互独立的模块进行开发，每个模块之间没有必然的联系，互不影响。

4.requireJS模块化开发步骤

下载并引入requirejs文件

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持 defer，所以把defer也写上。

data-main属性的作用是，指定网页程序的主模块,意思是整个网页的入口代码,所有代码都从这儿开始运行,文件名自定义

define 定义模块，接收二个参数。

第1个参数，必须是一个数组，指明该模块的依赖性

第2个参数是一个回调函数。

require 调用模块，接收二个参数。

第1个参数是一个数组，表示所依赖的模块

第2个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。

require.config({ }) 配置模块 第三方的公共模块

5.ES6 模块化讲解 （import export）

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

export命令用于规定模块的对外接口。

import命令用于输入其他模块提供的功能。

定义模块/导入模块/引入模块文件