首页 技术 正文
技术 2022年11月14日
0 收藏 818 点赞 4,354 浏览 1418 个字

require.js的诞生,就是为了解决这两个问题:
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。

实例下载:require.js应用实例

一、require.js的加载文件

<script src="js/require.js" data-main="src/main.js"></script>

由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。

二、主模块的写法
main.js,我把它称为”主模块”,所有代码都从这儿开始运行。

require(['模块依赖'],, function (回调函数){});

实例:
require([‘jquery’], function ($){ })

三、config配置

require.config({
baseUrl: '路径',
    paths: {
'标识':'路径'
    }});

四、AMD模块的写法

define(function (){ });

如果模块存在依赖,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。

define(['lib'], function(myLib){ });

当require()函数加载上面这个模块的时候,就会先加载依赖文件lib.js。

五、require.js插件
require.js还提供一系列插件,实现一些特定的功能。 插件下载地址:
https://github.com/jrburke/requirejs/wiki/Plugins


实际开发应用

文件:

require.js

jquery.js

main.html

main.js

one.js

three.js

two.js

文件代码:

init.html

<script src="js/require.js" data-main="src/main" type="text/javascript"></script>

main.js

require.config({
//baseUrl: ".",
paths: {
"jquery": "/script/jquery"
}
}); //main.js 调用依赖模板,次处为入口程序main()
require(['one', 'two', 'three'], function (one, two, three) {
document.write(one.add(1, 2));
document.write('</br>');
document.write(two.add(3, 4));
document.write('</br>');
document.write(three);
});

one.js

//定义非依赖模板
define(function () {
var add = function (x, y) {
return "one.js模板,实现x+y=" + x + y;
};
return {
add: add
};
});

two.js

//定义依赖模板
define(['one'], function (one) {
var add = function (x, y) {
return "two.js模板,依赖one.js模板,x+y=" + one.add(x, y);
};
return {
add: add
};
});

three.js

define(['jquery'], function ($) {
return "three.js模板,实现调用jquery.js类库:" + $.trim('jquery trim');
});
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,492
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,494
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,132
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,295