RequireJs边学边写：(一)初识RequireJs

最新推荐文章于 2022-03-10 07:39:35 发布
最新推荐文章于 2022-03-10 07:39:35 发布
阅读量788 收藏
点赞数
分类专栏： requirejs 文章标签： requirejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuzhongzi81/article/details/45582381
版权

由于笔者也是初学RequireJS,所以在某些概念上来说，笔者也是拿不准啊，所以主要是在官网以及前辈的一些博客中吸取精华，加上一些自己的理解以及案例的制作，那么下面主要给一些我自学的一些链接吧

requireJs是一个采用了javascirpt AMD(Asynchronous Module Definition)规范编写的类库，那么要求的就是在采用requireJS分模块加载类库的时候，加载的类库就必须是符合AMD规范的，比如说jquery在1.7版本之后就采用了AMD的规范来编写类库，那么名正言顺的采用requireJs来模块话加载jquery的库文件就不存在什么问题，但是并不是所有的js文件都是符合AMD规范的，那么在requireJS加载之后就不会起到什么作用，当然也可以通过一些其他的方法来加载那么没有使用AMD编写的js库文件，这个在后面的一些文章中将会讲到。

一、什么是AMD

那么既然requireJs使用AMD实现的一个类库，所以我们首先得明白什么是AMD,下面就是我引用的一段话，至于这段话是在哪看到之后然后顺便做成了txt保存下来当时也没有记录。

当你要加载JavaScript模块时，就会使用script标签。为了加载依赖的模块，你就要先加载被依赖的，之后再加载依赖的。 使用script标签时，你需要按照此特定顺序安排它们的加载，而且脚本的加载是同步的。可以使用async和defer关键字使 得加载异步，但可能因此在加载过程中丢失加载的顺序。另一个选择是将所有的脚本捆绑打包在一起，但在捆绑的时候你 仍然需要把它们按照正确的顺序排序。   AMD就是这样一种对模块的定义，使模块和它的依赖可以被异步的加载，但又按照正确的顺序。


就我的理解来说，传统的javascript加载情况下，js文件都是按照前后顺序来加载的，意思就是说只有当第一个js文件加载完成，才能加载第二个js文件，这样的好处是保证了js的文件依赖顺序，但是同时也显露出一个问题，就是如果第一个js文件的加载时间过长，那么势必会造成第二个js文件的加载执行，如果js是在放在dom渲染之前,那么可能出现的结果就是在js未完成加载的情况下，整个页面会出现一片空白的情况。

那么,requireJS是怎么样加载的呢？requireJs采用的是异步的方式进行加载，使得彼此之间的js加载不收影响，代码也不会一直阻塞，同时requireJs提供了回调的机制，使得只有在需求的模块加载完成之后，才会执行相应的代码，那么就在异步的基础上保证了js文件的依赖性。

可以通过如下的一张图清晰的看出requireJS的加载情况：

二、最简单的requireJS入门案例

目录结构如下：

js

|------app

|           |------test1.js

|           |------test2.js

|------lib

|          |------jquery.js

|------app.js

|------require.js

在js目录下有一个app的文件夹，app的文件夹下有两个js文件，lib文件夹下有jquery.js文件,另外在js的一级目录下有app.js入口js文件以及require.js文件，index.html与js是同级目录


① 加载requireJs的库文件(从这里下载)

 
 
  1. <script src="js/require.js" data-main="js/app" defer ascyn="true"></script>

在这里需要注意几点：

  1. ReuqireJS以一个相对于baseUrl的地址来加载所有的代码。页面顶层<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。

    注： baseUrl亦可以通过config设置。如果没有显示指定config及data-main，则默认的baseUrl为包含RequireJs的那个HTML页面。

    从上面就可以看出：那么现在的baseUrl就是js文件夹，如果这里面没有data-main存在的话，那么就是包含了requirejs的html页面，也就是与js同级的index.html所在的目录。

  2. RequireJs默认嘉定多有的依赖资源都是js脚本，因此无需再module ID上再加".js"后缀，RequireJs在进行module ID到path的解析时会自动不上后缀。上面的data-main中加载的文件实际上是"js/app.js"。

② app.js中编写相应js代码，就可以直接输出了

app.js

 
 
  1. console.log("hello requireJs");

你会看到在控制台输出了"hello requireJs"，至此一个最简单的requireJS使用案例就到此为止了。

页面加载的顺序就是index.html--->require.js--->app.js，然后是输出。


OK,这一节就介绍这么多，下一节来看看requireJs中的data-main属性以及模块定义。

萌萌的卡洛奇
关注
专栏目录
初识模块化AMD和require.js
景洪的博客
06-19 937
如何书写模块 一、函数写法 function m1(){ //... } function m2(){ //... } 函数m1和m2就是两个最原始的模块；但是它的缺点是，函数名高度暴露，污染了全局变量。 二、对象写法 var module = new Object({ m1: function(){ //...
js 带笔锋 签字版_重构转型前端——笔锋很朴实的入门随记
weixin_39911916的博客
12-19 357
导语大前端时代来势如潮，给本来岗位就存在一些局限的重构们提供了很强的顺势而转的动力和环境。 这几个月，从js知识只会皮毛的幼儿园初识字母水平，到现在总算会自己提笔造句的一年级水平吧。当然还是需要老师review和帮忙修改代码。基础概览：(工作日常只负责纯静态页面的还原)只有‘变量，数组，click,touch,if else,for’这些简单的知识储备；对‘三目，正则，对象，参数’等了解，用的不熟...
JS模块化工具requirejs教程(一)：初识requirejs
赣州博讯科技工作室的博客
04-09 27
JS模块化工具requirejs教程(一)：初识requirejs
java script require_JS模块化工具requirejs教程(一)：初识requirejs
weixin_42333009的博客
02-16 140
随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用R...
初识RequireJS
Edwin的博客
08-11 208
一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 这段代码依次加载多个js文件。 这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网
【转】JS模块化工具requirejs教程(一)：初识requirejs
weixin_30483013的博客
03-30 59
随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。 RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作...
初识requirejs
agiy8598的博客
04-11 78
随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。 RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框...
【requirejs】初识JS模块化工具requirejs
12-20 462
先来看一段常见的场景，通过示例讲解如何运用requirejs： 1、当然首先要到requirejs的网站去下载js -> requirejs.org 2、建立一个html文件，index.html: require(["a"]); body 3、建立一
了解webpack：前端模块化的起源与发展
在软件开发领域中，模块化是一种重要的概念。随着前端技术的不断发展和应用场景的复杂化，前端模块化也变得越来越重要。 在过去，前端开发主要是以页面为单位进行开发，整个项目都是以一系列页面为基础进行构建。...
网址备忘录
sinat_35444807的博客
10-31 1143
Bookmarks 前端学习 HTML canvas three.js Noise - value - 2D (1条消息) three.js script vertex和fragment在react中使用/纯js写法_草宝虫的博客-CSDN博客 texture = new THREE.TextureLoader().load()引入纹理，图片应该放在vue脚手架中的哪块 - SegmentFault 思否 Three.js – JavaScript 3D Library 前
MVC(下)
baidulixueqin的博客
03-10 533
MVC（下） 主要内容:使用类优化代码 1.引入类(class) 2.引入继承(class继承class) 3.初识Vue 抽象思维四:事不过三 同样的代码写三遍，就应该抽成一个函数 同样的属性写三遍，就应该做成共用属性(原型或类) 同样的原型写三遍，就应该用继承 代价 有的时候会造成继承层级太深，无法一下看懂代码 可以通过写文档、画类图解决 步骤 对比MVC的app1.js 和 app2.js，属性几乎一模一样。 何不把公共的属性抽成公共属性/原型，在js里公共属性就是原型。 它们两个v的属性一模一样，可
【6层】一字型框架办公楼（含建筑结构图、计算书）.zip
09-21
【6层】一字型框架办公楼（含建筑结构图、计算书） 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
Kotlin编程全攻略：从基础到实战项目的系统学习资料
09-21
Kotlin作为一种现代、简洁的编程语言，正逐渐成为Android开发的新宠。本文将为您介绍一套全面的Kotlin学习资料，包括学习大纲、PDF文档、源代码以及配套视频教程，帮助您从Kotlin的基础语法到实战项目开发，系统地提升您的编程技能。
机械原理课程设计_牛头刨床说明书.doc
最新发布
09-21
机械原理课程设计_牛头刨床说明书.doc
基于深度学习的钢材表面缺陷识别系统.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
JSP在线CD销售系统（论文）.zip
09-21
1、资源项目源码均已通过严格测试验证，保证能够正常运行；、 2项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
STM32F103C8T6+CUBEMX+BT04蓝牙
09-21
STM32F103C8T6+CUBEMX+BT04蓝牙
基于深度学习对法国租界地黑白照片上色模型.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
RequireJS与JQuery模块化编程：问题与解决方案
此外，作者提到了一个简单的例子，展示了如何在RequireJS中处理循环依赖的异常。在示例中，模块A和模块B相互引用，通过引入一个中间模块或者重新设计模块间的依赖关系，可以避免这种循环依赖。通常，可以通过定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值