前端设计模式和设计原则之设计原则

这篇具有很好参考价值的文章主要介绍了前端设计模式和设计原则之设计原则。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端设计原则

1 开闭原则

该原则指出软件实体(类、模块、函数等)应该对扩展开放,对修改关闭。也就是说,在添加新功能时,应该通过扩展现有代码来实现,而不是直接修改已有的代码。这样可以确保现有代码的稳定性,并且减少对其他部分的影响。

// 开闭原则示例

// 原始功能实现类
class OriginalFunctionality {
  performAction() {
    console.log("Original functionality");
  }
}

// 扩展功能实现类
class ExtendedFunctionality extends OriginalFunctionality {
  performAction() {
    super.performAction();
    console.log("Extended functionality");
  }
}

// 使用示例
const functionality = new ExtendedFunctionality();
functionality.performAction();

在上述例子中,有一个原始功能实现类 OriginalFunctionality,它定义了一个 performAction 方法来执行某些功能。

根据开闭原则,需要通过扩展而不是修改原始功能类来添加新功能。因此,创建一个扩展功能实现类 ExtendedFunctionality,它继承自 OriginalFunctionality 并重写了 performAction 方法,在执行新功能之前先调用了原始功能。

通过应用开闭原则,可以减少对现有代码的修改,从而提高代码的稳定性和可维护性。同时,它也使得代码更易于扩展和重用,提供了更灵活的架构设计。

这里,再介绍一个常见的开闭原则示例

// 原始的 if-else 结构
function performAction(option) {
  if (option === 'A') {
    console.log("Performing action A");
  } else if (option === 'B') {
    console.log("Performing action B");
  } else if (option === 'C') {
    console.log("Performing action C");
  } else {
    console.log("Invalid option");
  }
}

// 使用 key-value 形式执行特定逻辑
const actions = {
  A: () => console.log("Performing action A"),
  B: () => console.log("Performing action B"),
  C: () => console.log("Performing action C"),
};

function performAction(option) {
  const action = actions[option];
  if (action) {
    action();
  } else {
    console.log("Invalid option");
  }
}

// 使用示例
performAction('A'); // 输出: Performing action A
performAction('B'); // 输出: Performing action B
performAction('C'); // 输出: Performing action C
performAction('D'); // 输出: Invalid option

if-else 结构改成 key-value 形式来执行特定逻辑,可以被视为一种应用开闭原则的方式。这样的改变允许通过添加新的键值对来扩展代码,而不需要修改原有的逻辑。

2 单一职责原则

该原则提倡每个类或模块应该只负责一个单一的功能或任务。这样可以提高代码的可读性、可维护性和重用性。当一个类具有多个职责时,建议将其拆分为多个独立的类,每个类专注于一个职责。

// 组件的单一职责示例

// 用户列表组件,负责渲染用户列表
class UserList {
  render(users) {
    // 渲染用户列表逻辑...
    console.log("User list rendered:", users);
  }
}

// 用户管理组件,负责处理用户的增删改操作
class UserManager {
  createUser(userData) {
    // 创建用户逻辑...
    console.log("User created:", userData);
  }

  updateUser(userId, userData) {
    // 更新用户逻辑...
    console.log("User updated:", userId, userData);
  }

  deleteUser(userId) {
    // 删除用户逻辑...
    console.log("User deleted:", userId);
  }
}

// 模块的单一职责示例

// 用户相关功能模块,仅负责用户相关的功能
const userModule = {
  createUser(userData) {
    // 创建用户逻辑...
    console.log("User created:", userData);
  },

  updateUser(userId, userData) {
    // 更新用户逻辑...
    console.log("User updated:", userId, userData);
  },

  deleteUser(userId) {
    // 删除用户逻辑...
    console.log("User deleted:", userId);
  }
};

// 函数的单一职责示例

// 检查用户名是否唯一
function checkUsernameUnique(username) {
  // 检查用户名唯一性逻辑...
  console.log("Checking username uniqueness:", username);
  return true;
}

// 验证密码
function validatePassword(password) {
  // 验证密码逻辑...
  console.log("Validating password:", password);
  return true;
}

// 使用示例
const userList = new UserList();
userList.render(["John", "Mike"]);

const userManager = new UserManager();
userManager.createUser({ name: "John", age: 25 });

userModule.updateUser(1, { name: "Mike" });

checkUsernameUnique("john123");

validatePassword("password123");

上述示例展示了组件、模块和函数单一职责原则应用。

  • 组件的单一职责:UserList 组件负责渲染用户列表,UserManager 组件负责处理用户的增删改操作。每个组件只负责一个特定的功能,使得代码更加清晰和易于维护。

  • 模块的单一职责:userModule 是一个用户相关功能的模块,其中包含了创建、更新和删除用户的功能。该模块只关注用户相关的功能,保持了模块的单一职责。

  • 函数的单一职责:checkUsernameUnique 函数用于检查用户名是否唯一,validatePassword 函数用于验证密码。每个函数负责一个具体的功能,使得函数的职责清晰可见。

通过应用单一职责原则,可以将不同的功能分别封装到不同的组件、模块和函数中,使代码更具可读性、可维护性和重用性。这种设计方式帮助我们遵循独立职责的原则,提高代码的可扩展性,并减少不必要的耦合。

3 依赖倒置原则

该原则提倡通过抽象来解耦代码之间的依赖关系。高层模块应该依赖于抽象接口,而不是具体实现细节。这样可以降低模块之间的耦合度,并且使得系统更容易扩展和修改,同时也更易于进行测试。

// 不符合依赖倒置原则

class UserService {
  getUser(userId) {
    // 获取用户逻辑...
  }
}

class UserController {
  constructor() {
    this.userService = new UserService();
  }

  getUser(userId) {
    const user = this.userService.getUser(userId);
    // 处理用户数据逻辑...
  }
}

// 符合依赖倒置原则

class UserService {
  getUser(userId) {
    // 获取用户逻辑...
  }
}

class UserController {
  constructor(userService) {
    this.userService = userService;
  }

  getUser(userId) {
    const user = this.userService.getUser(userId);
    // 处理用户数据逻辑...
  }
}

// 使用示例

const userService = new UserService();
const userController = new UserController(userService);

userController.getUser(123);

上述示例展示了一个不符合依赖倒置原则的情况和一个符合依赖倒置原则的情况。

在不符合原则的情况下,UserController 类内部直接创建了 UserService 的实例。这种硬编码的依赖关系导致了紧耦合,不利于代码的扩展和维护。

通过采用依赖注入的方式,可以将 UserService 作为参数传递给 UserController 的构造函数。这样,UserController 不再关心具体的 UserService 实现,而是依赖于抽象接口,降低了组件之间的耦合性。文章来源地址https://www.toymoban.com/news/detail-733258.html

到了这里,关于前端设计模式和设计原则之设计原则的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Java 设计模式】设计原则之开放封闭原则

    在软件开发中,设计原则是创建灵活、可维护和可扩展软件的基础。 这些原则为我们提供了指导方针,帮助我们构建高质量、易理解的代码。 ✨单一职责原则(SRP) ✨开放/封闭原则(OCP) ✨里氏替换原则(LSP) ✨依赖倒置原则(DIP) ✨接口隔离原则(ISP) ✨合成/聚合复

    2024年02月02日
    浏览(34)
  • 设计模式——设计模式以及六大原则概述

    设计模式代表有经验的面向对象软件开发人员使用的最佳实践。 设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。 这些解决方案是由许多软件开发人员在相当长的时间内通过试错获得的。 在 1994 年,由 Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides 四

    2024年02月13日
    浏览(35)
  • 设计模式的设计原则

    为什么需要设计模式? 我的理解设计模式就是一种针对某种问题的套路,是一套被反复使用,多数人所知晓的,经过分类编目的,代码设计经验的总结。 1.开闭原则 1.1 定义:     一个软件实体应当对扩展开放,对修改关闭,即软件实体应尽量在不修改原有代码下进行扩展

    2024年02月09日
    浏览(29)
  • 设计模式-原则篇-01.开闭原则

    ​ 可以把设计模式理解为一套比较成熟并且成体系的建筑图纸,经过多次编码检验目前看来使用效果还不错的软件设计方案。适用的场景也比较广泛,在使用具体的设计模式之前先要学习软件设计的基础 “软件设计原则”,后面的23个设计模式都是遵从“软件设计原则演变而

    2024年02月09日
    浏览(27)
  • 软件设计模式原则(二)开闭原则

    继续讲解第二个重要的设计模式原则——开闭原则~ 一.定义         开闭原则,在面向对象编程领域中,规定“软件中的对象(类,模块,函数等等)应该对于扩展是开放的,但是对于修改是封闭的”,这意味着一个实体是允许在不改变它的源代码的前提下变更它的行为

    2024年02月06日
    浏览(35)
  • 设计模式】引言-六大设计原则

    ● 概念:仅有一个引起其变化的原因。 ● 个人理解:一个类中应该是一组相关性很高的函数及数据的封装 主观性较强,和起名一样困难,一个方法放在ClassA合理还是放在ClassB合理? ● 概念:一个软件实体应当对扩展开放,对修改关闭。即软件实体应尽量在不修改原有代码

    2023年04月24日
    浏览(30)
  • 设计原则及设计模式基础

     设计模式是一套被反复使用的、多数人知晓的、经过分类编目的代码设计经验的总结,使用设计模式是为了可以重用代码,让代码更容易被他人理解并且提高代码的可靠性。 GoF(Gang Of Four 四人组,指4位著名软件工程学者),在1994年归纳发表了23中在软件开发中使用频率较高的

    2024年02月15日
    浏览(25)
  • 软件设计原则与设计模式

    设计中各各原则同时兼有或冲突,不存在包含所有原则的设计 一:单一职责原则又称单一功能原则 核心:解耦和增强内聚性(高内聚,低耦合) 描述:类被修改的几率很大,因此应该专注于单一的功能。如果你把多个功能放在同一个类中,功能之间就形成了关联。 二:开闭

    2024年02月10日
    浏览(31)
  • 设计模式之六大设计原则

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年02月02日
    浏览(32)
  • 设计模式的六大设计原则

    一个类只负责一个单一明确的职责。如果一个类同时负责多个职责,来自职责A的需求变更引起的修改可能会导致职责B的功能发生故障。 比如说一个类T原本是符合单一职责的,后来因为某种原因或者是需求变更了,需要将职责P细分为颗粒度更细的职责P1和职责P2,这时候可以

    2024年02月09日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包