学会使用requireJS

来源：互联网发布：朗读古兰经软件下载编辑：程序博客网时间：2024/06/11 02:08

学习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>

运行结果

0 0