requireJs使用说明

想起来就搞搞

已于 2024-06-26 17:24:04 修改

阅读量170

点赞数 4

分类专栏： JavaScript 文章标签： javascript 前端

于 2024-06-23 15:17:56 首次发布

本文链接：https://blog.csdn.net/qq_32671805/article/details/139900648

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

下载requireJs(不要点download 点击版本号后的Minified按钮，否则不起作用)

http://requirejs.org/docs/download.html

说明：RequireJS 使用的是 AMD 模块开发

AMD示例
// 定义时导入需要的类库名（paths的别名）
define(['jquery'], function ($) {
    var var3info = {
        name: 'var3info name',
        add() {
            $('#btn').click(function () {
                console.log('add');
            })
        },
    }
    var var3info2 = {
        name: 'var3info2 name',
        add() {
            $('#btn').click(function () {
                console.log('add');
            })
        },
    }
    return {
        var3info,
        var3info2
    }
})

html模版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <script src="js/lib/require.js" data-main="js/script/main"></script>
</head>
<body>
<div>
    <div>
        jquery区域
    </div>
    <div id="text">
        默认text
    </div>
    <button id="btn">
        点我
    </button>
</div>
</body>
</html>

主配置文件 main.js

 require.config({
    // 加载js的目录 paths中以此目录为标准获取
    baseUrl: 'js',

    // 类库别名和路径映射
    paths: {
        jquery: 'lib/jquery-3.7.1',
        var2: 'script/var2',
        var3: 'script/var3',
    },

    // 依赖以及导出设置，key值需对应paths中的别名，用于非AMD标准的类库进行导出
    shim: {
        // 非AMD标准模块 可以指定要导出的变量，如果不指定导出，则可以通过全局变量获取
        'var2': {
            // 依赖
            deps: ['jquery'],
            // 导出变量
            exports: 'var2info2',
        },
    },

    // 插件以及其他模块配置
    map: {
        '*': {
            // 加载css的插件
            'css': 'lib/require-css'
        },
    },
});

// 非标准AMD
// 特别说明：var2info2是接收var2导出变量的别名，别名可随意命名，如果var2没有导出变量，则别名为null，当然可以使用var2内部声明的全局变量
require(['var2'], function (var2info2) {
    // 获取导出的var2info2
    console.log(var2info2);
    // 其实var2的变量是全局性的，也可以直接获取var2中的所有变量
    console.log(var2info);
    console.log(var2info2);
})

// 标准AMD 只能用对应变量获取
require(['var3'], function (var3) {
    // 使用var3来接收导出的var3
    console.log(var3);
})

var2模块非标准AMD模块

// 此模块需要jQuery 因此需要在配置shim中配置依赖
var var2info = {
    name: 'var2info name',

    add() {
        $('#btn').click(function () {
            console.log('add');
        })
    },
}

var var2info2 = {
    name: 'var2info2 name',

    add() {
        $('#btn').click(function () {
            console.log('add2');
        })
    },
}

var3模块标准AMD模块

// 定义时导入需要的类库名（paths的别名）
define(['jquery'], function ($) {
    var var3info = {
        name: 'var3info name',
        add() {
            $('#btn').click(function () {
                console.log('add');
            })
        },
    }
    var var3info2 = {
        name: 'var3info2 name',
        add() {
            $('#btn').click(function () {
                console.log('add');
            })
        },
    }
    return {
        var3info,
        var3info2
    }
})