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

最近开始自学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. mssql数据库syscolumns表中xtype列

    xtype    类型34 image35 text36 uniqueidentifier48 tinyint52 smallint56 int58 smalldatetime59 real60 mo ...

  2. 获取当前路径 ${pageContext.request.contextPath}

    ${pageContext.request.contextPath}

  3. （五）Jquery Mobile列表

    Jquery Mobile列表 一.JM列表 1.普通列表            效果:            带序号的列表 将ul换成ol      效果:       2.data-inset=& ...

  4. Quick Cocos2dx 场景转换问题

    项目结构是这样子的: 主场景代码是这样子的: local MainScene = class("MainScene", function() return display.newS ...

  5. Apache2 MPM 模式了解

    一.MPM MPM(Multi-Processing Module (MPM) implements a hybrid multi-process multi-threaded server)是Apa ...

  6. 原来在ARC下还有这么多不同?!

    1.ARC空声明变量 使用ARC的另一个优势是所有未初始化的变量默认都是"空值化"的.这意味着像下面这样的声明使用ARC编译后指向的是空值(nil): NSObject myObj ...

  7. iOS 简易环形进度条

    demo下载地址:https://github.com/haozheMa/LoopProgressDemo/tree/master ViewController中的代码 #import "V ...

  8. STM32-USB详细使用说明（转）

    源:STM32-USB详细使用说明 附件HID的双向通信 亮点STM32开发板充实了USBHID数据发送和接收例程(STM32固件库3.5 USB库3.4)

  9. a标签屏蔽href跳转

    原文地址: http://blog.163.com/huang_qy/blog/static/615601452012101411625600/ 推荐的写法: a href="javascr ...

  10. 《OpenCV3 计算机视觉--Python语言实现 第二版》源代码及纠错

    1.源代码下载地址 <OpenCV3 计算机视觉--Python语言实现 第二版>由我们翻译,英文书名<Learning OpenCV3 Computer Vision with P ...