我是靠谱客的博主 冷艳雨,这篇文章主要介绍关于RequireJS的简单介绍即使用方法,现在分享给大家,希望可以做个参考。

RequireJS介绍

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

兼容性

浏览器(browser) 是否兼容
IE 6+ 兼容 ✔
Firefox 2+ 兼容 ✔
Safari 3.2+ 兼容 ✔
Chrome 3+ 兼容 ✔
Opera 10+ 兼容 ✔

优点

实现js文件的异步加载,避免网页失去响应

管理模块之间的依赖性,便于代码的编写和维护

快速上手

step 1

引入require.js

require()中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义

第二个参数是回调函数(callback),可以用来解决模块之间的依赖性

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["js/a"], function(){ alert("load finished"); }); </script> </head> <body> body </body> </html>

step 2

require.config是用来配置模块加载位置

如果固定的位置比较长,可以使用 baseUrl : "js",则paths中就不用写js了

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require.config({ paths : { "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"], "a" : "js/a" } }); require(["jquery", "a"], function(){ alert("load finished"); }); </script> </head> <body> body </body> </html>

step 3

step 2中重复出现了require.config配置,如果每个页面中都加入配置,就显得不大好了,requirejs提供了一种叫"主数据"的功能

创建一个main.js把step 2中require.config放到main.js中

复制代码
1
<script data-main="js/main" src="js/require.js"></script>

step 4

通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : ["jquery"] } }); require(["jquery", "jquery.form"], function($){ $(function(){ $("#form").ajaxSubmit({...}); }) });

以上就是小编为大家带来的关于RequireJS的简单介绍即使用方法全部内容了,希望大家多多支持脚本之家~

最后

以上就是冷艳雨最近收集整理的关于关于RequireJS的简单介绍即使用方法的全部内容,更多相关关于RequireJS内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(209)

评论列表共有 0 条评论

立即
投稿
返回
顶部