首页 > 代码库 > require.js简单介绍和使用

require.js简单介绍和使用

2024-07-31 08:50:54   219人阅读

官网：http://www.requirejs.org/

RequireJS是一个JavaScript文件和模块载入器。

还原一下需求的来源：一个网页开始的时候，所有js代码都写在一个文件里面，只要加载这一个就够了。随着应用越来越复杂，代码越来越多，一个文件不够了，由于各种原因必须分成多个文件，还有用到其他的一些框架，这样就必须加载多个js文件。有个问题就是加载的时候，浏览器会停止网页渲染，加载越多而失去响应的时间就越长；另外，js文件之间存在依赖关系，因此要保证加载顺序，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。为了解决以上问题，于是像require.js这样的项目就诞生了。

使用示例：

<!doctype html>
<html>
<head>
<title>requirejs使用</title>
<meta charset="UTF-8">
<script data-main="main" src=http://www.mamicode.com/"http://cdn.staticfile.org/require.js/2.1.15/require.min.js" type="text/javascript" async="true"></script>>
上面代码中的script标签data-main属性是在require.js加载后要载入的js文件（main.js）
接下来是main.js，
require.config({
   paths: {
     jquery:[
       ‘http://cdn.staticfile.org/jquery/1.11.1/jquery.min‘,
       ‘http://cdn.bootcss.com/jquery/1.11.1/jquery.min‘
    ]
  }
});
require([‘jquery‘],
  function(_jj) {
     alert(_jj.fn.jquery);
  }
);
使用require.config()方法，可以对模块的加载行为进行自定义。require.config()参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。这里直接是引用的线上的地址（去掉.js后缀）。
require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。require()异步加载jquery，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
如果，main.js只是，
require([‘jquery‘],
   function(_jj) {
     alert(_jj.fn.jquery);
  }
);
这样的话，默认它会去加载与main.js在同一个目录的jquery.js文件。如果不在同一目录，那么用require.config()方法是有必要的，还有可以用baseUrl改变基目录。
这里简要说下还有个shim参数，从理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但更多的流行库都没有，那么这样的模块在用require()加载之前，要先定义它们的一些特征。
最后，require.js要求每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具r.js，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。

require.js简单介绍和使用


联系
我们