使用requirejs编程实现模块化

最新推荐文章于 2025-05-28 14:32:59 发布

原创最新推荐文章于 2025-05-28 14:32:59 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#模块化 #requirejs

方法-技巧与案例专栏收录该内容

28 篇文章

订阅专栏

本文介绍RequireJS的基本使用方法，包括如何通过命令行或官网下载，如何定义和加载模块，以及通过两个案例展示了不同场景下的配置和依赖管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载

命令行下载：bower install requirejs 或者 npm install requirejs
官网下载点击下载requirejs

主要方法

define定义模块
require 加载模块

案例一

目录结构

index.html
main.js
scripts
- apple.js
- student.js

index.html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs模块化编程</title></head>
<body>
<h3>requirejs模块化编程</h3>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

main.js部分

//配置依赖路径
requirejs.config({
    baseUrl: './scripts'
});

//依赖student模块，并调用该模块eat()方法
require(['student'], function (stu) {
    stu.eat()
});

apple.js部分

//apple为当前模块名
define('apple', function () {
    return {
        name: 'apple fruits'
    }
});

student.js部分

//apple为依赖模块名
//student为当前模块名
define('student', ['apple'], function (apple) {
    return {
        eat: function () {
            console.log(apple.name);
        }
    }
});

特点：

模块名必须与文件名相同
其实模块名可以不写的

案例二

目录结构

index.html
main.js
scripts/
- appleModule.js
- studentModule.js
bower_components/jquery/dist/
- jquery.min.js
index.html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs模块化编程</title></head>
<body>
<h3>requirejs模块化编程</h3>
<div id="box">Lorem ipsum dolor sit amet.</div>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

main.js部分

//配置项，在主入口js文件配置即可，其他模块都可调用paths模块
requirejs.config({
    //所有的require依赖根路径都是baseUrl
    baseUrl: './scripts',
    //路径可以是数组，如果第一个加载成功则结束，否则加载后面的文件
    paths:{
        'jquery': [
            '../bower_components/jquery/dist/jquery.min', //本地加载jquery
            'http://code.jquery.com/jquery-1.12.4' //cdn加载jquery
        ],
        'student': 'studentModule',
        'apple': 'appleModule'
    }
});

//依赖config配置项命名的student模块
require(['student'], function (stu) {
    //调用student模块的eat()和say()方法
    stu.eat();
    stu.say();
});

studentModule.js部分

//注意，这里并没有给模块命名，所以主入口可以随便定义模块名
//依赖jquery和apple模块
define(['jquery', 'apple'], function ($, apple) {
    const student = {};
    student.name = 'zhangsan';
    student.eat = function () {
        console.log(this.name + ' like ' + apple.name);
    };
    student.say = function () {
        var str = 'I eat '
            + apple.num + apple.unit + ' ' + apple.name
            + ', and pay ' + apple.total().toFixed(2) + 'RMB everyday.';
        $('#box').text(str);
    };
    //总之，返回一个对象就行
    return student;
});

appleModule.js部分

//注意，这里并没有给模块命名，所以主入口可以随便定义模块名
define(function () {
    const apple = {};
    apple.name = 'apple';
    apple.num = 5;
    apple.price = 10;
    apple.unit = 'kg';
    apple.total = function () {
        return this.num * this.price
    };
    //总之，返回一个对象就行
    return apple;
});