使用RequireJS库,进行代码文件依赖管理
一、关键字
存在依赖、手动线性方式管理文件之间的依赖、潜在关联性
二、了解 require.js 库
简单介绍:
- require.js 是一款JavaScript模块加载器;
- require.js库 是基于异步模块定义(asynchronous module definition,简称AMD)的API,在IT业内获得了很高的重视 && 应用!
- 应用网站举例:BBC、HallMark、Etsy、Instagram、点击查看更多
优点:
- 提升网站性能
- 在请求时才实现异步加载脚本文件
三、代码VS性能体验
1. 首先,下载资源:
- require.js官网下载
- jquery-1.11.1.js 下载
- validation-plugin.js 下载
jQuery插件,用于表单验证
- main.js
主应用脚本文件
附参考:
本案例全部代码文件 · 点击查看下载
2. 然后,将所有相关文件组织放入较为直观的目录结构中:
目录截图,比如本例:
3. 加载、初始化require.js
双击index.html
文件,在HTML文件的闭标签</body>
之前,添加代码引入require.js
,如下:
<script src="scripts/require.js" data-main="scripts/main"></script>
注意:
data-main
属性,可以指定项目的主营用脚本的存放位置,即路径;
该属性默认引入文件的后缀名就是.js
,所以可以省略不写main.js
的文件名称中的后缀.js
;- 当require.js初始化完成之后,它会根据data-main属性的值,自动、异步加载该值对应文件所需引用的其他文件;
所以在整个页面中只需要用到一个<script>
标签;
截图:
以上就是关于“ RequireJS代码文件依赖管理 - 入门篇 ” 的全部内容。