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

【模块化】CommonJS,AMD规范,CMD规范,ES6模块化

1. CommonJS

Node.js基于CommonJS规范应运而生

1.1 commonjs规范语法导出模块

module.exports = { a, b }

1.2 commonjs规范语法引入模块

const mod = require('./导出模块name')

2. AMD 规范

RequireJS 是AMD规范的实现。是js文件和模块的加载器。
在没有单页应用(angular.js,vue.js,react.js),基于路由的形式,一个 index.html主文件,切换路由展示(SPA形式)的环境下使用。
依赖全加载完再执行js,保证依赖没有问题。
有很多自己的语法。
宏观的,先把需要的依赖都加载好,加载费时,开发效率高。

2.1 本地下载并引入第三方库 require.js

// 新建lib文件用来存放第三方下载库,lib/require.js
<script data-main = 'js/main' src = 'lib/require.js' ></script>
// data-main 入口文件

2.2 添加 require.js 配置

require.confing({// 当前模块化解析的基本路径baseUrl: 'js',// 模块的映射paths: {jquery: '../lib/jquery.min', //never includes a '.js' extension since lodash: '../lib/lodash'}
})

2.3 使用ADM规范,定义一个requireJS语法的模块

define(['jquery', 'lodash'], function($,_){// 这里就是RequireJS解决的问题,等【】依赖全加载完,再执行js
})

2.4 使用ADM规范,加载入口requireJS语法的模块

require(['./index'])

3. CMD规范

Sea.js 遵循CMD规范。
可以像Node.js一般书写模块代码,不用记语法。
官网五分钟上手。
微观的,随用随加载,分散开发效率,但不需要加载耗时。

3.1 本地下载并引入第三方库 sea.js
3.2 添加 sea.js 配置
3.3 使用CMD规范,定义一个seajs语法的模块

define(function(require, exports, module){// 通过require引入依赖const $ = reauire('jquery')// 通过 exports 对外提供接口exports.doSomething = ...// 或通过module.exports 提供整个接口module.exports = ...
})

3.4 使用CMD规范,加载入口seajs语法的模块

seajs.use('../js/main')

4. ES6 模块化规范

使用 babel 的插件 babel-cli 把es6转换成浏览器可编译的 es5

4.1 es6 俩种导出模块

// 单独模块导出
export function sum(a,b) {return a+b;
}
export function sub(a,b) {return a-b;
}
// 默认整体导出
const user = {name: 'lisi',age: 18,say: function() {console.log('My name is' + this.name)}
}
export default user

4.1 es6 俩种导入模块

// 单独模块导入
import {sum, sub} from "./math"
// 整体模块导入
import user from "./user"

相关文章:

【模块化】CommonJS,AMD规范,CMD规范,ES6模块化

1. CommonJS Node.js基于CommonJS规范应运而生 1.1 commonjs规范语法导出模块 module.exports { a, b }1.2 commonjs规范语法引入模块 const mod require(./导出模块name)2. AMD 规范 RequireJS 是AMD规范的实现。是js文件和模块的加载器。 在没有单页应用&#xff08;angu…...

3.js - 顶点着色器、片元着色器的联系

1、定义与功能 顶点着色器 顶点着色器&#xff0c;是图形渲染管线中的第一个可编程阶段&#xff0c;它的主要任务是&#xff0c;处理从CPU发送到GPU的顶点数据&#xff0c;包括&#xff1a;1、顶点位置的变换&#xff08;如&#xff1a;模型空间 -> 世界空间 -> 视图控件…...

kotlin简介

Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言&#xff0c;被称之为 Android 世界的Swift&#xff0c;由 JetBrains 设计开发并开源。 Kotlin 可以编译成Java字节码&#xff0c;也可以编译成 JavaScript&#xff0c;方便在没有 JVM 的设备上运行。 在Google I/O 2017…...

Mintegral出海系列:解锁全球应用商店新增长路径

在全球化竞争的浪潮中&#xff0c;面对打法各异的应用和游戏品类&#xff0c;以及全球数百个环境不同的国家和地区&#xff0c;开发者们正面临着前所未有的挑战。Mintegral「出海ing」系列专题内容&#xff0c;助力出海开发者选准赛道探索新的增长路径。 据近期数据显示&#x…...

Qt 哈希加密之 QCryptographicHash

【写在前面】 QCryptographicHash 是 Qt 框架中提供的一个类&#xff0c;它用于实现加密散列函数&#xff0c;也就是我们常说的哈希函数。哈希函数能够将任意长度的数据转换为固定长度的哈希值&#xff0c;这个哈希值通常用于数据的完整性校验、密码存储等场景。 什么是哈希函数…...

渗透第二次作业

目录 简述rce漏洞 可能产生rce漏洞的函数 RCE代码执行漏洞示例 贷齐乐系统多处SQL注入漏洞 ​编辑 爆出库名 爆出表名 爆出表下的列名 查flag数据 简述rce漏洞 ​ rce漏洞&#xff0c;即远程代码执行和远程命令执行漏洞。这种漏洞允许攻击者在后台服务器上远程注入操作…...

42.【C语言】冒泡排序

目录&#xff1a; 冒泡排序 *核心思想 *分析 *代码 *优化 15.冒泡排序(bubble sort) *核心思想&#xff1a;两两相邻的元素进行比较&#xff0c;满足条件则两者交换 *分析 现要求升序排序 输入: 9 8 7 6 5 4 3 2 1 0 输出&#xff1a;0 1 2 3 4 5 6 7 8 9 下面展示一趟冒泡排…...

Linux安全与高级应用(七)深入Linux Shell脚本编程:循环与分支结构的高级应用

文章目录 深入Linux Shell脚本编程&#xff1a;循环与分支结构的高级应用一、循环结构详解1. for循环1.1 应用示例&#xff1a;检查主机状态 2. while循环2.1 应用示例&#xff1a;猜价格游戏 二、分支结构详解1. if语句1.1 单分支结构1.2 双分支结构1.3 多分支结构 2. case语句…...

python爬虫滑块验证及各种加密函数(基于ddddocr进行的一层封装)

git链接: https://github.com/JOUUUSKA/spider_toolsbox 这里写目录标题 一.识别验证码1、识别英文&#xff0b;数字验证码2、识别滑块验证码3、识别点选验证码 一.识别验证码 git链接: https://github.com/JOUUUSKA/spider_toolsbox 创作不易记得stars 1、识别英文&#xf…...

pytorch学习一(扩展篇):miniconda下载、安装、配置环境变量。miniconda创建多版本python环境。整理常用命令(亲测ok)

文章目录 前言一、miniconda和anaconda的关系1、Anaconda2、Miniconda3、总结 二、下载miniconda&#xff08;清华镜像链接&#xff09;三、安装miniconda1、安装2、或许要手动加载 ~/.bashrc 四、配置 命令1、查看anaconda安装博文2、取消默认进入conda&#xff08;base&#…...

说一下Android中的IdleHandler

IdleHandler 是 Android 中的一个接口&#xff0c;常用于在主线程空闲时执行一些低优先级的任务。 作用&#xff1a; 它提供了一种在主线程空闲时执行额外操作的机制&#xff0c;能够优化应用的性能和资源利用。 工作原理&#xff1a; 当主线程没有其他任务需要处理&#xff…...

Flake8 和 Autopep8 使用指南

Flake8 和 Autopep8 集成到 CI/CD 流程中&#xff0c;确保在代码提交和合并时自动进行检查和格式化&#xff0c;如果Autopep8格式化检查无法通过Flake8校验&#xff0c;说明pycodestyle版本依赖不兼容&#xff0c;参考文章&#xff1a;Flake8 与 Autopep8 兼容性指南 Flake8 使…...

OpenHarmony(数据)通信协议、数据存储—protobuf

介绍 ProtoBuf(protocol buffers) 是一种语言无关、平台无关、可扩展的序列化结构数据的方法&#xff0c;它可用于&#xff08;数据&#xff09;通信协议、数据存储等。,是一种灵活&#xff0c;高效&#xff0c;自动化机制的结构数据序列化方法比XML更小,更快,更为简单。 本项…...

vue3 依赖注入 vueRouter vuex

目录 01 依赖注入 02 组合式API里面的vueRouter 03 组合式API中的vuex的使用 01 依赖注入 使用场景&#xff1a; 有一个父组件&#xff0c;里头有子组件&#xff0c;有孙组件&#xff0c;有很多后代组件&#xff0c;共享父组件数据。 1.组先组件给后代组件传参 组先组件: 从…...

在Windows上用Visual Studio编译OpenCV

在Windows上编译开源项目&#xff0c;有时候让人痛不欲生&#xff0c;有时候却出奇地顺利。OpenCV属于后者。本文记录这次愉快的过程。 注&#xff1a;OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库。它提供了大…...

详解2024年最值得推荐的5款CRM软件:如何选择适合企业需求的CRM系统?

在文章开始之前&#xff0c;我们前来了解下&#xff1a;什么是CRM系统&#xff1f; CRM系统&#xff0c;即客户关系管理系统&#xff0c;顾名思义&#xff0c;它是企业用来管理和维护与客户之间关系的重要工具。通过CRM系统&#xff0c;企业能够全面了解客户需求&#xff0c;优…...

2024靠谱的网站建设公司推荐

在现在的互联网社会&#xff0c;一个企业的网站往往是潜在客户对该品牌的第一印象来源。也正因如此&#xff0c;选择一个靠谱的网站建设公司对于确保企业在线形象和功能性至关重要&#xff0c;作为建站行业从业人员&#xff0c;我分享几个选择网站建设公司时应考虑的几个关键因…...

第一天:Java基础与环境搭建

第一天&#xff1a;Java基础与环境搭建 1. 理解Java基本概念 了解Java语言的历史&#xff1a;Java是一种广泛使用的编程语言&#xff0c;由Sun Microsystems&#xff08;现被Oracle收购&#xff09;于1995年首次发布。认识Java的特性&#xff1a;包括面向对象、平台无关性&am…...

动画魔法秀:JavaScript前端动画实战指南

标题&#xff1a;动画魔法秀&#xff1a;JavaScript前端动画实战指南 在现代Web开发中&#xff0c;动画不仅能够提升用户体验&#xff0c;还能使网页更加生动有趣。JavaScript作为实现前端动画的重要工具之一&#xff0c;提供了多种方式来创建平滑且吸引人的动画效果。本文将详…...

实训日记day26

NAT服务配置 1.关闭防火墙和selinux [root2 ~]# setenforce 0 [root2 ~]# vim /etc/selinux/config [root2 ~]# systemctl stop firewalld [root2 ~]# systemctl disable firewalld 2.安装nginx &#xff08;web1和web2&#xff09; [root2 ~]# yum install -y gcc-c pcre pcr…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...