requireJS的初步掌握
前一段时间,因为一些事吧这个习惯落下了,现在争取重新捡起来。
最近开始自学requireJS,为了更好的掌握,所以写出一个自我理解的博客供参考。
分割线-------------------------
首先,学习requireJS,要知道什么是requireJS.
requireJS是一个可在js和node环境下运行的一个非常小巧的一个AMD规范下的js模块载入框架,通俗的理解为模块加载器。
相信开始学习requireJS的一定对JS代码的模块化有一个初步的了解了。而requireJS主要解决了两大问题
第一。在传统的模块化封装中一定对那难堪入目的引入方式和引入的先后顺序有很大的排斥和烦恼。
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>
而requireJS很好的解决了这个问题,(在之后的讲述中会讲到解决方式)
第二。相信大家应该也遇到过JS阻塞浏览器渲染这个问题。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>hello world</span>
<script type="text/javascript">
alert('1');
</script>
</body>
</html>
你会发现,浏览器运行后会先执行alert,这时候页面应该是一片空白,点击确定后在加载body中的内容。
这就是JS阻塞浏览器渲染导致的。
有写同学就会说,可以增加async和defer什么的,也可以避免出现阻塞!
其实这个想法很好,我之前也是这么想的。但是我没考虑到的是,当引入外部js过多的情况下,这种方式不好控制异步加载的顺序,导致出现错误。
而如何控制加载顺序,那么就有回到了第一个问题了。requireJS会有好的帮我们处理好这些顾虑。
这也就是我们下一章要讲的依赖的问题。
这里顺便给同学们简单的描述下AMD和CMD的概述和区别
AMD:是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
CMD:是"Common Module Definition"的缩写,意思就是“常用模块定义”。它采用的是延迟加载模块,使用的时候加载所需要的模块,定义在唯一的参数里面边封装,边加载,边依赖。
AMD和CMD的本质区别就是:amd采用的是依赖前置,而cmd采用的是延迟依赖。
requireJS的初步了解先讲到这里,相信大家应该和我一样,有了一定的了解。
下一章节描述,requireJS的依赖和常用的API。也希望和大家能共同进步
requireJS的初步掌握的更多相关文章
- requireJS的初步掌握(二)
前面我们讲述了requireJS的一些认知和优点,==>http://www.cnblogs.com/wymbk/p/6366113.html 这章我们主要描述的是requireJS的一些常用的 ...
- requireJS2
requireJS的初步掌握(二) 前面我们讲述了requireJS的一些认知和优点,==>http://www.cnblogs.com/wymbk/p/6366113.html 这章我们主要描 ...
- 【requireJS源码学习01】了解整个requireJS的结构
前言 现在工作中基本离不开requireJS这种模块管理工具了,之前一直在用,但是对其原理不甚熟悉,整两天我们来试着学习其源码,而后在探寻其背后的AMD思想吧 于是今天的目标是熟悉requireJS整 ...
- 【requireJS源码学习03】细究requireJS的加载流程
前言 这个星期折腾了一周,中间没有什么时间学习,周末又干了些其它事情,这个时候正好有时间,我们一起来继续学习requireJS吧 还是那句话,小钗觉得requireJS本身还是有点难度的,估计完全吸收 ...
- 基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...
- AngularJS+requireJS项目的目录结构设想
AngularJS+requireJS项目的目录结构设想 准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default 放页面,不过 ...
- 使用requireJs的方法
在你们对requireJs初步了解后,快来看看他们是怎么使用的吧. 在你下载完成require.js插件后,在页面里引入,在require.js 加载完之后,会查找页面上script标签的data-m ...
- require.js的初步认识
我们之前呢写Javascript代码时都会写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多必须分成多个文件,依次加载.就如下面的代码: <script src="a.js ...
- RequireJS入门级_RequireJS能给我们带来什么帮助?
前言:其实很早前就已经接触和了解到RequireJS了,当时只是大概明白它能用来控制JS的加载顺序,即:页面一定要先加载这个JS,再加载那个JS,对于RequireJS的好处还没有一个真正的体会和认识 ...
随机推荐
- JavaScript 逗号表达式
逗号表达式的一般形式是:表达式1,表达式2,表达式3……表达式n 逗号表达式的求解过程是:先计算表达式1的值,再计算表达式2的值,……一直计算到表达式n的值.最后整个逗号表达式的值是表达式n的值. ...
- java 读excel xlsx
http://bbs.csdn.net/topics/380257685 import java.io.File; import java.io.IOException; import java.io ...
- (中等) CF 311B Cats Transport,斜率优化DP。
Zxr960115 is owner of a large farm. He feeds m cute cats and employs p feeders. There's a straight r ...
- 关于NSNumber对C语言字符串的简写
2.关于NSNumber对C语言字符的简写 - 简写:对字符串进行操作返回的是NSString类型 NSLog(@"%@", @("purple")); > ...
- 手机web——自适应网页设计(html/css控制) - 51CTO.COM
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- javadoc时候乱码-编码 GBK 的不可映射字符 - wqjsir的专栏 - 博客频道 - CSDN.NET
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- Vmware Tools is currently being installed on your system(转)
Follow the 3 Steps : Restore the /etc/issue file: sudo mv /etc/issue.backup /etc/issue* PS:在本人的PC上执行 ...
- Linux下的强大工具之一sed(转),Shell必备
sed命令基本用法sed是一个非交互式文本编辑器,它可以对文本文件和标准输入进行编辑,标准输入可以是来自键盘输入.文件重定向.字符串.变量.来自管道的文本等等.sed从文本的一个文本行或标准输入中读取 ...
- (简单) POJ 3254 Corn Fields,状压DP。
Description Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; ...
- ymodem协议c实现(转)
源:ymodem协议c实现 /****************************************Copyright (c)******************************** ...