1 javascript模組化進化史

2021-08-28 19:38:17 字數 1726 閱讀 6469

全域性function模式

全域性函式模式: 將不同的功能封裝成不同的全域性函式

問題: global被汙染了, 很容易引起命名衝突

// module1.js

//資料

let data = 'atguigu.com'

//運算元據的函式

function foo() `)

}function bar() `)

}// module2.js

let data2 = 'other data';

function foo() `)

}

namespace模式
namespace模式: 簡單物件封裝

作用: 減少了全域性變數

問題: 不安全,資料不是私有的, 外部可以直接修改

// module1.js

let mymodule = `)

},bar() `)}}

// module2.js

let mymodule2 = `)

},bar() `)}}

// test2.html

iife模式
iife模式: 匿名函式自呼叫(閉包)

iife : immediately-invoked function expression(立即呼叫函式表示式)

作用: 資料是私有的, 外部只能通過暴露的方法操作

問題: 如果當前這個模組依賴另乙個模組怎麼辦?

// module3.js

(function (window) `)

}function bar() `)

otherfun() //內部呼叫

}function otherfun()

//暴露行為

window.mymodule =

})(window)

// test3.html

iife模式增強
iife模式增強: 引入依賴

這就是現代模組實現的基石

// 引入jquery到專案中

// module4.js

(function (window, $) `)

$('body').css('background', 'red')

}function bar() `)

otherfun() //內部呼叫

}function otherfun()

//暴露行為

window.mymodule =

})(window, jquery)

// test4.html

頁面載入多個js的問題
頁面:

乙個頁面需要引入多個js檔案,會導致

這些問題可以通過現代模組化編碼和專案構建來解決

模組化程式設計1

一,原始寫法 模組就是實現特定功能的一組方法。只要把不同的函式 以及記錄狀態的變數 簡單地放在一起,就算是乙個模組。function m1 module1 這樣寫其實就是給乙個模組新增新的方法m3 可以用這種方式給乙個模組擴充套件方法。5.寬放大模式 在瀏覽器環境中,模組的各個部分通常都是從網上獲取...

JavaScript模組化程式設計思想演變

對大型的 來說,模組化程式設計非常重要。因為越是大型的 檔案命名衝突 檔案依賴程度都非常高,故而引入模組化思想。下面我從大家經常寫 的習慣來引。這種形式,各種變數,函式都將暴露在全域性環境下,示例如下 上面這種編寫方式是很常見的,也是非常不可取的,因為全域性環境完全被汙染了,非常容易造成命名衝突等問...

結對程式設計1 模組化

在個人作業1中,用各種語言實現了乙個命令列的四則運算小程式。進一步,本次要求把這個程式做成gui,成為乙個有基本功能 一定價值的程式。在下面的功能需求中實現兩個 1 需求分析 結對專案,需求為我完成的功能。2 程式設計 說明 四則遠算主要功能分為,計算 語言選擇 計時 記錄。其中計算是最核心最重要的...