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

最近开始自学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. 什么是deferred对象

    $.when().done().then()的用法  http://www.cnblogs.com/tiancai/p/5817996.html jQuery的开发速度很快,几乎每半年一个大版本,每两 ...

  2. Ajax 下拉加载数据

    $(document).scroll(function() { var pageHeight = $(document).height()-$(window).height(); var bodySc ...

  3. 多线程编程--- __thread关键字

    __thread是GCC内置的线程局部存储设施,存取效率可以和全局变量相比.__thread变量每一个线程有一份独立实体,各个线程的值互不干扰.可以用来修饰那些带有全局性且值可能变,但是又不值得用全局 ...

  4. Java内存回收 - 落日之心的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. (中等) HDU 3416 Marriage Match IV，SPFA+SAP。

    Description Do not sincere non-interference. Like that show, now starvae also take part in a show, b ...

  6. 鸽笼原理的运用HDU1205

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1205 题目解析:开始没看清题,WA了一发,以为只要最大的次大的差2就是NO,后来仔细看过之后才发现,, ...

  7. 手机端 H5上传头像

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Keil STM32调试，使用ST-Link下载程序时提示“flash timeout.reset the target and try it again”

    参考: 很郁闷,买来没多久的 STM32F4-DISCOVERY 就挂了? STM32F103RB   Jlink调试的时候出现flash timeout.reset the target and t ...

  9. 菊花加载第三方--MBprogressHUD 分类： ios技术 2015-02-05 19:21 120人阅读 评论(0) 收藏

    上次说到了网络请求AFN,那么我们在网络请求的时候,等待期间,为了让用户不认为是卡死或程序出错,一般都会放一个菊花加载,系统有一个菊花加载类叫UIProgressHUD.但是我今天要说的是一个替代它的 ...

  10. 安卓 异步线程更新Ui

    异步跟新UI: 1.handler+Thread(runnable):如果handler和Thread都写在了一个Java文件中,就不说了,如果runnable定义在了一个单独的类文件中,可以通过在构 ...