We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
之前,js不能引入三方模块,所有的代码必须写到一个文件中,导致单个文件代码量大、业务功能模块不清晰、难于维护。而编写模块化代码,有助于使您的代码变得松散耦合,这对于构建可维护的表示工程代码大有帮助。基于此,越来越多的模块规范出现,如commonjs、amd、umd、esm.
amd(Asynchronous Module Definitions)规范因RequireJS而出名,其适用于浏览器端,commonjs常被用于node中,当然其也可通过Browserify用于浏览器中。
其用法如下:
// 文件名: foo.js define(['jquery'], function ($) { // 方法 function myFunc(){}; // 暴露公共方法 return myFunc; });
定义的第一个部分是一个依赖数组,第二个部分是回调函数,只有当依赖的组件可用时(像RequireJS这样的脚本加载器会负责这一部分,包括找到文件路径)回调函数才被执行。
理想状态下,期望其依赖是异步加载的,通过在中注入script,不阻塞浏览器的加载和渲染,但实际环境下,其表现的没有那么好,因此需要amd 模块为一个单文件模块并与require.js 优化器配合来进行渲染
总结如下:
如果你用node写过东西的话,你可能会很熟悉commonjs风格,其用法如下:
// 文件名: foo.js // 依赖 var $ = require('jquery'); // 方法 function myFunc(){}; // 暴露公共方法(一个) module.exports = myFunc;
其是amd和commonjs的统一规范,支持两种规范,即写一套代码,可用于多种场景。其用法如下:
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object') { // Node, CommonJS之类的 module.exports = factory(require('jquery')); } else { // 浏览器全局变量(root 即 window) root.returnExports = factory(root.jQuery); } }(this, function ($) { // 方法 function myFunc(){}; // 暴露公共方法 return myFunc; }));
毋庸置疑的是,其写法也是最复杂的
ESM是ES6提出的标准模块系统,相信大家都用过
import React from 'react';
相信未来esm是趋势。
完!
水平有限
如有理解错误之处,请指正~
参考链接:
https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm
https://www.linkedin.com/pulse/amd-vs-common-js-umd-damodaran-sathyakumar
https://75.team/post/%E8%AF%91%E7%A5%9E%E9%A9%AC%E6%98%AFamd-commonjs-umd.html
The text was updated successfully, but these errors were encountered:
No branches or pull requests
什么是amd、commonjs、umd、esm?
之前,js不能引入三方模块,所有的代码必须写到一个文件中,导致单个文件代码量大、业务功能模块不清晰、难于维护。而编写模块化代码,有助于使您的代码变得松散耦合,这对于构建可维护的表示工程代码大有帮助。基于此,越来越多的模块规范出现,如commonjs、amd、umd、esm.
amd(Asynchronous Module Definitions)规范因RequireJS而出名,其适用于浏览器端,commonjs常被用于node中,当然其也可通过Browserify用于浏览器中。
amd
其用法如下:
定义的第一个部分是一个依赖数组,第二个部分是回调函数,只有当依赖的组件可用时(像RequireJS这样的脚本加载器会负责这一部分,包括找到文件路径)回调函数才被执行。
理想状态下,期望其依赖是异步加载的,通过在中注入script,不阻塞浏览器的加载和渲染,但实际环境下,其表现的没有那么好,因此需要amd 模块为一个单文件模块并与require.js 优化器配合来进行渲染
总结如下:
commonjs
如果你用node写过东西的话,你可能会很熟悉commonjs风格,其用法如下:
总结如下:
umd
其是amd和commonjs的统一规范,支持两种规范,即写一套代码,可用于多种场景。其用法如下:
毋庸置疑的是,其写法也是最复杂的
ESM
ESM是ES6提出的标准模块系统,相信大家都用过
相信未来esm是趋势。
完!
水平有限
如有理解错误之处,请指正~
参考链接:
https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm
https://www.linkedin.com/pulse/amd-vs-common-js-umd-damodaran-sathyakumar
https://75.team/post/%E8%AF%91%E7%A5%9E%E9%A9%AC%E6%98%AFamd-commonjs-umd.html
The text was updated successfully, but these errors were encountered: