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

相关文章
|
1月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
12 0
|
2月前
|
JavaScript 前端开发 开发者
js模块化的好处
js模块化的好处
14 0
|
3月前
|
JavaScript 前端开发 程序员
程序员必备技能之JS模块化,改变你的JavaScript开发方式!(一)
程序员必备技能之JS模块化,改变你的JavaScript开发方式!
|
3月前
|
JavaScript 前端开发 测试技术
JavaScript的基本规范
JavaScript的基本规范
|
4天前
|
缓存 JavaScript 前端开发
JavaScript模块化:CommonJS与ES Modules的对比与使用
【4月更文挑战第22天】本文探讨了JavaScript模块化的两种规范——CommonJS和ES Modules。CommonJS适用于Node.js,通过`require`同步加载模块,而ES Modules(ES6模块)用于前端,支持异步加载和静态导入导出。CommonJS有缓存,ES Modules无缓存。在选择时,Node.js环境常用CommonJS,但趋势正转向ES Modules,前端项目推荐使用ES Modules以利用其优化性能的优势。
|
1月前
|
JavaScript 前端开发
js开发:请解释什么是模块化(modularization),并说明如何在JavaScript中实现模块化。
模块化将复杂系统拆分为松散耦合的模块,提高代码可读性、可维护性、可复用性和可扩展性。JavaScript模块化历经CommonJS(Node.js中常见,使用`require()`和`module.exports`)、AMD(RequireJS,异步加载,`define()`和`require()`)和ES6 Modules(官方标准,`import`和`export`)三个阶段。打包工具如Webpack、Rollup处理兼容性问题,使模块化代码能在各种环境中运行。
|
5月前
|
JavaScript 前端开发 UED
JavaScript模块化:提高代码可维护性和可重用性的利器
JavaScript模块化:提高代码可维护性和可重用性的利器
62 0
|
1月前
|
JavaScript 前端开发
JavaScript模块化的那些事最骚操作
JavaScript模块化的那些事最骚操作
|
3月前
|
存储 传感器 JavaScript
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(4)
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(4)
78 0
|
3月前
|
存储 JavaScript 前端开发
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(3)
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(3)
50 0