【前端开发教程】RequireJS安装及使用教程

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) {
    // 处理错误
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容