首页 > 其他分享 >组件化的思维

组件化的思维

时间:2023-03-29 22:45:16浏览次数:46  
标签:思维 逻辑 代码 维护性 扩展性 最小化 组件

关于代码的组件化,我一直认为都是有必要的。我所坚持该观点主要来自于以下几项。

  • 结构最小化
  • 维护性
  • 扩展性

抽象代码是结构最小化必备的思想。为什么?从编码角度,代码可以分为系统代码业务代码。首先,系统代码是维护系统逻辑和业务逻辑必要的基石。抽象代码的目的,就是将业务逻辑和系统逻辑拆分,两者不冲突。最简单的方式是,从现有各个语言框架看,抽象思维遍地都是,抽象的另一个目的就是简化逻辑。让逻辑调用更简单。在我看来,抽象代码是相对来说是比较复杂的,首先需要对业务有足够了解,其次是对语言框架的了解。

维护性是从组件内考虑的。组件内的方法逻辑有调整,不会对外部调用者造成影响。在这一部分常犯的错误就是冗余,很多情况下,会出现两个相似的使用场景,但是存在一定的差异,有些做法大多会采用兼容多个场景的方式。

扩展性也是从组件内部考虑的。要从结构最小化来思考,如果某个组件存在兼容两个组件的情况,维护的代码量和拆分组件的代码量哪个更优,如果某个功能点调整,是否需要调整兼容组件的逻辑。这里影响的就是扩展性。

举个简单的前端代码例子,

  • 提示框
  • 对话框

这两个组件的共性:弹出层,有按钮,有文字内容标题,有点击事件。差异性:按钮数量不一样。

从抽象代码角度看,结构最小化拆分为两个组件,存在部分相同的代码。达不到完全的最小化

从维护性来看,减少了为了兼容性而编写的代码,比较简洁。

从扩展性来看,对话框展示的内容有可能调整为html节点,提示框不改变,只要调整对话框即可,调整时不需要考虑兼容性。不会有太多冗余。或者出现较多差异性,各自调整各自的,不会影响,也不会出现兼容性错误。多好

由于最近工作中,有编写前端代码的需求,把实际所得的体会简单记录下,脑容量毕竟有限,还是记录下来比较好。在查询资料时,有一篇关于redux的文档,还挺不错的,react的思想还是挺好的,界面和状态分开,各干各的。

标签:思维,逻辑,代码,维护性,扩展性,最小化,组件
From: https://www.cnblogs.com/ckia/p/17270728.html

相关文章

  • antd 修改组件样式除了在全局修改还有其他方法
     修改input框的 border-radius  第一步安装lessyarnaddlessless-loader--save-dev第二步在需要修改的文件下新建antdStyle.less配置 antdStyle.less......
  • Android开发-Android常用组件-ImageView图像视图
    4.4 ImageView(图像视图)ImageView见名知意,就是用来显示图像的一个View或者说控件 需掌握的知识点:ImageView的src属性和blackground的区别;adjustViewBounds设置......
  • vue动态切换组件
    多个组件挂在到同一个组件上,通过参数进行动态切换一、实现方式<component:is="componentName"></component> 二、示例importPage1from'./Page1'importPage2......
  • OpenScenario场景仿真结构思维导图, OpenScenario是 自动驾驶仿真软件carla推出来的场
    OpenScenario场景仿真结构思维导图,OpenScenario是自动驾驶仿真软件carla推出来的场景仿真标准,可配合carla一起完成整套自动驾驶的闭环仿真过程,将场景搭建变成可编程化的......
  • element 初始化组件功能
    前言这篇文章学习element组件库是如何初始化组件的。资源:源码地址:element-analysis/new.js源码入口文件找到用于初始化组件的脚本,位置如图:开始脚本的开始引用了......
  • vue 软键盘组件封装
    场景和需求1软键盘固定2多输入框共用一个组件,聚焦切换时操作对象自动切换3根据光标在输入框的位置进行相应的输入和删除操作4点击软键盘时保存输入框光标活跃5输......
  • 第四部分:Spdlog日志库的核心组件分析-logger
    Spdlog是一个快速且可扩展的C++日志库,它支持多线程和异步日志记录。在本文中,我们将分析Spdlog日志库的核心代码,探究其实现原理和代码结构。Spdlog的基本架构上一篇文章介......
  • 记录一下典型的思维题
    《找到最长的区间,使区间内字符数相等》  即这个序列只有两种字符   不要二分,会去世......
  • Android开发-Android常用组件-Button按钮
    4.3 Button(按钮)Button控件继承TextView,拥有TextView的属性。StateListDrawable简介StateListDrawable是Drawable资源的一种,可以根据不同的状态,设置不同的图片......
  • Vue子组件向父组件传值(this.$emit()方法)
    子组件使用this.$emit()向父组件传值首先必须在父组件中引用子组件,然后实现传值第一步在父组件中引入子组件 importUnitByPurchaseAddOrUpdatefrom'@views/module......