数据结构
网络
关系型数据库管理系统
操作系统
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 次浏览
