RequireJs模块化基础

最新推荐文章于 2022-03-26 01:27:23 发布

娄笙悦

最新推荐文章于 2022-03-26 01:27:23 发布

阅读量386

点赞数 1

分类专栏： web基础

本文链接：https://blog.csdn.net/weixin_41424247/article/details/79330204

版权

web基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

序

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用，但它也可以用在其他脚本环境，就像 Rhino and Node。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

requireJs下载

github地址：https://github.com/requirejs/requirejs

bower下载：

$ bower install requirejs

requirejs的基本api

define：定义模块函数，可以定义模块的同时依赖某些模块
require：模块依赖函数
require.config ：配置参数选项
baseUrl：用于加载模块的根路径。
paths：用于映射不存在根路径下面的模块路径。
shims：配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。例如angularjs并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。
deps：加载依赖关系数组

简单演示案例

目录结构

这里写图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>requirejs模块化</title>
</head>
<body>
<h2>requirejs模块化</h2>
<button id="btn">test button</button>
<script src="lib/require.js" data-main="main.js"></script>
</body>
</html>

config.js

//配置信息
requirejs.config({
    baseUrl: './js',//配置依赖的参考路径
    paths: { //由于配置的依赖根路径为"./js",而jquery并不在这里，需要定义paths配置如下
        jquery: '../lib/jquery-1.10.1.min'
    }
});

main.js

/*
* 在没有配置baseUrl参数以前，
* 所有的依赖都是以入口html文件为根目录，
* 所以下面的依赖是未修改baseUrl路径之前的依赖
* */
require(['./config/config', './js/app']);

app.js

//依赖apple和banana模块
require(['jquery', 'apple', 'banana'], function ($, a, b) {
    console.log(a.name, b.name); //最终输出apple banana
    $('#btn').click(function () {
        alert(123);
    })
});

apple.js

//定义匿名模块，调用的时候以文件名为模块名称
define(function () {
    return {
        name: 'apple',
        price: 15
    }
});

banana.js

//定义匿名模块，调用的时候以文件名为模块名称
define(function () {
    return {
        name: 'banana',
        price: 10
    }
});

通过以上目录结构搭建项目，按F12能够看到输出了apple banana 信息，说明模块成功。
上面只是一个最简单的案例，并不足以说明requirejs的全部，更多能容请看下回分解。

娄笙悦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
RequireJs模块化基础

序RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用，但它也可以用在其他脚本环境，就像 Rhino and Node。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。requireJs下载github地址：https://github.com/requirejs/requirejsbower下载：$ bower insta...
复制链接

扫一扫