資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究模組化 JavaScript 模式下的單元測試挑戰
首先，讓我們瞭解什麼是單元測試以及它如何幫助我們。單元測試是眾多自動化測試型別中的一種。單元測試完全隔離並測試應用程式的相對較小的部分，並將結果與預期結果進行比較。在對應用程式進行單元測試時，通常不會將其連結到外部依賴項，例如資料庫、檔案系統或 HTTP 服務。這被稱為“完全隔離”。由於它們不會因所有這些外部服務的問題而失敗，因此單元測試可以更快且更可靠。
單元測試是一種軟體測試技術，用於檢查單個軟體單元（例如計算機程式模組組、使用場景和操作程式）是否適合使用。這是一種測試策略，開發人員檢查每個單獨的模組是否存在問題。它與獨立模組的功能性相關。
模組是任何健壯應用程式架構的重要組成部分，通常使保持專案的程式碼單元整潔分離和組織變得更容易。
JavaScript 的模組也稱為“ES 模組”或“ECMAScript 模組”。JavaScript 模組是最流行的設計模式。它用於維護各個程式碼片段與其他部分的獨立性。這提供了鬆散耦合，以支援結構良好的程式碼。
在面向物件的語言方面，模組只是 JavaScript 類。封裝是類眾多好處之一，在之前的文章中已突出顯示，它可以防止其他類訪問狀態和行為。模組模式建立了公共和私有訪問級別。
模組必須透過充當閉包來保護方法和變數的 IIFE（立即呼叫函式表示式）來支援私有作用域。
這是一個基本示例，它看起來像這樣。
(function() {
// declare private variables and/or functions
return {
// declare public variables and/or functions
}
})();
在這種情況下，我們在返回我們打算返回的物件之前建立私有變數和/或函式。由於這些私有變數不屬於與我們的閉包相同的範圍，因此外部程式碼無法訪問它們。
示例
在這個例子中，讓我們瞭解如何以更具體的方式實現它。
<!DOCTYPE html>
<html>
<title>Unit Testing Challenges with Modular JavaScript Patterns - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" countent="IE=edge">
<meta name="viewport" countent="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="result"></div>
<script>
function Football(type) {
this.type = type;
this.country = "italian";
this.getInfo = getFootballInfo;
}
function getFootballInfo() {
return this.country + ' ' + this.type + ' is italian';
}
let italian = new Football('language');
italian.country = "players";
document.getElementById("result").innerHTML = (italian.getInfo());
</script>
</body>
</html>
揭示模組模式
RMP 或揭示模組模式是 Javascript 的一種流行設計模式。其背後的概念是，它將實現細節隱藏在閉包中，並且僅“揭示”那些旨在透過包含函式傳遞的物件文字公開的函式。該模式由 Christian Heilmann 建立，Addy Osmani 在他的著作《學習 Javascript 設計模式》中對其進行了描述。RMP 模式似乎非常適合測試階段，因為它提供了公共 API。
示例 1
揭示模組模式是模組模式的一種變體。在保持封裝的同時，透過物件文字返回的一些變數和方法變得可見。讓我們透過下面的示例來理解。
<!DOCTYPE html>
<html>
<title>Unit Testing Challenges with Modular JavaScript Patterns - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" countent="IE=edge">
<meta name="viewport" countent="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="resul1"></div>
<div id="resul2"></div>
<script>
let organicFarm = (function() {
let privateVariable = 10;
let privateFarmingMethod = function() {
document.getElementById("resul1").innerHTML = ('These fruits are inside a private farming method!');
privateVariable++;
}
let organicFarmMethod = function() {
document.getElementById("resul2").innerHTML = ('These fruits are from organic farming method!' + '<br>');
}
let otherMethodIWantToFarm = function() {
privateFarmingMethod();
}
return {
first: organicFarmMethod,
second: otherMethodIWantToFarm
};
})();
organicFarm.first(); // Output: These fruits are from oganic farming method!
organicFarm.second(); // Output: These fruits are inside a private farming method!
organicFarm.organicFarmMethod; // undefined
</script>
</body>
</html>
示例 2
這是 JavaScript 中揭示模組模式的另一個示例
<!DOCTYPE html>
<html>
<title>Unit Testing Challenges with Modular JavaScript Patterns - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" countent="IE=edge">
<meta name="viewport" countent="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="result"></div>
<script>
let farmModule = (function() {
function fruits() {
return 'These fruits are from my farm Module';
}
function vegetables() {
return 'These vegetables are from organic farming';
}
return {
fruits: fruits,
vegetables: vegetables
};
}());
document.getElementById("result").innerHTML = (farmModule.fruits()); // These fruits are from my farm Module
</script>
</body>
</html>
286 次瀏覽
