当前位置: 首页 > news >正文

工具链和其他-异步模块加载

目录

CMD/AMD

Asynchronous Module Definition(AMD异步模块定义,语法风格)

Common Module Definition

ES6/CommonJS

CommonJS

ES6 Module

加载器示例

总结


cmd和amd的区别

现在有哪些异步加载方式

整体结构

编程:commonjs es6 module (有可能解析不了,需要传输层)

传输:cmd/amd(早期是异步加载模块用的,不是一个中间层;现在是一个加载模块,不把程序写在里面)

执行:require.js webpack模块加载器......(异步加载器)

CMD/AMD

Asynchronous Module Definition(AMD异步模块定义,语法风格)

amd不是一个很好的设计

// 模块创建
// a.js
define(['functions/foo'], (foo) => { // 数组:依赖foo——文件在functions/fooconsole.log(foo())
})
// 模块使用
// a.js
//         数组代表所有依赖                函数接收所有依赖
require(['jquery', 'a.js'], ($, printFoo) => {$("#foo").click(()=> {printFoo()    })
})

Common Module Definition

// 模块使用
// a.js
define((require, exports) => {function printFoo() {const foo = require('./foo') // 声明后置console.log(foo())    }exports = printFoo // 声明后置 用到在声明
})
// 模块使用
// a.js
use((require) => {const $ = require('jquery') // 同步模型,异步的话可以用asyns await,promiseconst printFoo = require('./a.js')$("#foo").click(() => {printFoo()    })
})

ES6/CommonJS

CommonJS

node支持

浏览器访问转义为浏览器可解读的cmd

// 模块使用
// a.js
function A(){...}
module.exports = A
// 模块引用
const A = require("./a.js")
A()

ES6 Module

// 模块使用
// a.js
function A(){...}
export default A
// 模块引用
import A from './a.js'
A()

加载器示例

const express = require('express')
const app = express() 
const path = require('path')
app.use(express.static(path.resolve(__dirname, 'lib')))
app.get('/', (req, res) => {res.send(`<html><body><script src='/require.js' ></script><script>require.path = '/'require(['add', 'mult'], (add, mult) => {console.log(add(3, 5))console.log(mult(3, 5))})</script></body></html>`)
})
app.listen(3000)
// add.js
define('add', (a, b) => {return a + b
})
// mult.js
define('mult', (a, b) => {return a * b
})

总结

  • CMD/AMD:底层建设 (浏览器用的)
  • CommonJS/ES6 Module: 书写规范

相关文章:

工具链和其他-异步模块加载

目录 CMD/AMD Asynchronous Module Definition(AMD异步模块定义&#xff0c;语法风格) Common Module Definition ES6/CommonJS CommonJS ES6 Module 加载器示例 总结 cmd和amd的区别 现在有哪些异步加载方式 整体结构 编程&#xff1a;commonjs es6 module (有可能解…...

第一次使用R语言

在R语言中&#xff0c;“<-”符号与“”意义一样。另一种奇怪的R语言的等号表示方法&#xff0c;是以“->”表示&#xff0c;但是用得少。 有些计算机语言&#xff0c;变量在使用前要先定义&#xff0c;R语言则不需先定义&#xff0c;可在程序中直接设定使用。 若在Con…...

《语文教学通讯》栏目 收稿范围

《语文教学通讯》创刊于1978年&#xff0c;是由山西师范大学主管&#xff0c;山西师大教育科技传媒集团主办的期刊。历年被人民大学书报资料中心转载、复印的篇幅数量均居同类报刊之首。国内刊号&#xff1a;CN 14-1017/G4&#xff0c;国际刊号&#xff1a;ISSN 1004-6097&…...

Towards Principled Disentanglement for Domain Generalization

本文用大量的理论论述了基于解纠缠约束优化的域泛化问题。 这篇文章认为以往的文章在解决域泛化问题时所用的方法都是non-trivial的&#xff0c;也就是说没有作严格的证明&#xff0c;是不可解释的&#xff0c;而本文用到大量的定理和推论证明了方法的有效性。 动机 因为域泛…...

计算机网络学习02

1、TCP 与 UDP 的区别&#xff1f; 是否面向连接 &#xff1a; UDP 在传送数据之前不需要先建立连接。而 TCP 提供面向连接的服务&#xff0c;在传送数据之前必须先建立连接&#xff0c;数据传送结束后要释放连接。是否是可靠传输&#xff1a; 远地主机在收到 UDP 报文后&…...

网络交换机端口管理工具

如今&#xff0c;企业或组织级网络使用数百个交换机端口作为其 IT 基础架构的一部分来实现网络连接。这使得交换机端口管理成为日常网络管理任务的一部分。传统上&#xff0c;网络管理员必须依靠手动网络交换机端口管理技术来跟踪交换机及其端口连接状态。这种手动任务弊大于利…...

redis五大命令kv设计建议内存淘汰

什么是redis&#xff1f;主要作用&#xff1f; redis(remote dictionary server)远程字典服务&#xff1a;是一个开源的使用ANSI C语言编写&#xff0c;支持网络、可基于内存可持久化的日志型、key-value数据库&#xff0c;并提供多种语言的api redis的数据存在内存中&#xff…...

如何真正认识 Linux 系统结构?这篇文章告诉你

Linux 系统一般有 4 个主要部分&#xff1a;内核、shell、文件系统和应用程序。内核、shell 和文件系统一起形成了基本的操作系统结构&#xff0c;它们使得用户可以运行程序、管理文件并使用系统。 Linux内核 内核是操作系统的核心&#xff0c;具有很多最基本功能&#xff0c;…...

【移动端网页布局】流式布局案例 ① ( 视口标签设置 | CSS 样式文件设置 | 布局宽度设置 | 设置最大宽度 | 设置最小宽度 )

文章目录 一、视口标签设置二、CSS 样式文件设置三、布局宽度设置1、设置布局宽度2、设置布局最大宽度3、设置布局最小宽度4、查看网页最大最小宽度5、布局宽度设置 四、代码示例1、主界面标签2、CSS 布局设置 一、视口标签设置 参考 【移动端网页布局】移动端网页布局基础概念…...

力扣---LeetCode88. 合并两个有序数组

文章目录 前言88. 合并两个有序数组链接&#xff1a;方法一&#xff1a;三指针(后插)1.2 代码&#xff1a;1.2 流程图&#xff1a;方法二&#xff1a;开辟新空间2.1 代码&#xff1a;2.2 流程图&#xff1a;2.3 注意&#xff1a; 总结 前言 “或许你并不熠熠生辉甚至有点木讷但…...

H7-TOOL的CANFD Trace全解析功能制作完成,历时一个月(2023-04-28)

为了完成这个功能&#xff0c;差不多耗费了一个月时间&#xff0c;精神状态基本已经被磨平了。 当前已经支持&#xff1a; 1、LUA小程序控制&#xff0c;使用灵活。 2、采用SWD接口直接访问目标板芯片的CANFD外设寄存器和CANFD RAM区实现&#xff0c;支持USB&#xff0c;以太网…...

探析Android中的四类性能优化

作者&#xff1a;Yj家的孺子牛 流畅性优化 主线程模型 了解 Android 的流畅性优化之前&#xff0c;我们需要先了解Android的线程结构。在 Android 中&#xff0c;有一个主线程模型&#xff0c;其中所有的绘制以及交互都是在主线程中进行的&#xff0c;所以&#xff0c;当我们…...

ubuntu18.04 安装编译zlmediakit

参考http://www.cherrylord.cn/archives/zlmediakit 1、获取代码 #国内用户推荐从同步镜像网站gitee下载 git clone --depth 1 https://gitee.com/xia-chu/ZLMediaKit cd ZLMediaKit #千万不要忘记执行这句命令 git submodule update --init#国内用户推荐…...

C++ -5- 内存管理

文章目录 C语言和C内存管理的区别示例1. C/C 中程序内存区域划分2. C中动态内存管理3.operator new 与 operator delete 函数4.new 和 delete 的实现原理5.定位new表达式 C语言和C内存管理的区别示例 //C语言&#xff1a; struct SListNode {int data;struct SListNode* next; …...

(Linux)在Ubuntu系统中添加新用户并授予root权限

向Ubuntu系统中添加新用户并为其授予root权限的步骤如下: 打开终端Terminal 输入命令: sudo su - 以 root 身份登录. 注: sudo su : 切换root身份, 不携带当前用户环境变量 sudo su - : 切换root身份, 携带当前用户环境变量 输入命令: adduser username 向Ubuntu系统中添…...

AttributeError: ‘ChatGLMModel‘ object has no attribute ‘prefix_encoder‘

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

Huggingface的GenerationConfig 中的top_k与top_p详细解读

Huggingface的GenerationConfig 中的top_k与top_p详细解读 Top_kTop_p联合共用 Top_k top-k是指只保留概率最高的前k个单词&#xff0c;然后基于剩余单词的概率进行归一化&#xff0c;从中随机抽取一个单词作为最终输出。这种方法可以限制输出序列的长度&#xff0c;并仍然保持…...

学生信息管理系统简易版(文件读写操作)

功能模块 具体功能如下&#xff1a; 添加学生信息修改学生信息&#xff08;按学号&#xff09;排序&#xff08;分别按总分升序、降序、以及按姓名升序&#xff09;查找学生&#xff08;按学号&#xff09;删除学生查看所有学生信息 数据结构体设计 本表设计一个学生信息的结…...

C/C++每日一练(20230426)

目录 1. 不喜欢带钱的小C &#x1f31f;&#x1f31f; 2. 数组排序 ※ 3. 超级素数 ※ &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 不喜欢带钱的小C 小C不喜欢带钱&#xff0c…...

halcon灰度积分投影/垂直积分投影

简介:关于灰度投影积分可以用到的场合很多,例如分割字符,分割尺子上的刻度等,适用于有规律的变化这些内容的检测。本文复现了论文《基于深度学习和灰度纹理特征的铁路接触网绝缘子状态检测》中灰度积分投影实现了对绝缘子缺陷位置的检测。见(图1)灰度积分垂直方向投影获得…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...

【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南&#xff0c;适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者&#xff0c;都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...