swiper如何防止冲突_前端开发：什么是模块化？如何使用？

大家好，我来了！本期为大家带来的Web前端学习知识是”前端开发：什么是模块化？如何使用？“，喜欢Web前端的小伙伴，一起看看吧！

主要内容

1. 什么是模块化
2. 为什么使用模块化
3. 模块嵌套
4. Requirejs使用

学习目标

第一节 什么是模块化

1.1 模块化产生

模块化发展历程

js一开始并没有模块化的概念，直到ajax被提出，前端能够像后端请求数据，前端逻辑越来越复杂，就出现了许多问题：全局变量，函数名冲突，依赖关系不好处理。
当时使用子执行函数来解决这些问题，比如经典的jquery就使用了匿名自执行函数封装代码，将他们全都挂载到全局变量jquery下边

在js出现的时候，js一般只是用来实现一些简单的交互，后来js开始得到重视，用来实现越来越复杂的功能，而为了维护的方便，我们也把不同功能的js抽取出来当做一个js文件，但是当项目变的复杂的时候，一个html页面可能需要加载好多个js文件，而这个时候就会出现各种命名冲突，如果js也可以像java一样，把不同功能的文件放在不同的package中，需要引用某个函数或功能的时候，import下相关的包，这样可以很好的解决命名冲突等各种问题，但是js中没有模块的概念，又怎么实现模块化呢

　　模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案，一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块，但是模块开发需要遵循一定的规范，否则就都乱套了，因此，才有了后来大家熟悉的AMD规范，CMD规范

1.2为什么使用模块化

使用模块化可以给我们带来以下好处

• 解决命名冲突
• 提供复用性
• 提高代码可维护性
• 灵活架构，焦点分离，方便模块间组合、分解
• 多人协作互不干扰

1.3 js作用域

Js的作用域是函数作用域

结果分析：

怎么获取当前的下标对应的数据

本章作业

1.什么是模块化

2.为什么使用模块化

3.js作用域问题怎么解决

第二节 模块化实现

2.1 模块的出现

如果这是一个公共类，公共的属性和方法，大家都去修改，谁想修改就去修改，这样就乱了，这样不合理，我们应该统一修改。

一个公共类我应该是统一修改 或者是统一不修改

2.1.1初步优化方案

思路：把这个对象 封装一个方法

这样我们就不能访问了，但是也不可能写了方法 不再外部使用，再次优化，我们给外部提供一个修改方案

2.1.2再次优化

2.1.3 优化

2.1.4修改和获取

这时候就有统一标准，谁调用或者修改这个代码就可以看到，调用这个方法知道那个方法。

总结：这样比随便修改这个值要好很多，我们写的代码就被为模块

我们通过模块把我们的代码整理和隔离，这样我们以后写的功能 公共的使用的方法或者模块就可以这样写，对代码进行隔离，模块之前这样不能直接互相通信，实现隔离

2.1.5 模块和模块化区别？

模块:是用于在项目中划分相对独立的功能，模块更偏重逻辑上区分

模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个公能模块的职能单一

2.2 模块实现

2.3 模块的嵌套

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）

【代码演示】

模块的嵌套 实现在当前的模块使用其他模块里面的方法---传递进入

2.4 模块的放大模式

在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"，这样一个比较完整的模块也就出来了

如果这时候有个人把 获取元素的模块置空了，domElement=null;

上面咱们写的模块化是很古老的一种写法

现在我们写模块化，借助于requirejs

Requirejs给大家演示使用方案，在前几年很多人用的，这2年随着vue react的框架层出不穷，而且越来越好，现在requrejs的现在使用的人在逐渐减少，但是他的思维方式和写代码的方式方法，还是很值得大家思考的。

有个好的词汇：组件化和模块化 多模块化思想（组件化就是vue 模块化就是requirejs给我们提供的一种思想，其实这两个没有太大区别）

本章作业

1.模块化实现获取和设置本地元素

2.模块化的放大模式

第三节requirejs

3.1 模块化规范的产生

在模块化规范形成之前，JS开发者使用Module设计模式来解决JS全局作用域的污染问题。Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。在JavaScript中，Module模式使用匿名函数自调用 (闭包)来封装，通过自定义暴露行为来区分私有成员和公有成员。

上面例子是Module模式的一种写法，它通过闭包的特性打开了一个新的作用域，缓解了全局作用域命名冲突和安全性的问题。但是，开发者并不能够用它来组织和拆分代码，于是乎便出现了以此为基石的模块化规范。

RequireJS是一个JavaScript文件或者模块的加载器。它可以提高JavaScript文件的加载速度，避免不必要的堵塞。它针对于在浏览器环境中使用做过专门的优化，但它也可以在其他的JavaScript环境中使用，像Node.js一样可以在服务器上运行

3.2为什么要用require.js

最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。

这段代码依次加载多个js文件。

这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js的诞生，就是为了解决这两个问题：

1. 实现js文件的异步加载，避免网页失去响应；
2. 管理模块之间的依赖性，便于代码的编写和维护
3. 命名冲突

3.3 requrejs官网

中文官网提供的中文版本：www.requirejs.org.cn

其实用requirejs就是推荐我们在写代码的时候，推荐我们使用模块化的方式去写我们的js

目录解构

js

apps：index.js … 自己定义的js文件

libs：requirejs文件

main.js 配置文件路径 入口函数

index.html

3.4 使用步骤

1.引入 requirejs

<scrpt data-main=’js/main.js’ src=’js/libs/rrquire.js’></script>

2.创建入口文件：main.js

代码效果：

3.引入jquery文件

文件加载效果

注意：创建的文件需要main.js加载 否则不能使用

本章作业

1.理解模块化的由来

2.requirejs使用的好处

3.如何使用requirejs步骤

第四节 实例

4.1 Requirejs模块

Js中文件与文件之前是不隔离的，可以相互访问的，但是我们希望文件是隔离的，不能随意访问的，提供访问方案

4.1.1 定义模块 简单名称/价值对

如果模块没有任何依赖关系，并且它只是一个名称/值对的集合，那么只需将对象文字传递给define（）：

4.1.2 定义函数

4.1.3 具有依赖关系的定义函数

如果模块具有依赖关系，则第一个参数应该是一个依赖关系名称数组，第二个参数应该是一个定义函数。一旦所有依赖关系被加载，该函数将被调用来定义模块。该函数应该返回一个定义模块的对象。依赖关系将被传递给定义函数作为函数参数，其顺序与依赖关系数组中的顺序相同

注意：依赖注入 (想使用data文件 注入data里面就好了,哪里使用注入就好了) 依赖前置

4.1.4 定义与简体CommonJS的包装一个模块

如果您希望重用一些以传统CommonJS模块格式编写的代码，可能难以重新使用上面所使用的依赖关系数组，并且您可能希望将依赖项名称直接对齐到用于该方法的本地变量依赖（nodejs的模块化）

这是什么时候使用什么时候引用 （依赖就近）

其他的定义模块使用我们不再去看 我们常用这四种定义方式

4.1.5 获取dom元素

创建一个DOMElement.js:

Index.js

4.2 requirejs网易云音乐

实现 网易云音乐数据列表展示，点击音乐播放

步骤

1.目录结构创建

2.main.js入口文件

3.http.js

4.index.js

5.config文件

6.view.js显示视图

7.点击音乐列表音乐播放 view.js

4.3 Requirejs的shim

Requirejs所有文件都是define() ，引入第三种也是这种写法？不是

为什么jquery可以，Requirejs支持jquery的使用，但是很多第三方插件不支持，使用shim

实例：swiper第三方使用

代码：

目录结构：

Index.js

Main.js

Index.js

Index.html

4.4 模块化规范

• AMD 是 RequireJS 在推广过程中对模块定义的规范化产出
• CMD是SeaJS在推广过程中对模块化定义的规范化产出

区别：

1. 对于依赖的模块，AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成了可以延迟执行（根据写法不同，执行的方式不同）
2. CMD推崇就近依赖，AMD推崇依赖前置。看代码

以上AMD的写法是官方推崇的方式，但是同时也支持CMD的写法

AMD和CMD最明显的区别就是在模块定义时对依赖的处理不同
AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
CMD推崇就近依赖，只有在用到某个模块的时候再去require

本章作业

1. requirejs的定义方式
2. requirejs网易云实例
3. requirejs导入第三方插件

本期为大家带来的Web前端学习知识”前端开发：什么是模块化？如何使用？“介绍完了，想了解更多精彩内容的小伙伴，关注我，我们下期再见！