转自：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html

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

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

requirejs能带来什么好处

在浏览器中可以作为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教程01的更多相关文章

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

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

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

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

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

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

  4. JS模块化工具requirejs教程(一)：初识requirejs

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

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

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

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

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

  7. JavaScript 从入门到放弃（二）模块化工具requirejs

    入门教程: 1.JS模块化工具requirejs教程(一):初识requirejs 2.JS模块化工具requirejs教程(二):基本知识 描述 这几天在使用github最活跃的基于bootstra ...

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

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

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

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

随机推荐

  1. HBase java API 的使用范例(增,删,查,扫描)

    编辑pom.xml <dependency> <groupId>org.apache.hbase</groupId> <artifactId>hbase ...

  2. ORB-SLAM（五）KeyFrame类

    KeyFrame类利用Frame类来构造.对于什么样的Frame可以认为是关键帧以及何时需要加入关键帧,是实现在tracking模块中的. 由于KeyFrame中一部分数据会被多个线程访问修改,因此需 ...

  3. node 发送 post 请求 get请求。

    因为我们部门打算用node请求restful 然后慢慢替换掉服务端,以后直接请求soa的接口,让前端的数据更贴切项目,因为我们服务端接口和app公用一套,由于业务的需求和版本不统一(例如app6.4的 ...

  4. Android AppWidget偶尔无响应原因及解决办法

    Android AppWidget偶尔会出现无响应问题,如按钮点击失效,数据不更新等等. 测试后发现,一般出现在手机用清理工具(或系统自己)清理后发生,或手机重启后发生. 目前经过测试,找到的办法是把 ...

  5. 【廖雪峰老师python教程】——装饰器

    装饰器 # 一个函数装饰器的列子 def log(func): def wrapper(*args,**kwargs): print('Name=%s'%func.__name__) return f ...

  6. 问题 E: 完数与盈数

    问题 E: 完数与盈数 时间限制: 1 Sec  内存限制: 32 MB提交: 73  解决: 69[提交][状态][讨论版][命题人:外部导入] 题目描述 一个数如果恰好等于它的各因子(该数本身除外 ...

  7. ASP.NET MVC5.0 OutputCache不起效果

    按照官网文档(https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/controllers-and-routing ...

  8. 最短路径——Bellman-Ford算法以及SPFA算法

    说完dijkstra算法,有提到过朴素dij算法无法处理负权边的情况,这里就需要用到Bellman-Ford算法,抛弃贪心的想法,牺牲时间的基础上,换取负权有向图的处理正确. 单源最短路径 Bellm ...

  9. SQL SERVER 查询语句学习:CHARINDEX

    场景介绍 项目A需要一个批量删除的功能,之前我一直用SqlTransaction去处理,今天同事告诉我可以用CHARINDEX函数去解决问题,因此我今天就研究了一下. SQL语句 ---定义要删除的数 ...

  10. Python-爬取"我去图书馆"座位编码

    原文地址:http://fanjiajia.cn/2018/11/22/Python-%E7%88%AC%E5%8F%96%E2%80%9D%E6%88%91%E5%8E%BB%E5%9B%BE%E4 ...