转自：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. linux c fprintf()

    #include<stdio.h> #include<unistd.h> #include<time.h> int main(int argc,char *argv ...

  2. 用 Qt 控制 Nikon 显微镜的电动物镜转盘

    用 Qt 控制 Nikon 显微镜的电动物镜转盘 最近的一个项目,用到了一台 Nikon 的金相显微镜,并且配了个电动的物镜转盘.为了控制这个电动物镜转盘,我折腾了差不多有4-5天.中间遇到了各种问题 ...

  3. 蓝牙技术（BlueTooth）——（一）

    一,概述 蓝牙是一种短距离的无线通信技术标准. 蓝牙协议分为4层,即核心协议层,电缆替代协议层,电话控制协议层,和      采纳的其它协议层. 这4中协议中最重要的是核心协议.蓝牙的核心协议包括基带 ...

  4. 从C到C++ （2）

    从C到C++ (2) 一.    C++中增加了作用域标示符 :: 1.     用于对局部变量同名的全局变量进行访问. 2.     用于表示类成员. 二.    new.delete运算符 1.  ...

  5. 「日常训练」「小专题·USACO」 Wormholes（1-4）

    题意 之后补充. 分析 这是一条很好的考察递归(或者说搜索)的题目.它的两个过程(建立初步解,验证)都用到了递归(或者说运用递归可以相当程度的减少代码量). 具体实现见代码.注意,为了使用std::p ...

  6. Bellman_ford标准算法

    Bellman_ford求最短路可以说这个算法在某些地方和dijkstra还是有些相似的,它们的松弛操作基本还是一样的只不过dijkstra以图中每个点为松弛点对其相连接的所有边进行松弛操作 而Bel ...

  7. 扩展欧几里得 求ax+by == n的非负整数解个数

    求解形如ax+by == n (a,b已知)的方程的非负整数解个数时,需要用到扩展欧几里得定理,先求出最小的x的值,然后通过处理剩下的区间长度即可得到答案. 放出模板: ll gcd(ll a, ll ...

  8. JAVA_四大代码块_普通代码块、构造代码块、静态代码块、同步代码块。

    普通代码块 在方法或语句中出现的{}里面的内容就被称为普通代码块,普通代码块和一般的语句执行顺序一样,由他们在代码中出现的次序决定,即--"先出现先执行". 但是不同的普通代码块即 ...

  9. 【工具学习】——Maven的安装与配置

    [含义] 什么是构建? 构建,英文build.构建包括编译.运行.生成文档.打包.部署等等工作内容,如果我们每天手工去干这些事情,那会浪费很多的时间.因此,构建管理工具应运而生. maven,作为项目 ...

  10. vue中表单的动态绑定

    有一个表单: <el-form :model="configForm"> </el-form> 如果configForm初始化为{},此对象是动态变化的,如 ...