您的位置：首页 > 产品设计 > UI/UE

学会使用requireJS

2017-02-20 11:42 459 查看

学习requireJS的中文网站——RequireJS中文网

百科：requirejs是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代码独立成文件和模块，同时管理每个模块间的依赖关系。RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

总结百科上的介绍，requireJS的核心任务便是解决js文件的模块化和依赖关系

我们以一个简单的demo为例，从require的配置文件开始说（这里我定义为main,js）

main.js

require.config({
//默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。
baseUrl:'../requireJS',//逗号敢不敢别再忘
paths:{
'jquery':'lib/jquery',
'bootstrap':'lib/bootstrap'

},
/*
* shim实现绑定文件的依赖关系，
* 以下为例，bootstrap中用到jQuery，所以bootstrap依赖jQuery，
* 通过下面的语句将建立起两者的依赖关系，系统加载bootstrap之前将先加载jquery
*/
shim:{
'bootstrap':{
'deps':['jquery']
}
}
})

使用require.config()函数来定义配置文件内容，baseUrl是基本路径，paths在baseUrl的基础上找到最终路径，shim定义依赖关系

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>my requireJS demo</title>
<!--也可以这样写：<script data-main='lib/main' src='lib/require.js'></script>这样写必须保证require.js加载完毕再加载main.js-->
 <script src="lib/require.js"></script>
<script src="lib/main.js"></script>
</head>
<body>
<div id="x" style="width: 40px;height: 20px;cursor: pointer;text-align: center;">
你好
</div>
<script type="text/javascript">
/*
* require最大的好处就是实现模块化，按需加载
*/
require(['jquery'], function($) {
$('#x').click(function() {
$(this).css({
'background-color': 'red',
'color': 'white'
})
})
})
</script>
</body>
</html>

运行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript js require.js 模块化开发 HTML

相关文章推荐

新的分享

章节导航