当前位置: > 计算机专业 > web前端开发 >

由后端来类比前端设计的思考_Web前端开发工程师

编辑: 时间:2017-12-13 16:05:40 来源:ag娱乐平台手机版新华电脑学校 点击:

Web前端开发

  有这样一句话被提起:

前端也有MVC,DOM树就是这个M,CSS就是这个V,至于C,非JavaScript莫属。

  很高兴团队中有越来越多的人能够跳出某种语言、某种平台的局限性,站到抽象的层次上思考一些设计上的问题。在我的印象中,似乎前端开发总是容易给人以随意、混乱的感觉,可真的是前端技能不容易掌握吗?

大学里Java课程正儿八经学了3年,JavaScript只字未提,只是课余时间凭借着兴趣自学,加起来也就两三个月。

  前端代码更加灵活,无论是HTML、JavaScript还是CSS,似乎任何一个初学者都可以轻松入门。可是越是看似简单的东西,就越难以精通地掌握,没有好的设计来引导,如果技能不过硬,很容易陷入混乱的困顿之中。

  回到标题,来看看怎么从后端设计来类比前端设计。

  1. 模型和业务逻辑的分离:

  写后台代码,模型层是很容易划分出来的,模型的建立是整体设计的第一步,美工在设计页面时,最关注一个页面最宏观的盒子模型;而Service层,适合存放业务逻辑,它们可以做到无状态和池化的。

  前端开发呢,当jQuery或类似的框架出现以后,DOM模型就可以完全和业务方法分离开了,通过这样美妙的绑定代码来完成关联和解耦:

$("#userName").click(function(){ 
    …… 
});

  2. 让视图层独立:

  通常不要使用内联CSS和嵌入CSS,视图层要让经验丰富的美工管理起来。

  3. 找到一个合适的切面来做接口层

  还是这几行代码:

$("#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和职责方法都被固定下来,开发人员可以按照接口开发、美工可以按照接口层在盒子模型中完善页面设计、测试可以按照接口来写自动化用例,这一切可美好多了!

  4. 针对接口来编排业务逻辑:

  第三条已经建立了合适的接口层,那么相对固定的界面效果和逻辑,就可以通过桥接模式下对接口的引用来完成了。即便更换了关系到展现效果的模板,核心JavaScript都不会变化。

  5. 分离模板和数据

  模板和数据的整合,似乎是后端应该做的事,例如FreeMarker模板和数据的整合,最终形成页面。

  现在,这件事情在前端也可以完成了:

  (1)生成相对静态的模板:

<div id="userName">${user.userName}</div>

  (2)Ajax获取到模板的数据:

{"user":{"name":"James"}}

  (3) 浏览器端聚合,搞定最后的页面:

<div id="userName">James</div>

  这样做的静态模板的很容易在缓存中命中,而数据的生成也非常灵活,最后,聚合是在客户端完成的,这方面对服务端没有压力,因此性能往往非常高。

  6. 归纳一下:抽象,是App设计的核心艺术。即便前端设计,也一样。

TAG标签: Web前端开发

转载请注明源自ag娱乐平台手机版新华电脑App学校

★www.sxxhce.cn★

------分隔线----------------------------

专业课程

同类热门文章

新濠天地娱乐手机版 新濠天地 新濠电玩城手机版 新濠天地娱乐手机版 新濠电玩城官网下载 新濠天地娱乐官网3559 新豪天地880988.com 新濠天地娱乐官网15969
ca88亚洲城真人娱乐ca88亚洲城真人娱乐|资讯中心|精彩视频|专业设置|学校环境|就业保障|名师风采|网站地图|

ag娱乐平台手机版新华电脑学校

地址:ag娱乐平台手机版省西安市北稍门振华北路4号(西安市第十中学东侧)邮编:710014电话:029-82519999

高新校区地址:西安市雁塔区鱼斗路259号

陕ICP备11004055号-3www.sxxhce.cn

ag娱乐平台手机版新华电脑App学校Copyright@2006-2016 www.sxxhce.cn.All Rights Reserved.

声明:任何企业或个人不得以任何商业目的复制或传递本网站所载述的商标、文字、影像及图形图象,分享转载需注明来源本网站

Copyright©2006-2016 Sxxhce.Cn All Rights Reserved.Optimized for 1024x768 to Firefox,MS-IE6 IE7.   版权所有:北京朗杰科技有限企业

XML 地图 | Sitemap 地图