(转载请注明: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: 代码独立存在,对其他业务没有影响,可扩展性可维护性极高。