项目实战22—原型图的复用思想

简介: 项目实战22—原型图的复用思想

什么是面向对象思想:

我们要注重谁来干事,而不是怎么干事

颗粒封装、组合使用

可复用、可扩展

案例背景:

一个需要有多个页面的项目,这多个页面也对应着多个需要绘制的产品原型图。如果采用传统认知的面向过程的思维方式,那么每个页面的每一个细节都要亲力亲为,遇到相似的地方就Ctrl C+V,如何相似的地方是多个小控件的组合,还要每个都选中,麻烦的很,这是一个让人头疼的工作量

复用思想的实现:

比如下图这个样式,选中发现,它由背景框和五个图标这六个元素组成

那么在选中的状态下,右键>进行合并

合并成了一个大组件

下面选择把这个大组件保存为一个公共组件

如图

那么这样,在任何一个页面,只要需要就可以拖过去,一步操作即可。任何相似的在多个页面有涉及的元素,我们都可以封装成一个组件。和传统的方式相比,效率明显提高。

升华

当设计好了圆形的样式,那么下一步前端就需要把样式实现出来,那么开放过程中同样利用面向对象的思想。原型和前端页面想对应,原型中封装了什么组件,那么前端开发也封装什么组件。这样一来前期设计和开发的效率都提高了。

相关文章
|
7月前
|
设计模式 算法 Java
设计模式第十五讲:重构 - 改善既有代码的设计(下)
设计模式第十五讲:重构 - 改善既有代码的设计
244 0
|
6天前
|
设计模式
二十三种设计模式全面解析-解放组件间的通信束缚:深入探讨中介者模式的高级应用和进阶技巧
二十三种设计模式全面解析-解放组件间的通信束缚:深入探讨中介者模式的高级应用和进阶技巧
|
10月前
项目实战6—没有复用思想的反例
项目实战6—没有复用思想的反例
39 0
|
10月前
|
SQL 前端开发 Java
项目实战典型案例6——没有复用思想
项目实战典型案例6——没有复用思想
48 0
|
10月前
|
前端开发
项目实战典型案例22——原型图的面向对象思路
项目实战典型案例22——原型图的面向对象思路
52 1
|
10月前
|
SQL 前端开发 Java
【项目实战典型案例】06.没有复用思想
【项目实战典型案例】06.没有复用思想
【项目实战典型案例】22.原型图的面向对象
【项目实战典型案例】22.原型图的面向对象
【项目实战典型案例】22.原型图的面向对象
|
12月前
|
前端开发
前端学习笔记202303学习笔记第五天-了解组件化开发的思想
前端学习笔记202303学习笔记第五天-了解组件化开发的思想
42 0
|
前端开发
前端也要学习基本的UI设计原则与实践套路
有的人可能说,我是技术研发人员,UI的事情我们团队内会有别的人去操心这个,我只管技术即可。 在一天之前,我也是这么觉得的,但是我前些日子听了字节的《给开发看的UI设计》这节课后,觉得一个前端工程师也是要具备一定的UI设计能力的。 依赖市面上的组件库已经不能让产品维持在好用的状态了,还需要将一些设计元素添加进去,才能让我们开发的作品,达到一个更好的层次,给与用户最好的体验。 你的团队可能没有UI同学,也可能有UI同学,但是不一定专业,他们经常会是外包人员,UI给出的设计稿通常只是静态文件,是某一交互切面的,很多的交互细节都体现不出来,在大厂中,许多的B端产品是没有专职UI角色的,前端可能要
|
设计模式 Dubbo Java
结构型设计在工作中的一些经验总结
结构型设计在工作中的一些经验总结
74 0