Thinking In Web [原创作品]

(转载请注明:http://zhutty.cnblogs.com, 交流请加群:164858883)

可能在大部分人来讲,前端就是可见的页面数据呈现正确就行。然而这样是不正确的,页面呈现是一部分,更多的是整体的可维护性。本篇讲述的主题就是应用后端开发思想进行前端开发。

后端开发,使用最广的就是java语言,而java给人的第一印象就是面向对象。面向对象的特性就是:封装,继承,多态。在实现面向对象过程中,很自然会产生MVC模型,以及分层结构:UI(视图接口), BLL(业务逻辑), DAO(数据访问)。

在前端开发如何做到 MVC和系统分层??

先举一个反例:在某直播项目中,有这样一个业务:有单一的展示窗口,里面展示的数据有以下4种:

a:xx 给 xx 送了xx礼物, 
b: xx 给 xx送了 xx置顶礼物, 
c: xx 在xx房间玩xx游戏中获得了xx宝物, 
d:xx在xx房里抽奖抽中了xx。

这里的动作是一样的,点击前者时,如果不是自己就弹出信息窗,是自己则跳转到自己的个人中心,点后者,弹出房间信息。现在bug来了:

a:赠送的置顶礼物时,前面的程序猿把主播和送礼物这id设置反了,弹窗信息和名称不一致了; 
b: 用户玩游戏时,弹出窗口的信息是用userId去查,而其他弹窗信息用的是kugouId去查,所以,弹出用户信息报错。 去查代码,我崩溃了,四个不同的js在在操控这一个dom。 如图所示,四个js都处理了dom的填装,并处理了相关的弹出用户信息的窗口。

这种方案的弊端: 1、如果ui有改变的时候,我要去4个js文件中找到$(‘#id‘).html(‘<>‘)把li字符串改变四次,并且改动是相同的。 
2、弹出窗口效果需要改四次。 
3、一个接口返回后端字段改变的时候,需要改变一个js时考虑其他js的影响,这就是bug b所述,前面开发者将后端的userID放在data-kuId属性值中,弹窗查询接口依赖于data-kuId这个值,所以弹窗中的用户信息获取不到。

更优雅的方式-MVC + 系统分层: 1、ui层为html,负责直接呈现效果。 
2、Controller 负责与UI唯一对应,所有操作UI效果数据由控制器负责。 
3、Model 为数据模型,与控制器相对应,可以写在一个文件,控制器多个方法可以操作模型数据。 
4、service 服务层,负责与后端进行数据交互,封装供控制器使用方法,以及和后端数据交互路由地址等。

优势:

A: 当其他模块需要引入次模块时,只需要调用控制器提供的方法即可。 
B: 当UI发生变化时,只需要改控制器即可,与其他引入此某块相关代码不需要改动。 
C: 当后端接口发生变化时,比如参数名,或者路由发生变化,只需要改动服务层代码即可,与其他调用模块无关。 
D: 代码独立存在,对其他业务没有影响,可扩展性可维护性极高。

时间: 2024-10-28 04:36:50

Thinking In Web [原创作品]的相关文章

[原创作品]web网页中的描点

因为近来在从事web前端开发的工作,所以写的文章也都是关于web这一块.以后将分享算法和web高级编程的内容,很多公司的web前端不够重视,以为是很low-level,给的待遇也很一般,其实,这都是很狭隘的理解.软件开发是一种很谨慎的工作,每一个环节都需要足够的重视.好了,不扯淡.需要扯淡的,点击左边信息栏加群按钮. 今天分享的内容是网页描点效果,就是在网页滚动到某个位置时,菜单有相应的变化.如图, 就是在滚动时,菜单会有相应的选中效果,点击菜单时,定位到网页内容. 菜单代码: 1 <ul cl

[原创作品]轮播焦点图插件的实现

在上上一期写了怎么写jq插件,现在,我把我写的一个焦点图插件贡献出来.不会写插件的朋友们可以参考我上次写的:http://www.cnblogs.com/zhutty/p/4630110.html.因为jq比较好掌握,以后这方面的介绍会少些,之后将与大家共享Angular,node,require,backbone等js内容.其实只要掌握了几种,其他都会变得很简单.计算机技术日新月异,作为一名程序员,应该具备快速学习的能力.好了,不废话.欢迎加群一起讨论交流. 直接上代码,可能不是最好的,欢迎吐

[原创作品]观察者模式在Web App的应用

(转载请注明:http://zhutty.cnblogs.com, 交流请加群:164858883) 在软件工程中,有一条重要的原则就是:高内聚低耦合.这是评定软件的设计好坏的一个标准.所谓高内聚,指的是一个模块内各个元素关联紧密,共同完成一个核心业务.低耦合,指的是各个模块之间依赖松散.创建低耦合模块,这一过程也成为解耦. 观察者模式正是低耦合的软件设计,也称为发布(publish )-订阅(Subscribe)模式.什么是观察者模式?举个栗子:王二小在山上放牛,突然他看见了鬼子到了村外,于是

尊重原创,请保证您的文章为原创作品

*仅仅有原创和翻译文章才干推荐到首页

[原创作品] RequireJs入门进阶教程

最近我发现RSS采集数据是个很好玩的东西,就是可以直接把别人的数据放在自己的网站上.如果网友们在其他地方发现这篇文章,还是来博客园看吧(http://zhutty.cnblogs.com).这样代码比较整洁.另外,欢迎来群里交流,164858883. 好了,这次随笔主要讲一个web优化功能的框架.RequireJs. 官方的介绍是这样的:RequireJS is a JavaScript file and module loader.对,就一句话就够了.它的功能就是加载模块. 这涉及到Web优化

证您的文章为原创作品

http://www.ebay.co.uk/cln/l-j5054/2015-02-10/177061016015/g.html http://www.ebay.co.uk/cln/yincho5/2015-02-10/176574714019/g.html http://www.ebay.co.uk/cln/g_g8003/2015-02-10/176574703019/g.html http://www.ebay.co.uk/cln/h_ji028/2015-02-10/1767396880

章为原创作品章为原创作品章为原创作品

http://www.shuo6.com/thread-5671049-1-1.html http://www.shuo6.com/thread-5671054-1-1.html http://www.shuo6.com/thread-5671059-1-1.html http://www.shuo6.com/thread-5671064-1-1.html http://www.shuo6.com/thread-5671069-1-1.html http://www.shuo6.com/thre

您的文章为原创作品

http://travel.tianya.cn/travelPlan/showPlan?planId=2821631 http://travel.tianya.cn/travelPlan/showPlan?planId=2821632 http://travel.tianya.cn/travelPlan/showPlan?planId=2821644 http://travel.tianya.cn/travelPlan/showPlan?planId=2821633 http://travel.

文章为原创作品

http://travel.tianya.cn/travelPlan/showPlan?planId=2838407 http://travel.tianya.cn/travelPlan/showPlan?planId=2838406 http://travel.tianya.cn/travelPlan/showPlan?planId=2838408 http://travel.tianya.cn/travelPlan/showPlan?planId=2838405 http://travel.