JS模块化(二):AMD规范(require.js)

简介: JS模块化(二):AMD规范(require.js)

AMD规范也可以称之为require.js

目录结构

image.png

无依赖模块写法

// 这是一个没有依赖的模块
define(function() {
    let name = '这是没有依赖的模块';
    function getName() {
        return name;
    }
    // 暴露模块
    return {getName};
})

有依赖模块的写法

// 下面的是有依赖的模块
define(['dataService'],function(dataService) {
    let msg = "alert.js";
    function showMsg() {
        console.log(msg,dataService.getName());
    };
    // 暴露模块
    return {showMsg};
})

主函数(汇总模块)

(function() {
    requirejs.config({
        baseUrl: './js',
        paths: {
            dataService: './modules/dataService',
            alerter: './modules/alerter'
        }
    });
    requirejs(['alerter'],function(alerter) {
        alerter.showMsg();
    })
})()

浏览器执行网页

<script data-main="./js/main.js" src="./js/libs/require.js"></script>

require.js下载网址

github.com/requirejs/r…

注意事项

  • 尤其要注意地址路径是否正确。

require.js引入第三方模块

  • 下面我们以jquery这个库为例:
  1. 在libs下添加库文件

image.png

在需要暴露的模块处添加参数

image.png

相关文章
|
4月前
|
JavaScript UED
js之模块化(2)
js之模块化(2)
|
5月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
63 3
|
4月前
|
JavaScript 前端开发 开发者
js之模块化(1)
js之模块化(1)
|
3月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
60 0
|
4月前
|
JavaScript
js之模块化(3)
js之模块化(3)
|
5月前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
5月前
|
前端开发 JavaScript
前端必会的JavaScript模块化
【8月更文挑战第3天】JavaScript模块化
41 1
|
5月前
|
JavaScript 前端开发
JS模块化编程规范1——require.js
JS模块化编程规范1——require.js
48 0
|
5月前
|
存储 缓存 JavaScript
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
39 0
|
6月前
|
JavaScript 前端开发
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
75 1

热门文章

最新文章