【Web前端】：对前端开发模式的思考

“被动的浏览器”

特点：

服务端负责把界面生成好，浏览器只负责展现。
前后端的职责不清晰，二者并没有分离。
前端的工作都由后端开发人员直接做了。

具体来说：

1.浏览器端对界面的形态和相关业务逻辑基本都没有控制权。基本上是服务端给什么浏览器就展现什么，展现的控制在服务端。 

2.对于第二点，这里我们先简单回顾一下Model1。 

在经典的Model1中，像数据库查询语句这样的数据层代码和像HTML这样的表示层代码是混在一起的，JSP职责过重，所有的代码都写到了JSP中。如图所示：

　　　　　


改进后的Model1, 以上这种情况得到了很大的完善。业务逻辑和数据库访问的代码都写到了JavaBean中，但是在JSP网页中，控制逻辑的代码和像HTML这样的表示层代码依然是混在一起。JSP页面身兼View和Controller两种角色，将控制逻辑和表现逻辑混杂在一起。

　　　　


如：下面一段嵌在JSP中的Java代码

<%@ page import="com.tgb.drp.basedata.domain.*" %>
<%@ page import="com.tgb.drp.basedata.manager.*" %>
<%
int pid=Integer.parseInt(request.getParameter("pid"));
//out.println(pid);
String command=request.getParameter("command");
//out.println(command);
if(Constants.ADD.equals(command)){
String name=request.getParameter("name");
Client region=new Client();
region.setName(name);
region.setPid(pid);
region.setIsLeaf(Constants.NO);
region.setIsClient(Constants.NO);
ClientManager.getInstance().addClientOrRegion(region);
out.println("添加区域成功！");
}

%>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.在开发过程中，并没有分前后端。那些JSP是由Java工程师来写。

问题

如果当我们要改变页面显示而业务逻辑不变的时候，我们需要再次拷贝其中的Java代码。 

或者如果我们业务逻辑有变化，我们每个JSP都得改。所以显示和业务耦合很大。因为这两种代码混在一起，增加了代码的复杂度。所以代码重用性，扩展性，维护性很低。

后端MVC

这个时候出现了后端MVC。

View：进行数据显示。
Model：用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。
Controller：处理用户交互，负责转发请求，并对请求进行处理（向模型请求数据或发送数据）

在J2EE中： 

视图View：JSP担任 

控制器Controller：Servlet 

模型Model：JavaBean

　　　　


一个典型的Web MVC流程： 

1.Controller截获用户发出的请求 

2.Controller调用Model完成状态的读写操作 

3.Controller把数据传递给View 

4.View渲染最终结果并呈献给用户

问题

随着不同终端的出现，前端的工作量变大。但是前端依然依赖着后端（都在一个项目中进行开发）。

前后端分离

特点：

ajax带来了Web开发革命性的变化。前端和应用服务器分离，前端和后端通过Ajax来通信。前后端分工，前端使用ajax与后端数据交互，操作视图，甚至控制部分路由，后端提供服务与数据。分工明确职责清晰。

　　　　　

问题：

前端逻辑越来越重，越来越复杂，路由不好掌控。过分使用ajax不利于SEO。前端不坑重负。

前端分层

特点

后端思想在前端进行应用

具体描述

前端处理的逻辑越来越复杂，不仅有交互体验需要编写大量 js 代码基于此，如何组织这大量的 js 代码成为亟待解决的问题，所以前端MVC也就应运而生了。前端开始注重分层 。 前端MVC主要是在JavaScript上的实现。什么是JS（JavaScript）的MVC？ JS的MVC只是后端MVC中的View里面再去分出来的MVC，跟后端MVC没太大关系。前端的MVC是为了解决复杂前端情况下模块化 JS的问题。

　　　

总结

　　通过总结，宏观上了解了前端开发模式的发展。知道了不同阶段存在的问题，收获很大。