理解JS 模組化

2021-09-29 01:14:53 字數 1371 閱讀 1531

module.exports與exports,export與export default之間的關係和區別

# js 模組化規範

## 最早是閉包的寫法,防止變數的汙染 ,多個js 用 defer 和 async

- ## amd 和 cmd 在es6 module 出現之後就退出歷史的舞台了

## es6 module

> 瀏覽器載入 es6 模組,也使用標籤,但是要加入type="module"屬性

type="module" 等同於開啟了標籤的defer屬性

注意:必須得以伺服器的模式開啟 要不然會有跨域的錯誤 可以用 npm 安裝乙個anywhere

> dem> es6 module

> 乙個模組只有乙個預設匯出,但是可以是預設匯出和物件匯出的組合

- export 語法

- named exports 命名匯出

```// 1)宣告時匯出

export var myvar1 = 'a';

export let myvar2 = 'b';

export const my_const = 'c';

export function myfunc() {}

// 2)宣告後匯出

var myvar3 = 'a';

export ;

// 3)別名匯出

var myvar4 = 'a';

export ;

```- default exports 預設匯出

```// 1)宣告時匯出

export default expression;

export default function () {}

// 2)別名設定為default匯出

export default function name1() {}

export ;

```- import 語法

```// 1)匯入模組的預設匯出內容

import defaultexport from 'module-name';

// 2)匯入模組的命名匯出內容

import from 'module-name';

import from 'module-name'; // 修改別名

import * as name from 'module-name'; // 匯入模組內的所有內容

// 3)匯入模組的預設匯出、命名匯出

import defaultexport, from 'module-name';

import defaultexport, * as name from 'module-name';

```

模組化程式設計理解

工作中在做客戶運營系統時,發現js和css的引用還處於最原始的狀態沒有更新。在上乙個專案中通過物件和其中的方法實現了簡單的模組化程式設計。但隨著工程專案的龐大程度增加,簡單的物件已經滿足不了模組化程式設計的需求了,所以接觸了requirejs,了解了amd程式設計規範。和amd對應的是cmd,在no...

js 模組化補充

補充 除了第一種的套路,還可以這樣使用第二種。都是用來自執行函式的。第二種的好處是,還可以返回乙個true。常用 function 小技巧 如果不加上!會報錯,加上之後還能返回true呢。但由於衡返回true。所以只有某些函式是只執行,不在於返回結果的可以用這種。function 相容套路1 適用於...

js模組化規範

標記已經載入成功的個數 var req total 0 模組匯出 window.exports 記錄各個模組的順序 var exp arr 判斷是否陣列 function isarray param require 真正實現 function require arr,callback else va...