案例22-面向对象的原型设计

简介: 面向对象的原型设计

一:背景介绍

       面向对象的思想仅仅可以用在后端写代码的过程中,也可以应用在前端进行原型设计上。我们在开发一个需求的时候会发现有很多的地方是类似的,比如说都需要弹框,都需要下拉列表。如果我们每个地方都写一遍下拉框的样式代码效率会很低。后期如果调整,调整的位置也很多,很有可能会有改不到的地方。这样我们的工作效率就会很低。

fd5269c9a1d946558d98f611370e54b8.png

二:思路&方案

       提高我们前端的工作效率:将类似的功能或者样式封装起来。用的时候直接引用就可以了,引用之后也可以根据业务场景进行调整。这样我们做了一个工作相当于做了以后每次都需要自己写下拉框或者其他组件的工作。

三:过程

      639eafb15fba4e33a3d147f047505bf0.png

      下拉列表是我们在做前端设计的时候非常常用的一个组件,这时候我们就可以把下拉列表封装成一个组件,那个页面需要使用直接引用就可以了。组件的宽度高度引用之后都可以调整。以下是下拉列表的引用。4df1616561fd4fe8b5fc9d53e3e29a87.png

f46661c34d2e44139b64186888cc5065.png

四:总结

       面向对象的思想无处不在,不仅仅可以在后端代码中应用。在前端的的组件中也是可以应用的。第一次封装看似比较复杂,但是为后面代码或者组件复用的时候提高了工作效率。整体来说效率是提高的。


相关文章
|
7月前
|
数据可视化 测试技术
面向对象系统分析与设计
【1月更文挑战第10天】面向对象系统分析与设计。
82 0
|
3月前
|
PHP 开发者
PHP编程中的面向对象基础与实践
【9月更文挑战第27天】在PHP的海洋里,面向对象编程(OOP)是一艘强大的船,它不仅能让代码组织得更加优雅,还能提高开发效率。本文将带你领略OOP的魅力,从基础概念到实际应用,让你轻松驾驭这艘船,开启高效编程之旅。
|
4月前
|
前端开发 C# 设计模式
“深度剖析WPF开发中的设计模式应用:以MVVM为核心,手把手教你重构代码结构,实现软件工程的最佳实践与高效协作”
【8月更文挑战第31天】设计模式是在软件工程中解决常见问题的成熟方案。在WPF开发中,合理应用如MVC、MVVM及工厂模式等能显著提升代码质量和可维护性。本文通过具体案例,详细解析了这些模式的实际应用,特别是MVVM模式如何通过分离UI逻辑与业务逻辑,实现视图与模型的松耦合,从而优化代码结构并提高开发效率。通过示例代码展示了从模型定义、视图模型管理到视图展示的全过程,帮助读者更好地理解并应用这些模式。
128 0
|
C++
C++语言学习面向对象编程应用案例
C++语言学习面向对象编程应用案例
88 1
|
搜索推荐
|
架构师 Java 测试技术
软件设计实践:如何使用UML完成一个设计文档?
软件设计实践:如何使用UML完成一个设计文档?UML 建模可以很复杂,也可以很简单,简单掌握类图、时序图、组件图、部署图、用例 图、状态图、活动图这 7 种模型图,根据场景的不同,灵活在需求分析、概要设计和详细设计阶段绘制对应的模型图,可以实实在在地做好软件建模,搞好系统设计,做一个掌控局面、引领技术团队的架构师。
355 1
软件设计实践:如何使用UML完成一个设计文档?