RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。

官方对requirejs的描述：

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

大致意思：

在浏览器中可以作为js文件的模块加载器，也可以用在Node和Rhino环境，balabala...。这段话描述了requirejs的基本功能"模块化加载"，什么是模块化加载？我们要从之后的篇幅中一一解释

先来看一段常见的场景，通过示例讲解如何运用requirejs

正常编写方式

index.html:

<!DOCTYPE html>

<html>

    <head>

        <script type="text/javascript" src="a.js"></script>

    </head>

    <body>

      <span>body</span>

    </body>

</html>

a.js:

function fun1(){

  alert("it works");

}

fun1();

可能你更喜欢这样写

(function(){

    function fun1(){

      alert("it works");

    }

    fun1();

})()

第二种方法使用了块作用域来申明function防止污染全局变量，本质还是一样的，当运行上面两种例子时不知道你是否注意到，alert执行的时候，html内容是一片空白的，即<span>body</span>并未被显示，当点击确定后，才出现，这就是JS阻塞浏览器渲染导致的结果。

requirejs写法

当然首先要到requirejs的网站去下载js -> requirejs.rog
index.html:

<!DOCTYPE html>

<html>

    <head>

        <script type="text/javascript" src="require.js"></script>

        <script type="text/javascript">

            require(["a"]);

        </script>

    </head>

    <body>

      <span>body</span>

    </body>

</html>

a.js:

define(function(){

    function fun1(){

      alert("it works");

    }

    fun1();

})

requirejs具有如下优点：

  1. 防止js加载阻塞页面渲染
  2. 使用程序调用的方式加载js，防出现如下丑陋的场景

require.js的使用的更多相关文章

  1. Javascript模块化编程（三）：require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  2. javascript模块化编程（三）：require.js用法

    本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...

  3. require.js工作原理（初始）

    详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...

  4. Javascript模块化编程（三）：require.js的用法(转)

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...

  5. require.js源码分析

    写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...

  6. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  7. require.js

    日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...

  8. require.js 入门笔记

    网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高. 而且长长的JS代码 ...

  9. require.js 的使用

    一.为什么要用require.js 在同一个页面要加载多个js文件时,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长: 其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比 ...

  10. require.js笔记

    笔记参考来源:阮一峰  http://www.ruanyifeng.com/blog/2012/10/javascript_module.html   1. 浏览器端的模块只能采用“异步加载”方式 = ...

随机推荐

  1. Ant安装、环境变量配置及验证

    一.安装ant 到官方主页http://ant.apache.org下载新版(目前为Ant1.8.1)的ant,得到的是一个apache-ant-1.8.1-bin.zip的压缩包.将其解压到你的硬盘 ...

  2. C#.Net 调用方法，给参数赋值的一种技巧

    C#中可以给参数赋值默认值（其实这种写法有点不太好，有时会使方法的功能太复杂了）。 但是往往有多个默认参数时，有的参数需要使用默认值，有的不使用默认值，这时正常的写法就行不通了，解决方法可参照下边的代 ...

  3. TCP、UDP、IP协议分析

    此篇文章的原创作者是:草根老师博客(程姚根) chengyaogen.blog.chinaunix.net 感谢原作者! 互连网早期的时候,主机间的互连使用的是NCP协议.这种协议本身有很多缺陷,如: ...

  4. Eclipse中实现JAVA代码的自动提示功能

    1.打开Eclipse,在.出现时进行代码提示换成任意字母+.出现时的代码提示了(.abcdefghijklmnopqrstuvwxyz):

  5. s3c2440 移值u-boot-2016.03 第4篇 支持NAND flash 识别

    1, /include/configs/smdk2440.h 中添加 #define CONFIG_CMD_NAND 编译 drivers/mtd/nand/built-in.o: In functi ...

  6. C# XmlSerializer实现序列化浅析

    C# XmlSerializer类是实现序列化的一个类,那么关于C# XmlSerializer的学习我们要掌握怎么样的操作方法呢?那么这里向你详细介绍具体的操作细节情况. C# XmlSeriali ...

  7. Eclipse建立Maven项目后无法建立src/main/java资源文件夹

    在项目上右键选择properties,然后点击java build path,在Librarys下,编辑JRE System Library,选择workspace default jre就可以了.

  8. 获取gridpanel 中 checkbox的状态

    最近一直在用extjs前天框架来写作项目,很少用到这个框架,过程中遇到很多麻烦, 可能就是一个小的问题会困扰你很长时间, example: 我做一个报表,要获取gridpanel中 checkbox的 ...

  9. java转换unicode，筛选文件中的insert语句并把日期给转换为可以直接在数据库执行的语句

    package com; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; impo ...

  10. [问题2014A08] 解答

    [问题2014A08] 解答 由假设知 \(f(A)=\mathrm{tr}(AA')\), 因此 \[f(PAP^{-1})=\mathrm{tr}(PAP^{-1}(P')^{-1}A'P')=\ ...