在前端开发中，我们常常会使用一些第三方工具和库来提升代码的效率和质量。而 npm 是一个广泛使用的 JavaScript 包管理器，它提供了大量的开源包供我们使用。在这篇文章中，我们将介绍一个名为 cspm 的 npm 包，并提供详细的使用教程。
什么是 cspm？
cspm 全称为 Conformant Static Property Middleware，是一个基于规则的属性验证工具，它可以根据预定义的规则检查属性值的类型、范围、格式等。cspm 通过中间件的形式进行验证，可以直接集成到各种框架和流程中。
安装 cspm
使用 npm 可以非常方便地安装 cspm 包。
npm install cspm --save
基本使用
在使用 cspm 之前，我们需要创建一个规则对象来定义属性的验证规则。规则对象可以包含多个属性，每个属性代表一种验证规则。例如，我们可以定义一个规则对象来验证一个人的基本信息：
const personRules = {
name: { type: "string", maxLength: 100 },
age: { type: "number", minValue: 0, maxValue: 120 },
gender: { type: "string", enumValues: ["male", "female", "other"] },
};上述规则对象包含了三个属性：name、age 和 gender。每个属性都有自己的验证规则，例如 name 属性的类型为字符串（"string"），最大长度为 100。age 属性的类型为数字（"number"），最小值为 0，最大值为 120。gender 属性的类型为字符串（"string"），必须是 "male"、"female" 或 "other" 中的一个。
接下来，我们可以使用 cspm 进行属性值的验证：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - - ----- ------ ---- --- ------- ------- -- ----- ------ - ------------ ------------- -------------------- -- ---------
在上面的示例中，我们验证了一个 person 对象是否符合 personRules 规则。由于 person 对象的属性值都符合规则，所以没有任何错误信息被返回。
如果我们将 age 属性的值改为负数：
const person = {
name: "Tom",
age: -18,
gender: "male",
};
const result = cspm(person, personRules);
console.log(result);这时会输出以下错误信息：
{
age: {
type: 'number',
actualValue: -18,
minValue: 0,
message: 'should be a number greater than or equal to 0'
}
}我们可以通过 result 对象获取到 age 属性的错误信息。从错误信息中我们可以看出，age 属性的值不符合规则，因为它的类型是数字，但值小于 0。errorMessage 属性指明了错误的原因，actualValue 属性指明了实际的属性值，minValue 属性指定了 age 属性的最小值。
如果一个对象中有多个属性，我们可以通过传递多个规则对象验证这些属性：
-- -------------------- ---- ------- ----- ------ - - ----- ------ ---- ---- ------- ---------- -- ----- ----------- - - ----- - ----- --------- ---------- --- -- ---- - ----- --------- --------- -- --------- --- -- ------- - ----- --------- ----------- -------- --------- -------- -- -- ----- ------ - ------------ ------------- --------------------
上述示例中，我们创建了三个属性的规则对象 personRules，用于验证 person 对象的属性。由于 age 属性的值小于 0，gender 属性的值不在枚举值列表中，因此会输出以下错误信息：
-- -------------------- ---- -------
-
---- -
----- ---------
------------ ----
--------- --
-------- ------- -- - ------ ------- ---- -- ----- -- --
--
------- -
----- ---------
------------ ----------
----------- - ------- --------- ------- --
-------- ------- -- --- -- --------------------------
-
-自定义错误信息
我们可以通过传递额外的参数来自定义错误信息。例如，我们可以将 age 属性验证的错误信息改为中文：
const personRules = {
name: { type: "string", maxLength: 100 },
age: { type: "number", minValue: 0, maxValue: 120, message: "必须是0到120岁之间的数字" },
gender: { type: "string", enumValues: ["male", "female", "other"] },
};
const result = cspm(person, personRules);
console.log(result);上述示例中，我们在 age 属性的规则对象中添加了自定义的错误信息 message。
自定义验证函数
除了使用预定义的验证规则外，我们还可以使用自定义的验证函数进行验证。例如，我们可以定义一个用于验证身份证号码的函数 idValidator：
-- -------------------- ---- -------
-------- --------------- -
-- -------
-- ---------------------------- -
------ ----------
- ---- -
------ -
------------ ---
-------- -------------
--
-
-接着，我们可以将 idValidator 函数传递给 cspm 函数进行验证：
-- -------------------- ---- ------- ----- ----------- - - ----- - ----- --------- ---------- --- -- ---- - ----- --------- --------- -- --------- --- -- ------- - ----- --------- ----------- -------- --------- -------- -- --- - ----- --------- ---------- ----------- -- -- ----- ------ - - ----- ------ ---- --- ------- ------- --- --------------------- -- ----- ------ - ------------ ------------- --------------------
上述示例中，我们定义了一个规则对象 personRules，其中 id 属性的验证规则包含了一个自定义验证函数 idValidator。由于传递的身份证号码符合规则，因此不会输出任何错误信息。
集成到框架中
如果你正在使用一个框架，并希望在项目中使用 cspm 进行属性验证，可以将 cspm 添加到中间件中，并将验证结果集成到框架的错误机制中。以 Express 框架为例，我们可以定义一个名为 validateParams 的中间件函数：
-- -------------------- ---- -------
-------- --------------------- -
------ -------- ----- ---- ----- -
----- ------ - ---------------- -------
-- -------- -
-----------------------------
- ---- -
-------
-
--
-上述 validateParams 函数接受一个规则对象 rules，返回一个函数，该函数是中间件函数。该中间件函数将 req.params 作为参数传递给 cspm 函数进行验证，如果有错误则返回 400 状态码和错误信息。否则，将中间件控制权转移给下一个中间件函数。
接着，我们可以在 Express 框架的路由中使用 validateParams 中间件函数：
app.get("/user/:id", validateParams(idRules), function (req, res) {
// 处理用户请求
});上述示例中，我们使用 validateParams 中间件函数验证了路由参数 id 是否符合 idRules 规则。如果有错误，则将错误信息返回给客户端。否则，继续另一个中间件函数。
总结
cspm 是一个基于规则的属性验证工具，它可以根据预定义的规则检查属性值的类型、范围、格式等。使用 cspm，可以提高前端代码的正确性和可靠性。除了基本用法之外，cspm 还支持自定义错误信息和自定义验证函数。将 cspm 集成到框架中，可以进一步提高代码的质量。
示例代码
https://github.com/zijianjiao/learn-cspm
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d9e81e8991b448db5a4