随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。

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

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();
})

浏览器提示了"it works",说明运行正确,但是有一点不一样,这次浏览器并不是一片空白,body已经出现在页面中,目前为止可以知道requirejs具有如下优点:

  1. 防止js加载阻塞页面渲染
  2. 使用程序调用的方式加载js,防出现如下丑陋的场景
<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>

JS模块化工具requirejs教程(一):初识requirejs的更多相关文章

  1. 【转】JS模块化工具requirejs教程(一):初识requirejs

    随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...

  2. 【转】JS模块化工具requirejs教程(二):基本知识

    前一篇:JS模块化工具requirejs教程(一):初识requirejs 我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等. 基 ...

  3. require.js实现js模块化编程(二):RequireJS Optimizer

    require.js实现js模块化编程(二):RequireJS Optimizer 这一节,我们主要学习一下require.js所提供的一个优化工具r.js的用法. 1.认识RequireJS Op ...

  4. JS模块化工具require.js教程(二):基本知识

    前一篇:JS模块化工具我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,r ...

  5. 【requirejs】JS模块化工具requirejs教程

    初识requirejs 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元 ...

  6. JS模块化工具requirejs教程(二):基本知识

    基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...

  7. JS模块化工具requirejs教程02

    基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...

  8. JS模块化工具requirejs教程01

    转自:http://www.runoob.com/w3cnote/requirejs-tutorial-1.html 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签 ...

  9. JS模块化工具require.js教程(一):初识require.js

    随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...

随机推荐

  1. Java中Map的用法

    Map的一般用法 1.声明一个Map : Map map = new HashMap(); 2 .向map中放值 ,注意: map是key-value的形式存放的,如: map.put("s ...

  2. 破解ckfinder2.3 去除版本号和标题提示

    1.找到ckfinder.js 2.找到这样的字符串 <h4 class='message_content'></h4> 3.改成这样 <h4 style='displa ...

  3. jquery.cookie.js 配置

    一定要写入cookies路径 一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 jquery.c ...

  4. 已知球面上A点经纬度和到B点的方位角及球面距离

    From: http://blog.sina.com.cn/s/blog_53d163eb0100udtv.html

  5. POJ 2352 【树状数组】

    题意: 给了很多星星的坐标,星星的特征值是不比他自己本身高而且不在它右边的星星数. 给定的输入数据是按照y升序排序的,y相同的情况下按照x排列,x和y都是介于0和32000之间的整数.每个坐标最多有一 ...

  6. jxl 导入excel以及日期格式处理

    先建一个excel文件abc.xls.放到E盘根目录下.形如下: name secondName hot1 leave1 hot2 leave2 然后在数据库里建表. CREATE TABLE `na ...

  7. access的查询中具体到时间的时候使用“#”

    如果不使用#的情况下会导致出现操作符丢失的错误提示,因此再比较时间的时候将日期和时间用#包括起来: 例如: SELECT *FROM ms_record where dateTo > #2015 ...

  8. 《Code Complete》ch.23 调试

    WHAT? 调试——发现错误的一种手段 WHY? 相对于不善于调试的程序员,善于调试的程序员只需要前者1/20的时间就可以找出问题所在 HOW? 科学的调试方法 把错误的发生稳定下来:假设-证实/证伪 ...

  9. Android:使用adb命令行导出[数据库db3]文件

    cmd->cd到:D:\tools\adt-bundle-windows-x86_64-20140321\adt-bundle-windows-x86_64-20140321\sdk\platf ...

  10. CCF真题Z型输出

    #include<stdio.h> #include<iostream> #include<string.h> #include<algorithm> ...