文件管理_JS模块化工具requirejs教程(一)：初识requirejs

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

它是一个非常紧凑的模块加载框架，也是 AMD 规范最好的实现者之一。最新版本压缩后只有 14K，非常轻量。它还可以同时与其他框架协同工作，使用它绝对能提高你的前端代码质量。

能带来什么好处

游戏官方说明：

是一个文件和。它用于在线使用，但它可以在其他平台上使用，如 Rhino 和 Node。使用类似的将提高代码的速度和速度。

意义：

它可以作为浏览器中 js 文件的模块加载器，也可以在 Node、Rhino 环境中使用。本段描述了基本功能“模块化加载”。什么是模块化加载？我们将在后面章节逐一讲解。

让我们看一个常见的场景，并通过示例解释如何使用它

正常书写方法

索引.html：

    
        
    
    
      body
    

a.js：

function fun1(){
  alert("it works");
}
fun1();

也许你更喜欢这样写

(function(){
    function fun1(){
      alert("it works");
    }
    fun1();
})()

第二种方法使用块作用域来声明，防止全局变量被污染，本质是一样的，在运行上面两个例子的时候，大家可能注意到，执行alert的时候，html内容是空白的，也就是body没有显示出来，只有点击确定的时候才会出现，这就是JS阻塞了浏览器渲染的结果。

写作

当然你得先去网站下载js-->

索引.html：

    
        
        
    
    
      body
    

a.js：

define(function(){
    function fun1(){
      alert("it works");
    }
    fun1();
})

浏览器提示“it works”，说明运行正确，但是有一点不同，这次浏览器不是空白的，页面上已经出现了body，至此我们知道它有以下几个优点：

防止js加载阻塞页面渲染使用程序调用加载js可以防止出现以下丑陋的场景

代码的具体含义和其他特性将在后面的《JS模块化工具教程（二）：基础知识》中讲解。