Thinking In Web [原创作品]

Posted 2020-07-12

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