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

“被动的浏览器”

特点：

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

具体来说：

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的问题。

　　　

总结

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