日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
JavaScript的CJS、AMD、UMD、ESM都是啥

 在最開(kāi)始JavaScript沒(méi)有import / export模塊這些機(jī)制。所有的代碼都在一個(gè)文件里，這簡(jiǎn)直就是災(zāi)難。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供鳳臺(tái)網(wǎng)站建設(shè)、鳳臺(tái)做網(wǎng)站、鳳臺(tái)網(wǎng)站設(shè)計(jì)、鳳臺(tái)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、鳳臺(tái)企業(yè)網(wǎng)站模板建站服務(wù)，10余年鳳臺(tái)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

之后就出現(xiàn)了一些機(jī)制改變只有一個(gè)文件的問(wèn)題。于是就出現(xiàn)了CJS、AMD、UMD和ESM。這篇小文就是讓大家了解這些都是什么。

CJS

CJS全稱CommonJS?？雌饋?lái)是這樣的： 

 
 
 
    
  
  
  
  1. //importing   
    2. 
  
  
  
  2. const doSomething = require('./doSomething.js');   
    3. 
  
  
  
  3. //exporting  
    4. 
  
  
  
  4. module.exports = function doSomething(n) {  
    5. 
  
  
  
  5.   // do something  
    6. 
  
  
  
  6. } 
    7.

CJS經(jīng)常在node開(kāi)發(fā)中出現(xiàn)。

  •  CJS使用同步方式引入模塊
  •  你可以從node_modules或者本地目錄引入模塊。如：const someModule = require('./some/local/file');。
  •  CJS引入模塊的一個(gè)復(fù)制文件。
  •  CJS不能在瀏覽器里工作。要在瀏覽器里使用，則需要轉(zhuǎn)碼和打包

AMD

AMD的全稱是異步模塊定義。如： 

 
 
 
    
  
  
  
  1. define(['dep1', 'dep2'], function (dep1, dep2) {  
    2. 
  
  
  
  2.     //Define the module value by returning a value.  
    3. 
  
  
  
  3.     return function () {}; 
    4. 
  
  
  
  4.  }); 
    5.

或者 

 
 
 
    
  
  
  
  1. // "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html  
    2. 
  
  
  
  2. define(function (require) {  
    3. 
  
  
  
  3.     var dep1 = require('dep1'),  
    4. 
  
  
  
  4.         dep2 = require('dep2');  
    5. 
  
  
  
  5.     return function () {};  
    6. 
  
  
  
  6. }); 
    7.
  •  AMD異步引入模塊，也是因此得名
  •  ADM是給前端用的
  •  AMD不如CJS直觀

UMD

UMD全稱是Universal Module Definition。如： 

 
 
 
    
  
  
  
  1. (function (root, factory) {  
    2. 
  
  
  
  2.     if (typeof define === "function" && define.amd) {  
    3. 
  
  
  
  3.         define(["jquery", "underscore"], factory);  
    4. 
  
  
  
  4.     } else if (typeof exports === "object") {  
    5. 
  
  
  
  5.         module.exports = factory(require("jquery"), require("underscore"));  
    6. 
  
  
  
  6.     } else {  
    7. 
  
  
  
  7.         root.Requester = factory(root.$, root._);  
    8. 
  
  
  
  8.     }  
    9. 
  
  
  
  9. }(this, function ($, _) {  
    10. 
  
  
  
  10.     // this is where I defined my module implementation  
    11. 
  
  
  
  11.     var Requester = { // ... };  
    12. 
  
  
  
  12.     return Requester;  
    13. 
  
  
  
  13. })); 
    14.
  •  可以在前端和后端通用
  •  與CJS和AMD不同，UMD更像是配置多模塊系統(tǒng)的模式
  •  UMD通常是Rollup、webpack的候補(bǔ)選擇

ESM

ESM的全稱是ES Modules。如：

 
 
 
    
  
  
  
  1. import React from 'react'; 
    2.

或者 

 
 
 
    
  
  
  
  1. import {foo, bar} from './myLib';  
    2. 
  
  
  
  2. ...  
    3. 
  
  
  
  3. export default function() {  
    4. 
  
  
  
  4.   // your Function  
    5. 
  
  
  
  5. };  
    6. 
  
  
  
  6. export const function1() {...};  
    7. 
  
  
  
  7. export const function2() {...}; 
    8.
  •  在很多現(xiàn)代的瀏覽器里都可以用
  •  前后端都可以用。CJS一樣的簡(jiǎn)單的語(yǔ)法規(guī)則和AMD異步搖樹
  •  ESM允許打包工具，比如Rollup、webpack去除不必要的代碼
  •  在HTML調(diào)用 
 
 
 
    
  
  
  
  1.  
    2.

暫時(shí)還沒(méi)有得到全部瀏覽器的支持。

總結(jié)

  •  ESM得益于簡(jiǎn)單的語(yǔ)法、異步和搖樹的特點(diǎn)，基本上就是最好的模塊機(jī)制了
  •  UMD哪里都可以用，所以被用作備用打包方案
  •  CJS是同步的，在后端中用的比較多
  •  AMD是異步的，對(duì)前端友好 

當(dāng)前標(biāo)題：JavaScript的CJS、AMD、UMD、ESM都是啥
地址分享：http://www.5511xx.com/article/cdcoohe.html