模块化 require.js 入门教学(前端必看系列)

太过爱你忘了你带给我的痛 2023-06-03 04:54 110阅读 0赞

[模块化 require.js 入门教学(前端必看系列)][require.js]

在工作的时候总是会用到模块化开发,那接下来我就顺着这个问题来说一下什么是模块化

前端模块化 !!!

JS 模块化提供给我们三种规范

分别就是

No.1

commonjs  这个其实也就代表了node.js 它适合后台开发, 因为是同步的呢. 所以不太适合用于前端, 前端的客户端是浏览器, 浏览器追求异步加载, 所以 浏览器不能等太久的时间.

No.2

前端模块的规范是 AMD 规范 代表就是require.js , 它是异步的呢, 很多前端框架都是用的 amd 规范, 比如 jQuery angular 等等…

No.3

第三个模块化的规范就是 es6 了呀.

那说完规范后, 来说一说 如何操作叭. 顺序的话顺着上面的顺序说哦.

common.js的操作

它的所有模块化都是两个方向, \[ 暴露模块接口 和 引入模块 \]

**module.exports = \{ \} 暴露一个就是 exports的对象**

**　然后用 require() 引入一个模块**

其实这是后台的规范, 在 node.js环境合一直接运行, 但是在客户端不能直接运行, 需要对文件打包解析 . (这里列举常用的打包工具 webpack gulp)

前端的 AMD 规范

**amd 是 前端模块化的一种规范, 全称 async module definition 异步模块加载机制, 所以需要按照这个规范去定义模块和使用模块.**

**这里 require.js 提供了一个全局方法 叫 define() 用来定义模块的**

**定义 模块 分两种 第一种就是 不依赖其他模块 另一种就是依赖其他模块啦.**

**这里先说一下 不依赖其他模块的写法 ( 下面就是啦)**

![1483896-20190704170257381-1597023618.png][]

**下面这个是有依赖的模块**

**![1483896-20190704170404601-1603880849.png][]**

**那 定义好了之后 如何 在主文件中分别引入这两部分呢**

**下面就告诉大家如何使用哦.**

**在主文件夹中 分两部分 一部分是 配置模块 , 另一部分是使用模块.**

**![1483896-20190704170524088-407473342.png][]**

**这样就是一个完整的使用啦.**

**最后在引入的 <script> 的标签中 写上src \[!!! 这里要注意一个东西, 看下面截图\]**

**这里的 data-main 是必须要写的 等于号 后面的是 你最后 配置的模块的路径.**

**这样 就是一个完整的使用过程啦.**

![1483896-20190704170829810-1726359055.png][]''

**es6呢 我就留在下次跟大家详细解释啦.**

**喜欢的点个关注哦. 难搞哦.**

posted on 2019-07-04 17:15 [blankOne][] 阅读( ...) 评论( ...) [ 编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/blankOne/p/11133641.html

[require.js]: https://www.cnblogs.com/blankOne/p/11133641.html
[1483896-20190704170257381-1597023618.png]: /images/20230601/9476b4cb74ae4df9a31da071f42602f1.png
[1483896-20190704170404601-1603880849.png]: /images/20230601/a1f268977cad4729ad4d0fd4b60e9e79.png
[1483896-20190704170524088-407473342.png]: /images/20230601/3d173caca2954ea7a553f026f4fc3ef2.png
[1483896-20190704170829810-1726359055.png]: /images/20230601/0d3711ed463c4e5aa74dbfaf63b48874.png
[blankOne]: https://www.cnblogs.com/blankOne/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=11133641

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关【JavaScript模块化】4-AMD-RequireJS模块化教程

require.js使用教程 1. 下载require.js, 并引入官网: http://www.requirejs.cn/ github : htt

落日映苍穹つ/ 2024年04月03日 12:47/ 0 赞/ 253 阅读

相关 Springboot 整合 ElasticSearch 入门教学必看

ElasticSearch 相比搜到这篇文章的人，都已经有过对它的了解，一种流行的企业级搜索引擎，是一个分布式，高性能、高可用、可伸缩的搜索和分析系统。那么用我粗

川长思鸟来/ 2023年07月14日 05:27/ 0 赞/ 176 阅读

相关模块化 require.js 入门教学(前端必看系列)

[模块化 require.js 入门教学(前端必看系列)][require.js] 在工作的时候总是会用到模块化开发,那接下来我就顺着这个问题来说一下什么是模块化前端模块

太过爱你忘了你带给我的痛/ 2023年06月03日 04:54/ 0 赞/ 111 阅读

相关 Zookeeper入门必看

Zookeeper简介 zookeeper是一个分布式服务框架，是Apache Hadoop 的一个子项目，它主要是用来解决分布式应用中经常遇到的一些数据管理问题，如：统

向右看齐/ 2022年10月23日 08:29/ 0 赞/ 359 阅读

相关 JS模块化4_AMD-RequireJS模块化教程

require.js使用教程 0. 基本语法 AMD：Asynchronous Module Definition 异步模块定义暴露模块： -

太过爱你忘了你带给我的痛/ 2022年09月12日 11:49/ 0 赞/ 414 阅读

相关 JS模块化0_node与npm(必看)

模块化课程Node相关知识铺垫 1. Node是什么？ > 是一个js运行环境 2.Node与npm是什么关系？我们在开发时，经常会用到很多别人已

桃扇骨/ 2022年09月12日 11:49/ 0 赞/ 97 阅读

相关深入理解JavaScript模块化编程：RequireJS

1、开篇的话之前写过一篇[JavaScript模块化编程][JavaScript]，当时是结合自己做的东西来写的，比着葫芦画瓢。现在回过头来看，依然有些不是太理解的地方

野性酷女/ 2022年07月30日 13:15/ 0 赞/ 311 阅读

相关 mongoDB 入门必看

[mongotemplate mongodb的各种操作模糊查询精确查询等等][mongotemplate mongodb_ _ _] [MongoTempla

淩亂°似流年/ 2022年05月22日 23:37/ 0 赞/ 646 阅读

相关 linux入门必看

linux 入门必看-----之作死操作作为linux的学习或是使用者，不仅仅要熟练掌握常用的功能，还要避开危险的命令，这样才能让自己的系统更加稳定的运行。下面是简

ゞ浴缸里的玫瑰/ 2022年04月10日 01:16/ 0 赞/ 473 阅读

相关 RequireJS模块化

导语： > 之前一直有听说RequireJS，但是一直都没机会去了解，只知道它是一个给js做模块化的API。最近在做React，其组件化的思想和js模块化的思想不谋而合。

喜欢ヅ旅行/ 2021年11月15日 11:44/ 0 赞/ 499 阅读