您好,现在是 2024年11月16日 12点39分 星期六

require.js简单介绍和使用

官网: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://cdn.staticfile.org/require.js/2.1.15/require.min.js" type="text/javascript" async="true"></script>
</head>
<body>
</body>
</html>

上面代码中的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请求数。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。