前一段时间，因为一些事吧这个习惯落下了，现在争取重新捡起来。

最近开始自学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的初步掌握的更多相关文章

  1. requireJS的初步掌握(二)

    前面我们讲述了requireJS的一些认知和优点,==>http://www.cnblogs.com/wymbk/p/6366113.html 这章我们主要描述的是requireJS的一些常用的 ...

  2. requireJS2

    requireJS的初步掌握(二) 前面我们讲述了requireJS的一些认知和优点,==>http://www.cnblogs.com/wymbk/p/6366113.html 这章我们主要描 ...

  3. 【requireJS源码学习01】了解整个requireJS的结构

    前言 现在工作中基本离不开requireJS这种模块管理工具了,之前一直在用,但是对其原理不甚熟悉,整两天我们来试着学习其源码,而后在探寻其背后的AMD思想吧 于是今天的目标是熟悉requireJS整 ...

  4. 【requireJS源码学习03】细究requireJS的加载流程

    前言 这个星期折腾了一周,中间没有什么时间学习,周末又干了些其它事情,这个时候正好有时间,我们一起来继续学习requireJS吧 还是那句话,小钗觉得requireJS本身还是有点难度的,估计完全吸收 ...

  5. 基于angularJS和requireJS的前端架构

    1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...

  6. AngularJS+requireJS项目的目录结构设想

    AngularJS+requireJS项目的目录结构设想 准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default    放页面,不过 ...

  7. 使用requireJs的方法

    在你们对requireJs初步了解后,快来看看他们是怎么使用的吧. 在你下载完成require.js插件后,在页面里引入,在require.js 加载完之后,会查找页面上script标签的data-m ...

  8. require.js的初步认识

    我们之前呢写Javascript代码时都会写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多必须分成多个文件,依次加载.就如下面的代码: <script src="a.js ...

  9. RequireJS入门级_RequireJS能给我们带来什么帮助？

    前言:其实很早前就已经接触和了解到RequireJS了,当时只是大概明白它能用来控制JS的加载顺序,即:页面一定要先加载这个JS,再加载那个JS,对于RequireJS的好处还没有一个真正的体会和认识 ...

随机推荐

  1. nginx做反向负载均衡，后端服务器获取真实客户端ip

    首先,在前端nginx上需要做如下配置: location / proxy_set_header host                   $host; proxy_set_header X-fo ...

  2. maven 阿里云节点，速度快

    修改maven根目录下的conf文件夹中的setting.xml文件. <mirrors> <mirror> <id>alimaven</id> < ...

  3. Extjs5.1中的新特性

    Ext JS 5.0.1 is a maintenance release that addresses many bugs and limitations discovered by our com ...

  4. 文本去重-----awk或者uniq

    对于awk '!a[$3]++',需要了解3个知识点 1.awk数组知识,不说了 2.awk的基本命令格式 awk 'pattern{action}'     省略action时,默认action是{ ...

  5. Linux ALSA声卡驱动之三：PCM设备的创建

    声明:本博内容均由http://blog.csdn.net/droidphone原创,转载请注明出处,谢谢! 1. PCM是什么 模数转换 模拟信号经过pcm(脉冲编码调制)后为pcm数据: PCM是 ...

  6. NSDate详解及获取当前时间等常用操作

    NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. 创建或初始化可用以下方法 用于创建NSDate实例的类方法有 ...

  7. 使用Tomcat搭建图片服务器，使图片能够用链接访问

    在后台和前端交互时,遇到了后台存储的图片,前端根据地址无法访问,使用Tomcat搭建图片服务器 1.找到tomcat下的server.xml文件 2.配置文件下加入service节点 <!--为 ...

  8. Mac下配置node.js环境（Mac 10.12）

    有安装就有卸载,卸载教程参考:http://www.cnblogs.com/EasonJim/p/6287141.html 一.官方下载pkg安装包 1.安装 到官网https://nodejs.or ...

  9. YUM更换源(1)--yum找不到安装包

    公司提供的CentOS VM中,/etc/yum.repos.d 下 只有一个build.repo,其中提供的yum 源只有公司内部的几个源,很多包在这些源中都找不到.于是要添加别的源,下面的帖子中介 ...

  10. mongodb学习(六)索引

    准备工作: 先插入100万条数据 for(i=0;i<=1000000;i++){ db.users.insert({ "i":i, "username" ...