今天同事的一句话给我留下深刻的印象:“前端也有MVC,DOM树就是这个M,CSS就是这个V,至于C,非JavaScript莫属”。
很高兴团队中有越来越多的人能够跳出某种语言、某种平台的局限性,站到抽象的层次上思考一些设计上的问题。在我的印象中,似乎前端开发总是容易给人以随意、混乱的感觉,可真的是前端技能不容易掌握吗?
“大学里Java课程正儿八经学了3年,JavaScript只字未提,只是课余时间凭借着兴趣自学,加起来也就两三个月。”
前端代码更加灵活,无论是HTML、JavaScript还是CSS,似乎任何一个初学者都可以轻松入门。可是越是看似简单的东西,就越难以精通地掌握,没有好的设计来引导,如果技能不过硬,很容易陷入混乱的困顿之中。
回到标题,来看看怎么从后端设计来类比前端设计。
一、模型和业务逻辑的分离:
写后台代码,模型层是很容易划分出来的,模型的建立是整体设计的第一步,美工在设计页面时,最关注一个页面最宏观的盒子模型;而Service层,适合存放业务逻辑,它们可以做到无状态和池化的。
前端开发呢,当JQuery或类似的框架出现以后,DOM模型就可以完全和业务方法分离开了,通过这样美妙的绑定代码来完成关联和解耦:
$("#userName").click(function(){
……
});
二、让视图层独立:
通常不要使用内联CSS和嵌入CSS,视图层要让经验丰富的美工管理起来。
三、找到一个合适的切面来做接口层:
还是这几行代码:
$("#userName").click(function(){
……
});
我们来换一个角度思考:
userName就好像是Java中的接口,click就好比是接口中的方法,如果这两个东西是既定不变的,接口的实现类当然可以随意更换了啊。
这个让我想起了Spring的IoC,把对象的管理和控制权交给容器去完成——那么在前端,就把这个权利交给了JQuery的绑定逻辑去完成。
如果功能类似的页面,要求更换几套不同的效果,那么保持一个清晰的接口层,围绕接口层去完成不同的实现模板,将是一个值得尝试的方式:
//实现类一:
$("userName").click(function(){
alert("U Click Me"); //模板一的实现
});
……
//实现类二:
$("userName").click(function(){
$("userTypeFont").attr("color","RED"); //模板二的实现
});
……
在这种情形下,接口层DOM的id和职责方法都被固定下来,开发人员可以按照接口开发、美工可以按照接口层在盒子模型中完善页面设计、测试可以按照接口来写自动化用例,这一切可美好多了!
四、针对接口来编排业务逻辑:
第三条已经建立了合适的接口层,那么相对固定的界面效果和逻辑,就可以通过桥接模式下对接口的引用来完成了。即便更换了关系到展现效果的模板,核心JavaScript都不会变化。
五、分离模板和数据:
模板和数据的整合,似乎是后端应该做的事,例如FreeMarker模板和数据的整合,最终形成页面。
现在,这件事情在前端也可以完成了:
(1)生成相对静态的模板:
<div id="userName">${user.userName}</div>
(2)Ajax获取到模板的数据:
{"user":{"name":"James"}}
(3) 浏览器端聚合,搞定最后的页面:
<div id="userName">James</div>
这样做的静态模板的很容易在缓存中命中,而数据的生成也非常灵活,最后,聚合是在客户端完成的,这方面对服务端没有压力,因此性能往往非常高。
六、归纳一下:抽象,是软件设计的核心艺术。即便前端设计,也一样。
文章系本人原创,转载请注明作者和出处
分享到:
相关推荐
根据从定性到定量综合集成法原理,提出了适用于复杂巨系统间相似性与差异性分析的特征树类比法及相关理论,并给出了特征树模型结构及定量计算相似性指数的计算机算法,以此为基础构建人机交互的类比分析体系。...
基于javaweb的3d密室逃脱游戏前端和后端源码+项目说明.zip 场景: 代码中有两套完整的Threejs的场景布置,即THREE.Scene + Camera + Controls (用来自动更新Camera),两个场景共用renderer和canvas,相当于在canvas...
联想法 第二章 设计程序与新产品开发流程--设计思维 列举法 集团发想法 仿生、类比法 整理法 设计程序与方法-设计思维全文共73页,当前为第1页。 设计程序与方法-设计思维全文共73页,当前为第2页。 思维是人脑对...
无色设计(achromatic)、类比设计(analogous)、冲突设计(clash)、互补设计(complement)、单色设计(monochromatic)、中性设计(neutral)、分裂补色设计(splitcomplement)、原色设计(primary)、二次色设计(secondary)...
教育精品资料
针对煤矿大断面回采巷道的薄层状顶、底板条件和受构造...对支护参数的对比分析和应用实践表明,组合梁理论对巷道支护设计的指导性较差,采用其他3种支护理论和工程类比相结合的方法可以较好地指导大断面煤巷的支护设计。
桥梁智能CAD系统中类比设计.pdf
无色设计(achromatic)、类比设计(analogous)、冲突设计(clash)、 互补设计(complement)、单色设计(monochromatic)、中性设计(neutral)、 分裂补色设计(splitcomplement)、原色设计(primary)、 二次色设计...
《轻量化设计:计算基础与构件结构》的目的是通过讲述原理与进行类比推理,帮助读者针对所面临的问题自己找到适当的解决方法。《轻量化设计:计算基础与构件结构》附有大量练习题,特别适合读者自学。书中所给出的...
类比反义2000组 类比反义2000组 类比反义2000组
C++ Builder 写的一个类比时钟小程序, 可以定时 到点有声音提示
全书用两章篇幅对设计模式和GRASP作了基本介绍,3种设计模式的讲解:对于每一种模式,先给出定义,接着通过类比方式用一个现实世界中的例子说明模式的应用,然后分别以C#和Java代码例述模式的架构实现。最后一章给出...
猴哥GRE类比反义速记,猴哥GRE类比反义速记
在计算机网络课程中应用类比教学的思考与实践.pdf
无色设计(achromatic)、类比设计(analogous)、冲突设计(clash)、 互补设计(complement)、单色设计(monochromatic)、中性设计(neutral)、 分裂补色设计(splitcomplement)、原色设计(primary)、 二次色设计...
类比推理经典解析.pdf
类比法在《C语言程序设计》教学中的运用 (1)