RequireJS和AMD规范
RequireJS一个工具库,主要用于客户端的模块管理.通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。
一、安装
下载minified的就好
右击
→另存为
将文件保存到项目的资源库中,文件名称一般命名为require.min.js
按照tag选择需要的版本
将下载的文件保存到项目的资源库中,文件名称一般命名为require.js
下载require.js文件
浏览器支持
浏览器支持
二、使用
1.html中
<body>
<!-- 一些内容 -->
<!-- body末尾引入require.js模板 -->
<script type="text/javascript" data-main="scripts/login.js" src="scripts/lib/require.min.js"></script>
<!-- 模版 start -->
</body>
该script
中
data-main
指定主代码所在的脚本文件
src
指定requirejs所在的脚本文件
2.js中
/** 配置RequireJS
* @config 用于RequireJS的配置
* @param {String} baseUrl 参数指定本地模块位置的基准目录,即本地模块的路径是相对于哪个目录的,该属性通常由require.js加载时的data-main属性指定。
* @param {Objec} paths 指定各个模块的位置,这个位置可以是同一个服务器上的相对位置,也可以是外部网址,可以为每个模块定义多个位置,如果第一个位置加载失败,则加载第二个位置
* @param {Objec} shim 有些库不是AMD兼容的,这时就需要指定shim属性的值。shim可以理解成“垫片”,用来帮助require.js加载非AMD规范的库。
*/
require.config({
baseUrl: "scripts",
paths: {
jquery: "lib/jquery.min",
cookie: "lib/jquery.cookie",
template: "lib/template.min",
pagination: "lib/pagination",
},
shim: {
base: ["jquery"],
pagination: ["jquery", "template"] //pagination依赖于jquery与template,需要引入js源文件
}
});
/** 调用模块
* @require 用于客户端的模块管理,define和require这两个定义模块、调用模块的方法,合称为AMD模式
* @param {Array} Array 第一个参数,是一个表示依赖关系的数组
* @param {function} function 第二个参数是一个函数
* @param {function} function 第三个参数(可选),即错误处理的回调函数
*/
require(["jquery", "cookie"], function ($) {
// 往下-自定义代码内容
var demo = {
init: function () { }
};
demo.init();
// 往上-自定义代码内容
}, function (err) {
// 处理错误
});