requirejs 教程(一)

前言

随着nodejs的发展，前端的自动化构建工具也越来多。像grunt、webpack、glup等等工具都实现了前端的打包和编译。当然，在开发过程中，就顺带实现了模块化的编程，那么，今天我们要说的是怎么不通过这些自动化构建工具来实现前端的模块化编程。在实现前端模块化编程的同时，各个框架的作者也实现了一定的规范。比如AMD和CMD规范等等。requirejs就是实现的AMD规范。而且是一款比较好的模块加载库。我们遵循这样的规范就能够实。这样做的好处是实现了js文件的的按需加载，而且还可以让我们少些很多script 标签。更加规范我们的开发方式。以便于以后别人能够尽快的接受我们自己写的代码。而且通过requirejs 加载的JS资源文件都是异步，也就是说在加载js的同时是不影响页面的其他流程的。

加载资源文件

新建index.html文件。在页面中引入requirejs,为了简单起见。我这儿引用了bootstrap cdn服务器上的静态资源文件

<script src="https://cdn.bootcss.com/require.js/2.3.3/require.min.js"></script> <!--引入cdn服务器上的静态资源文件-->

在引入require.min.js文件之后。整个windows对象就有require这个方法。我们可以通过这个方法来加载其他的js文件。 在与index.html 同级的目录下新建index.js 文件。并且在index文件里面不通过写script 标签来加载这个js文件。注意require方法传入的是个数组参数，因为一个页面很少只有一个资源文件。所以一般来说都是以数组的形式进行传参。

require(["./index.js"]);<!--加载index.js文件-->//index.jsalert("hello ! I running.");

在浏览器中运行即可看到效果。

当然，在实际的开发中，我们不可能就这么来加载我们资源文件。这样加载和直接写script标签好像没什么区别。因为我在index.html文件里面要写一抹多的 require([“./index.js”,”…”,”…”])。在另外一个页面也是要写这个东西。这样冗余代码也就出来了。那么我怎么才能做到资源的复用呢？

答案就是require给我提供了一个配置文件。通过这个配置文件我们可以配置其他资源文件的路径。

   require.config({      baseUrl:"./", //paths 文件的base路径 ./表示当前文件夹下      paths:{         "jqeury":"https://cdn.bootcss.com/jquery/3.2.1/jquery.min",         "index":"./index"//注意不是index.js     }});     require(["index"],function(){        //当index.js加载完成之后所执行的回调函数     });

请注意通过require.config来加载的js资源文件名字后面没有.js文件后缀名。因为requirejs 这个框架会帮我自动加上.js的后缀名字。当然，如果我们手动加上.js文件这个后缀名字的时候。那么requirejs就不会以baseUrl为基本路径来查找js文件。他会以全路径的方式来进行查找。

定义模块

在requirejs中。提供了模块的定义。我们遵循该定义能够进行模块化的开发。require通过define这个方法来进行模块的定义。该方法的传入参数以一个数组和function 。function 会被requirejs 调用运行，将该function运行之后的返回值传回去(至于传哪儿去我们等会再讲)。数组表示定义该模块所需要的依赖。比如该模块依赖jquery,那么数组里面就会导入jquery。

require.config({      baseUrl:"./", //paths 文件的base路径 ./表示当前文件夹下      paths:{          "index":"index",         "jqeury":"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"//全路径加上.js文件的后缀名称     });

//index.jsdefine(["jquery"],function($){    return $;//$就是加载jquery完成之后所传入得值在这里我们就可以用$了。如果不定$来接受jquery 返回的值。那么运行就会报$ undefined.这个也间接性的说明index模块依赖于jquery模块});

这样我们就定义完成一个index模块，并且在require.config()对index的路径进行了配置。然后接下来我们来进行index.js模块的加载.

require(["index"],function(index){    console.log(index);})

这样通过requirejs 就实现了一个简单的模块加载。从上面可以分析到，在通过加载index.js 的时候并没有进行script 标签的书写,而是通过配置文件的形式来进行加载。而且代码的复用性大大的提高了。模块与模块之间的依赖性更加的清楚明了。