免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

前言：模塊化開發(fā)需求

在JS早期，使用script標簽引入JS，會造成以下問題：

1. 加載的時候阻塞網(wǎng)頁渲染，引入JS越多，阻塞時間越長。
2. 容易污染全局變量。
3. js文件存在依賴關(guān)系，加載必須有順序。項目較大時，依賴會錯綜復(fù)雜。
4. 引入的JS文件過多，不美觀，且不易于管理。

一、CommonJS規(guī)范

CommonJS Modules/1.0規(guī)范，服務(wù)器端規(guī)范。

Node.js推廣使用。該規(guī)范的核心是：允許模塊使用require方法來同步加載所依賴的其他模塊，然后通過exports或module.exports導(dǎo)出需要暴露的接口。

特點：

1. 一個模塊是一個文件

2. 使用module.exports或exports導(dǎo)出模塊

   // module.js
   exports.add = (a, b) => a+b
   
   module.exports = {
     add: (a, b) => a + b
   }
   

3. 使用require加載模塊

   a. require命令第一次加載模塊時，執(zhí)行整個腳本，在內(nèi)存中生成對象
   b. 多次執(zhí)行require命令再次加載該模塊時，不會再執(zhí)行該腳本，直接從緩存中取值
   c. CommonJS加載模塊是同步加載模塊
   

Tips：

1. 為什么CommonJS規(guī)范不適合作為瀏覽器的規(guī)范

   由于CommonJS是同步加模塊，在服務(wù)端加載模塊時都是從本地硬盤中加載，讀取速度很快。但是在瀏覽器端加載模塊時，需要請求服務(wù)器端，涉及網(wǎng)速、代理的問題，一旦等待時間過長，瀏覽器會處于“假死”狀態(tài)。
   

二、ADM規(guī)范

AMD（Asynchronous Module Definition）異步模塊定義，客戶端規(guī)范。
采用異步方式加載模塊，模塊加載不影響它后面語句的代執(zhí)行。

AMD是require.js在推廣使用過程中對模塊定義規(guī)范化的產(chǎn)物。

在使用時，需引入require.js

特點

1. 使用define()定義模塊

   /**
    * @param id 模塊名稱，如果為空，模塊的名字默認為模塊加載器請求的指定腳本名
    * @param dependencies 模塊依賴
    * @param factory 工場函數(shù)，模塊初始化執(zhí)行的函數(shù)或?qū)ο? */
   define(id? dependencies? factory)
   

2. 使用require加載模塊

   require([module], callback)
   

   AMD是依賴前置模塊

三、CMD規(guī)范

CMD（Common Module Definition）通用模塊定義，異步加載模塊。

CMD是sea.js在推廣過程中對模塊定義的規(guī)范化產(chǎn)物。

在使用時，需引入sea.js

特點：

1. 使用define()定義模塊，使用require()加載模塊

   define(function (require, exports, module) {
   let a = require('a')
   let b = require('b')
   exports.eat = a.eat
   exports.run = b.run
   })
   

   CMD模塊加載是推崇就近依賴的，需要到某個模塊時再進行require加載

2. 使用seajs.use加載使用模塊

   seajs.use(id, callback?)
   

四、UMD規(guī)范

UMD（Universal Module Definition）通用模塊定義，為了兼容AMD、CMD和無模塊化開發(fā)規(guī)范

/**
 * UMD-Universal Module Definition 通用模塊定義
 * */
 (function (root, factory) {
 // 判斷是否是AMD/CMD
 if (typeof define === 'function') {
 define([], factory)
 } else if (typeof exports === 'object') {
 // Node CommonJS規(guī)范
 module.exports = factory()
 } else {
 // 瀏覽器環(huán)境
 root.someAttr = factory
 }
 })(this, function () {
 let add = function (a, b) {
 return a + b
 }
 return {
 add,
 module: 'UMD'
 }
 })

五、ES6模塊

ES6通過imort和export實現(xiàn)模塊的輸入與輸出，import命令用于輸入其他模塊提供的功能，export命令用于規(guī)定模塊對外的接口。

特點：

1. 使用export導(dǎo)出模塊

   // test.js
   export let module = 'ES6 Module'
   export let hello = function () {}
   let demo = function () {}
   // 默認導(dǎo)出
   export default demo
   

2. 使用import導(dǎo)入模塊

   // 導(dǎo)入默認模塊
   import demo from './test.js'
   
   // 導(dǎo)入指定模塊
   import { hello, module } from './test'
   
   // 導(dǎo)入指定模塊，并重命名
   import { hello as hi, module } from './test.js'
   
   // 導(dǎo)入全部模塊，并重命名
   import * as test from './test.js'
   

后記

以上就是胡哥今天給大家分享的內(nèi)容，喜歡的小伙伴記得收藏、轉(zhuǎn)發(fā)、點擊右下角按鈕在看，推薦給更多小伙伴呦，歡迎多多留言交流...

胡哥有話說，一個有技術(shù)，有情懷的胡哥！現(xiàn)任京東前端攻城獅一枚。
胡哥有話說，專注于大前端技術(shù)領(lǐng)域，分享前端系統(tǒng)架構(gòu)，框架實現(xiàn)原理，最新最高效的技術(shù)實踐！

長按掃碼關(guān)注，更帥更漂亮呦！關(guān)注胡哥有話說公眾號，可與胡哥繼續(xù)深入交流呦！