逻辑与样式分离
这是我从网页前端设计的HTML、JavaScript、CSS借鉴而来的概念,适用于所有团队开发。
定义各组件的时候,往往会有下面这种想法
我Circle circle = new Circle(centerX,centerY,radius),顺便就在下面加上 setFill(Color.RED),setEffect(New Bloom()),setStroke(Color.rgb(12,12,13)),setStrokeWidth(20)等等,后面再有对这个circle的部分逻辑处理
这样仿佛代码可读性不错,定义对象后紧跟着其样式属性设置,代码很简练
但是假设我下面又打算对这个circle注册鼠标事件,动态改变其样式
circle.setOnMouseEntered(e->{
Circle src = (Circle)e.getSource();
src.setFill(Color.BLUE);
src.setEffect(null);
src.setStroke(Color.rgb(225,225,224));
src.setStrokeWidth(10);
//后面是还要触发的别的处理
………………
});
似乎这样子写,与circle相关的代码都在一起,好像也挺不错的,没有什么问题。
但是其实问题已经体现出来了
1.样式设计格式不规整,除了单纯的样式设计,还杂糅了很多逻辑代码,看起来不直观(这个小问题可以通过改变代码排版来解决,倒没什么。但不同的人或许把样式代码倾向于放在不同的位置,因此格式统一还是要进一步沟通)。
2.其他人修改时困难重重,这里是只有一个circle,假设用作某个模拟按钮。好像一眼别人看起来一眼就能找到。但倘若该界面中还有十几个不同样式的circle,别人如何辨别哪个类中的哪个circle是界面上的是这个模拟按钮呢?可能需要反复沟通,或者在所有类中每一个不同的圆都定义一个不同的名字并告知其他人你的命名规则。
3.重用性太差(这个或许可以把这段代码放在一个方法中来解决,但这样不也是一种逻辑与样式分离吗?)
但与其要在编写代码时额外注意使用上诉三点后括号里的方式,倒不如直接使用外接CSS来得简单直接,每个人代码中对象的样式在CSS文件可以找到,修改。
在源文件中,为cicle设置一个类名,然后以后调试修改其样式,可不必在一份长达几百行的源文件中搜索这几行改样式的代码,而是直接在对应的CSS文件中找到这个类修改即可。