转自：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 高级架构解析

    整体框架 使用 ZooKeeper 框架协助 RegionServer(类似于HDFS的nodemanager)用户请求从 Client 到 Zookeeper 进行判断数据属于哪一个 Region ...

  2. 【Consul】Consul架构-Consensus协议

    Consul使用Consensus协议提供一致性(Consistency)--CAP定义的一致性.Consensus协议是基于"Raft:In search of an Understand ...

  3. webapi到处excel

    最近项目用的webapi前几天做了个导出excel功能,给大家分享下,自己也记录下... 在用的过程中,可以直接请求就可以得到下载的excel文件,在实际的项目中可以通过js打开新页面,encodeU ...

  4. 在编程的时候，NotePad++ 中闪烁的光标突然有竖着闪烁的编程蓝色下划线闪烁的--小技巧告诉你-费元星

    当在写代码时出现的光标闪烁(横线闪烁) 在键盘上找 Insert ,按这个Insert就可以把横向闪烁光标( _ )修改成竖向闪烁光标样式( | ),横向光标会在你写代码的时候修改前面的代码,把光标移 ...

  5. Windows2008新建域时Administrator 帐户密码不符合要求

             Windows 2008 系统安装完毕后,(环境:在安装的时间,系统没有设置密码.做好系统后,进入制面板添加了密码或按ctrl + alt + del 设置密码后 在服务器管理-角色 ...

  6. (1)分布式下的爬虫Scrapy应该如何做-安装

    关于Scrapy的安装,网上一搜一大把,一个一个的安装说实话是有点麻烦,那有没有一键安装的?答案显然是有的,下面就是给神器的介绍: 主页:http://conda.pydata.org/docs/ 下 ...

  7. linux开发基本库

    1.ZeroMQ zmq是一个消息队列.可以在进程内.进程间.TCP.多播中,以消息为单位传输数据,而不是socket的字节流.官方主页上有下载.使用.文档,蛮全的. 常用模式有:Request-Re ...

  8. 教程｜要想Hadoop能够运行Python程序，就要会MRJob

    首先 要想Hadoop能够很流畅的Python程序,学习mrjob可能是最直接.最简单的方法了 你甚至都不要按安装部署Hadoop集群. mrjob拥有很多优秀的特性比如: 支持多步骤的MapRedu ...

  9. GraphSAGE 代码解析(二) - layers.py

    原创文章-转载请注明出处哦.其他部分内容参见以下链接- GraphSAGE 代码解析(一) - unsupervised_train.py GraphSAGE 代码解析(三) - aggregator ...

  10. Win10下Pytorch的安装和使用[斗之力三段]

    简介: 看到paper的代码是用Pytorch实现的,试图理解代码,但是看不懂,只能先学一些基础教程来帮助理解.笔记本电脑配置较低,所以安装一个没有CUDA的版本就可以了.安装完之后,就可以跟着教程边 ...