Js模块化

最新推荐文章于 2024-11-06 17:04:20 发布
原创 最新推荐文章于 2024-11-06 17:04:20 发布 · 172 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客介绍了用闭包构造模块的方法，还阐述了多种JavaScript模块化规范。如服务器端的CommonJS，有同步加载缺陷；浏览器端的AMD，采用异步加载；CMD实现按需加载；UMD是CommonJS和AMD的结合。此外，还说明了ES6模块化特点及AMD和CMD的区别。

可以用闭包来构造模块，隐藏私有属性和方法，暴露公有属性和方法。这样 就形成了一个模块。
在模块化规范有commonjs，AMD，CMD，UMD， ES6
1.commonjs，是服务器端的规范，用到的是同步加载。 commonjs是主要为了js在后端的表现制定的，他是不适合前端的！nodejs用的就是commonjs规范
那么commonjs也是有缺陷的。require引入的模块是同步的，由于浏览器环境下，js都是通过script标签引入的，而这是异步的，因此conmmonjs在浏览器环境下无法正常加载
2.AMD（异步模块定义），是一个浏览器端模块化开发的规范。用到的是异步加载。requirejs框架用的就是AMD规范。
AMD模块中所有的依赖都前置, 其模块是异步的, 该自定义的模块内用到的模块均等到异步加载完成之后才调用响应模块, 这样浏览器不会失去响应。require指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题
3.CMD（同步模块定义）跟AMD的区别是实现了按需加载。seajs使用了CMD规范
4.UMD commonjs和AMD的结合。
UMD模块其实就是在当前JS执行环境中对以上几种模块规范定义的define, module.exports等进行判断, 同一模块根据不同场所返回不同结果。
ES6的模块化的基本规则或特点：
1、每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
2、每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
3、模块内部的变量或者函数可以通过export导出；
4.一个模块可以导入别的模块

AMD和CMD的区别
1.AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块,CMD`推崇就近依赖，只有在用到某个模块的时候再去require
2.两个都是定义的全局define函数来定义模块, define接收函数function(require, exports, module)保持一致
3.CMD是懒加载, 仅在require时才会加载模块; AMD是预加载, 在定义模块时就提前加载好所有依赖
4.CMD保留了CommonJS风格

JS & Node 模块化解释：AMD、UMD、CommonJS、 ESM
Thinking anywhere anytime.
07-08 3894
AMD就是为了解决命名污染而研发的，同时还支持按需加载，是第一个引入模块化开发的规范插件，要想使用AMD语法得借助一款插件RequireJS。注意，AMD 只适用于浏览器，虽然也支持 Node，但不如 Node 自家的 CJS，后面会讲。CommonJS也常被称为CJS，与ADMI一样属于模块化语法，不过它是用来兼容后端Nodejs语言，庆幸的是，CJS在 Node.js 中已内置，开箱即用，无需引入插件。UMD是AMDCommonJS。
js UMD规范——AMD和CommonJS的糅合（一）
黄彪博客
01-17 1156
文章目录问题描述问题分析文章参考模块化的规范服务器端规范（nodejs）CommonJS为什么浏览器不能使用同步加载，服务端可以？客户端规范（浏览器端）AMDAMD 优势RequireJS执行流程：CMDCMD 优势AMD 和 CMD 的区别？UMD —— 一套代码跨平台模板CMD 例子 问题描述 想利用 webpack.ProvidePlugin 插件，将自定义的配置文件，插入到全局对象中 根...
JavaScript模块 commonJS、AMD、UMD、ES6
hhhh
04-22 861
模块 托管类定义 ECMAScript6模块规范 JavaScript是异步加载的解释性语言，所以不同模块实现也表现出不同形态 模块标识符 根据其解析为实际模块的JavaScript文件路径 也可以是 在模块内部声明的命名空间路径字符串 require(’./moduleA’) 有些模块要求开发者在开始列出所有依赖，而有些依赖却允许动态加载依赖。动态依赖支持更复杂的依赖关系，但是增加了浏览器对模块进行静态分析的难度。 只有所有依赖都加载完成，才可执行入口模块。且模块加载的过程是阻塞的 把一个模块的返回值
打包出来的 common.js/umd.js 是啥？
Mark
07-17 8778
Vue 使用 lib 模式开发自己的组件库时，打包后的 dist 目录不仅有 lib.min.js，还会出现 lib.common.js 和 lib.umd.js。第一次看到这两个文件的时候不知道这是啥，为了知其所以然，于是乎查了一下，在这里稍作整理。
简要说明下.umd.js文件的作用
ivan5277的博客
06-04 1319
它的设计目的是为了让一个JavaScript模块能够在各种环境中无缝运行，无论是浏览器环境、Node.js环境，还是其他支持AMD（异步模块定义）、CommonJS或直接在全局作用域中使用的环境。文件，就能确保模块在不同平台和项目中都能正确工作，无需为每个环境单独提供不同版本的代码，大大提高了代码的复用性和维护性。UMD通过在代码中包裹一层兼容性逻辑，自动检测当前环境的模块加载机制，然后相应地导出或定义模块。这样，开发者只需要维护一个。
javascript模块化
02-10
### JavaScript模块化详解 #### 一、模块化的背景与意义 在现代Web开发中，JavaScript作为客户端编程的主要语言，其重要性不言而喻。随着Web应用变得越来越复杂，单个脚本文件往往无法满足需求，这就导致了多个...
JavaScript 模块化规范 笔记
2301_79083000的博客
11-06 928
模块化
一小时速通JavaScript模块化，涵盖CommonJS与ES6模块化
weixin_51591826的博客
10-28 1435
一小时速通JavaScript模块化，涵盖CommonJS与ES6模块化
JavaScript模块化实战
最新发布
12-02
本书《JavaScript模块化实战》深入讲解了JavaScript模块化编程的概念和技术，为读者提供了理解和掌握模块化编程的实用知识。全书围绕模块化的核心理念展开，详细介绍了模块模式、继承、沙箱机制以及AMD和CommonJS...
Javascript模块化编程详解
12-03
JavaScript模块化编程是一种组织代码的方式，它使得代码更容易理解和维护。模块化编程通过将相关的功能封装起来，避免了全局变量的滥用，提高了代码的复用性和可读性。以下是JavaScript模块化编程的一些核心概念和...
swiper.jquery.umd.min.js
09-02
关于插件wiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！wiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
10-21
主要介绍了Javascript学习之谈谈JS的全局变量跟局部变量虽然脚本之家小编以前发过，但还是这篇文章整理的比较好，需要的朋友可以参考一下
UMD.js：打造无处不在的JavaScript模块兼容性
gitblog_00801的博客
11-05 1110
UMD（Universal Module Definition）项目，由优快云公司开发的InsCode AI大模型提及，是JavaScript模块化开发领域的基石之一。该仓库采用**JavaScript**作为其核心编程语言，旨在解决模块在不同环境下的通用性问题。无论是客户端、服务器端还是其他特殊环境，UMD模式都力图让JavaScript模块无缝工作。 ## 核心功能 UMD提供了一套成熟的...
全面理解JS模块的标准（AMD、CMD、COMMON.JS 、 UMD、ESM）
qq_30436011的博客
09-23 4737
require.js是AMD模块规范的一个具体实现核心是通过define方法对无序的代码进行有序的模块化定义，通过require方法实现代码的模块化加载});control.js/*** 登录状态检测*/};/*** 模块调用及配置*/{// 登录页});};// 注册页});};};{// 详情页});};};};});sea.js是CMD模块规范的一个具体实现在定义模块方面, CMD和AMD一样通过define函数来定义模块;
JS UMD规范实现
柏灿的博客
07-11 803
JS UMD规范实现
umd 和cjs是什么
weixin_45681365的博客
04-01 1801
UMD是更通用的模块定义方式，能兼容多种环境和模块系统（包括CommonJS和AMD），因此适用于同时需要在多种环境下运行的JavaScript库或应用。CommonJS主要用于服务器端或构建能够预编译（打包）为浏览器友好格式的应用程序和库，它是Node.js的标准模块系统。在小程序开发中，选择哪种模块化标准主要取决于你的开发需求、目标平台和所使用的工具链。例如，如果你开发的小程序或库需要同时支持Node.js环境和客户端环境，则可能会选择UMD作为较为通用的方案。
umdjs/umd
的博客
09-27 863
This repository formalizes the design and implementation of the Universal Module Definition (UMD) API for JavaScript modules. These are modules which are capable of working everywhere, be it in the client, on the server or elsewhere. The UMD pattern typica
可能是最详细的UMD模块入门指南
前端原创分享，常年坚持记录和分享，全网阅读量超百万
08-29 3333
学习UMD 介绍 这个仓库记录了一些关于javascript UMD模块规范的demo，对我学习UMD规范有了很大帮助，希望也能帮助到你。 回顾 之前也写了几篇关于javascript模块的博客，链接如下： 回头再看JS模块化编程 回头再看JS模块化编程之AMD sea.js的同步魔法 近几天准备总结一下javascript模块的知识点，所以建了这个Git仓库，如果能帮助到您，麻烦点个star...
react+ts+gulpjs将插件转成umd.js文件
榴莲不好吃的专栏
03-22 2329
目录搭建 创建文件目录如下,编写好属于自己的插件, src NavBar.txs index.ts index.less gulpfile.js package.json 思路: 1.首先将ts/tsx转成es文件,顺便将文件中的.less路径改成.css 2.less语法转css语法 3.将所有的js/css文件打包成一个文件,暴露插件引用名称 选择构建工具:gulp 安装: npm install gulp ts/tsx转成es文件 使用插件 gulp-typescript、 gulp-babel、 @
js 模块化
05-30
### JavaScript 模块化的实现方式：ES6 与 CommonJS JavaScript 的模块化开发是现代前端和后端开发的重要组成部分。以下是 ES6 和 CommonJS 的主要实现方式及其特点。 #### 1. **CommonJS 模块化实现** CommonJS 是一种服务器端模块规范，主要用于 Node.js 环境中。它的核心思想是通过同步的方式加载模块，并使用 `require` 函数导入模块，通过 `module.exports` 或 `exports` 导出模块的功能[^2]。 - **导出模块** 使用 `module.exports` 或 `exports` 对象来导出模块内容。例如： ```javascript // modSecond.js let names = 'Second'; function funShowName() { console.log(names); } function funHarm() { console.log('Second harm people'); } exports.names = names; exports.funShowName = funShowName; exports.funHarm = funHarm; ``` - **导入模块** 使用 `require` 函数导入模块。例如： ```javascript // index.js const mod = require('./modSecond'); mod.funShowName(); mod.funHarm(); console.log(mod); ``` CommonJS 的特点是简单易用，但在浏览器环境中无法直接运行，需要借助工具（如 Webpack、Babel）进行打包和转译[^3]。 #### 2. **ES6 模块化实现** ES6 模块化是 JavaScript 的官方标准，支持在浏览器和 Node.js 中直接使用。它提供了更灵活的语法和更强大的功能，包括静态分析和按需加载[^1]。 - **导出模块** 使用 `export` 关键字导出模块内容。例如： ```javascript // math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; ``` - **默认导出** 可以使用 `export default` 导出一个默认值。例如： ```javascript // greet.js export default function greet(name) { return `Hello, ${name}`; } ``` - **导入模块** 使用 `import` 语句导入模块内容。例如： ```javascript // app.js import { add, subtract } from './math.js'; console.log(add(5, 3)); // 输出 8 console.log(subtract(5, 3)); // 输出 2 import greet from './greet.js'; console.log(greet('Alice')); // 输出 "Hello, Alice" ``` ES6 模块的优势在于其静态特性，允许工具在编译时解析依赖关系，从而优化代码结构和性能[^1]。 #### 3. **实际应用中的选择** 在实际开发中，选择哪种模块化方式取决于具体的环境和需求。如果是在 Node.js 环境中开发服务器端应用，CommonJS 是一个成熟且广泛使用的选项。而在现代浏览器环境中，ES6 模块更为常用，因为它符合未来的 JavaScript 标准。 对于需要兼容多种环境的项目，可以结合工具（如 Babel）将 ES6 模块转换为 CommonJS 模块，以确保在旧版浏览器或特定环境中正常运行。 ```javascript // 使用 Babel 转换 ES6 模块为 CommonJS 模块 // 配置 .babelrc 文件 { "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-transform-modules-commonjs"] } ``` ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值