在 JavaScript 和 TypeScript 框架中应用 SOLID 原则
在 JavaScript 和 TypeScript 框架中应用 SOLID 原则
介绍
SOLID 原则是面向对象设计的五个基本原则，旨在帮助开发者创建可维护、可扩展和可重用的代码。虽然这些原则起源于面向对象编程，但它们可以有效地应用于 JavaScript。本文通过JS中的真实示例解释了每个原则。
1.单一职责原则 (Single Responsibility Principle, SRP)
原则： 每个类或模块应该只有一个单一的职责，即只负责一项功能。这样可以降低类之间的耦合度，提高代码的可维护性。
例如下面的 react 代码，我们经常看到组件负责太多事情——例如管理UI和业务逻辑。
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUserData();
}, [userId]);
async function fetchUserData() {
const response = await fetch(`/api/users/${userId}`);
const data = await response.json();
setUser(data);
}
return <div>{user?.name}</div>;
}
UserProfile组件违反了SRP，因为它同时处理UI渲染和数据提取。重构之后
// Custom hook for fetching user data
function useUserData(userId) {
const [user, setUser] = useState(null);
useEffect(() => {
async function fetchUserData() {
const response = await fetch(`/api/users/${userId}`);
const data = await response.json();
setUser(data);
}
fetchUserData();
}, [userId]);
return user;
}
// UI Component
function UserProfile({ userId }) {
const user = useUserData(userId); // Moved data fetching logic to a hook
return <div>{user?.name}</div>;
}
我们将数据获取逻辑与 UI 分离，让每个部分负责单个任务。
2.开放/封闭原则（OCP）
原则： 软件实体（类、模块、函数等）应该对扩展开放，对修改封闭。这意味着你应该能够通过扩展现有代码来添加新功能，而不需要修改已有的代码。
例如下面的 JavaScript 代码，有一个运行良好的表单验证功能，但将来可能需要额外的验证逻辑。每当您需要新的验证规则时，您就必须修改此功能，从而违反 OCP
function validate(input) {
if (input.length < 5) {
return 'Input is too short';
}
if (!input.includes('@')) {
return 'Invalid email';
}
return 'Valid input';
}
重构之后，我们可以扩展验证规则，而不需要修改原有的验证函数，遵循OCP
function validate(input, rules) {
return rules.map(rule => rule(input)).find(result => result !== 'Valid') || 'Valid input';
}
const lengthRule = input => input.length >= 5 ? 'Valid' : 'Input is too short';
const emailRule = input => input.includes('@') ? 'Valid' : 'Invalid email';
validate('test@domain.com', [lengthRule, emailRule]);
3.里氏替换原则（LSP）
原则： 子类应该能够替代其父类，并且在程序中可以无缝使用。换句话说，使用子类的对象时，程序的正确性不应受到影响。
例如react中，当使用高阶组件（HOC）或有条件地渲染不同组件时，LSP有助于确保所有组件的行为都可预测
但是下面的代码中，组件不能互换，因为它们使用不同的 props（onClick 与 href）。
function Button({ onClick }) {
return <button onClick={onClick}>Click me</button>;
}
function LinkButton({ href }) {
return <a href={href}>Click me</a>;
}
// Inconsistent use of onClick and href makes substitution difficult
<Button onClick={() => {}} />;
<LinkButton href="/home" />;
重构之后，两个组件（Button 和 LinkButton）在语义上都是正确的，遵守 HTML 可访问性标准，并且在遵循 LSP 时行为一致
function Actionable({ onClick, href, children }) {
if (href) {
return <a href={href}>{children}</a>;
} else {
return <button onClick={onClick}>{children}</button>;
}
}
function Button({ onClick }) {
return <Actionable onClick={onClick}>Click me</Actionable>;
}
function LinkButton({ href }) {
return <Actionable href={href}>Go Home</Actionable>;
}
4.接口隔离原则（ISP）
原则： 不应该强迫一个类依赖于它不使用的方法。应该将大接口分解成小接口，以便实现更精确的依赖关系，降低类之间的耦合度。
例如下面的 React 组件有时会收到不必要的 props，导致代码紧密耦合且臃肿，
function MultiPurposeComponent({ user, posts, comments }) {
return (
<div>
<UserProfile user={user} />
<UserPosts posts={posts} />
<UserComments comments={comments} />
</div>
);
}
重构之后，通过将组件拆分为更小的组件，每个组件仅依赖于它实际使用的数据。
function UserProfileComponent({ user }) {
return <UserProfile user={user} />;
}
function UserPostsComponent({ posts }) {
return <UserPosts posts={posts} />;
}
function UserCommentsComponent({ comments }) {
return <UserComments comments={comments} />;
}
5.依赖倒置原则（DIP）
原则： 高级模块不应该依赖于低级模块。两者都应该依赖于抽象（例如接口）
下面的代码中，UserComponent 与 fetchUser 函数紧密耦合。
function fetchUser(userId) {
return fetch(`/api/users/${userId}`).then(res => res.json());
}
function UserComponent({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser(userId).then(setUser);
}, [userId]);
return <div>{user?.name}</div>;
}
重构之后，通过将 fetchUserData 注入组件，我们可以轻松地交换实现以进行测试或用于不同的用例。
function UserComponent({ userId, fetchUserData }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUserData(userId).then(setUser);
}, [userId, fetchUserData]);
return <div>{user?.name}</div>;
}
// Usage
<UserComponent userId={1} fetchUserData={fetchUser} />;
结论
SOLID 原则对于确保您的代码干净、可维护且可扩展非常有效，即使在 JavaScript 和 TypeScript 框架中也是如此。应用这些原则使开发人员能够编写灵活且可重复使用的代码，这些代码易于随着需求的发展而扩展和重构。通过遵循 SOLID，您可以使您的代码库变得强大并为未来的增长做好准备
本文翻译的原文地址：Applying SOLID Principles in JavaScript and TypeScript Framework
腾讯云开发者
