JS模块化之AMD规范

最新推荐文章于 2024-04-22 09:09:12 发布

耶瞳

最新推荐文章于 2024-04-22 09:09:12 发布

阅读量1.5k

点赞数 10

分类专栏： js 文章标签： js 模块化 AMD

本文链接：https://blog.csdn.net/tongkongyu/article/details/117388201

版权

js 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

AMD概述

AMD说明：
    AMD：Asynchronous Module Definition(异步模块定义)
    专门用于浏览器端，模块的加载是异步的
基本语法：
    定义暴露模块：
        1. 没有依赖的模块：
            define(function(){
                return 模块
            })
        2. 定义有依赖的模块：
            define(['module1','module2'],function(m1,m2){
                return 模块
            })
    引入使用模块：
        require(['module1','module2'],function(m1,m2){
            使用m1/m2
        })
实现(浏览器端)：
    使用库： Require.js

没有AMD之前的模块化编程

目录结构
dataService.js：(用于提供数据)

// 定义一个没有依赖的模块
(function(window){
    let name = 'dataService.js';
    function getName(){
        return name;
    }
    window.dataService = {getName};
})(window)

alerter.js: (用于使用数据)

// 定义一个有依赖的模块
(function (window, dataService) {
    let msg = 'alerter.js';
    function showMsg() {
        console.log(msg,dataService.getName());
    }
    window.alerter = {showMsg};
})(window, dataService)

app.js: (作为根模板)

(function(alerter){
    alerter.showMsg();
})(alerter)

index.html: （在浏览器端展示,引用顺序不能乱）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/dataService.js"></script>
    <script src="./js/alerter.js"></script>
    <script src="./app.js"></script>
</body>
</html>

代码总览：
这种方法虽然可以有效避免变量名污染，但各模板间的依赖关系有可能极为复杂，导致js文件引入出现问题。

使用AMD的模块化

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一,因此以下使用RequireJS展示。
目录结构：
目录展示
dataService.js:

// 定义没有依赖的模板
define(function() {
    let name = 'dataService.js';
    function getName() {
        return name;
    }
    // 暴露模块
    return {getName};
});

alerter.js:

// 定义有依赖的模块
define(['dataService','jquery'], function(dataService, $) {
    let msg = 'alerter.js';
    function showMsg() {
        console.log(msg, dataService.getName());
    }
    $('body').css('background', 'pink');
    // 暴露模块
    return {showMsg};
});

app.js:

(function(){
    requirejs.config({ // 参数配置
        // baseURL: 'js/', 基本路径，若开启，则路径为baseURL+paths
        paths: { // 配置路径,用以寻找模块
            dataService: './modules/dataService', // 此处不加.js后缀，因为运行时默认会加上
            alerter: './modules/alerter',
            jquery: './libs/jquery-2.2.4.min'
        }
    })

    requirejs(['alerter'], function(alerter){
        alerter.showMsg();
    })
})()

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- data-main引入入口js文件，src引入require.js库 -->
    <script data-main="./js/app.js" src="./js/libs/require.min.js"></script>
</body>
</html>

代码总览：

更多相关内容大家可以前往我的个人博客浏览：eyes++的个人空间

耶瞳

关注

10
点赞
踩
11

收藏

觉得还不错? 一键收藏
4
评论
JS模块化之AMD规范

AMD概述AMD说明： AMD：Asynchronous Module Definition(异步模块定义) 专门用于浏览器端，模块的加载是异步的基本语法：定义暴露模块： 1. 没有依赖的模块： define(function(){ return 模块 }) 2. 定义有依赖的模块： define(['module1','module2'],f
复制链接

扫一扫

专栏目录