23 KiB
13 | 架构现代化 :如何改造老城区前端?
你好,我是姚琪琳。
前面两节课,我们学习了架构现代化中建设新城区的一些模式。从这节课开始,我们来聊聊改造老城区相关的模式。
我们先回顾下什么是“改造老城区”。改造老城区模式是指对遗留系统内部的模块进行治理,让模块内部结构合理、模块之间职责清晰的一系列模式。也就是说,在遗留系统的单体内部,我们应该如何更好地治理架构。
我们按照从“前”往“后”的顺序,先从前端开始。
遗留系统的前端
在第十节课我们学习了一种架构反模式——Smart UI,它是遗留系统最常见的前端模式。以Java Web项目为例,它们往往在JSP页面中掺杂着大量的JavaScript、Java和HTML代码。其中最致命的就是Java代码,因为它们可以随意访问后端的代码,甚至访问数据库。我们重构前端代码最主要的工作,就是移除这些Java代码。
前端的遗留代码和后端的遗留代码一样,也是坏味道的重灾区。Martin Fowler在《重构(第2版)》中,用JavaScript重写了所有代码示例,这对于前端开发人员是相当友好的。它能帮助你识别出JavaScript中的坏味道,并重构这些代码。
要重构前端代码,最好也要优先添加测试。但不幸的是,已有的前端测试工具对基于框架(Angular、React、Vue)的JavaScript代码是相对友好的,但遗留系统中的前端代码,既有JavaScript又有Java,很难用前端工具去编写单元测试。
这里我推荐你编写一些E2E测试,来覆盖端到端的场景。或者使用HtmlUnit 这样的工具,通过编写Java代码来测试JSP。但实际上HtmlUnit也属于某种程度的E2E测试。
重构前端代码
前端JSP代码的重构和后端有相似之处,但也有很多不同。我的同事王万德和胡英荣开源了一套端(前端JSP)到端(后端Java API)的遗留JSP改造方案,包括重构前后的代码对比。我将以这个代码库的代码为示例,给你讲解一下如何重构前端代码。
我们对于遗留JSP代码的重构,可以分成以下八个步骤。每个步骤都可以小步迭代,增量演进。
第一步,梳理业务
要想重构前端代码,你必须先搞懂它的含义。类似代码现代化时,我们用活文档工具去理清一个场景,要重构前端代码,你也得先梳理它的业务含义,搞清楚它到底做了哪些事情。遗憾的是,针对前端的活文档工具,现在我还没发现哪种比较好,因为前端有多种语言交织在一起,分析起来太麻烦。
不过好在前端并不像后端代码那样调用链很深,很多前端代码都是围绕一个页面来展开的,相对来说还算内聚,梳理起来也更容易一些。
第二步,模块化
梳理完业务逻辑,下一步就是对前端代码进行模块化。这里的模块化是指,按职责把原先冗长的JSP页面拆分出来,分解成多个小的JSP页面,比如header、footer、content等,并将它们include到大页面中。
开发人员在编写JSP时,很少有这种模块化的思想,导致所有的东西都写到一个文件里。随着页面逻辑越来越复杂,页面里的各种代码越来越多,文件也越来越大。我甚至见过很多超出64KB限制的JSP文件。
模块化怎么实现,我们结合例子来分析分析。从下面这段to-do list的代码示例,可以很明显地看出它由4个部分组成:一个包含若干hidden字段的form、一个包含一段文字的header、一个包含to-do列表的section和一个包含删除按钮的footer:
<% List<Todo> todoList = (List<Todo>) request.getAttribute("todoList"); %>
<section class="todoapp">
<form name="todoForm" action="" method="post">
<input type="hidden" name="sAction"/>
<input type="hidden" name="title"/>
<input type="hidden" name="id"/>
</form>
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<% for (int i = 0; i < todoList.size(); i++) {
Todo todo = todoList.get(i);
%>
<li <%if (todo.getCompleted()) {%> class="completed"<%}%> data-id="<%=todo.getId()%>">
<div class="view" id="todo_<%=todo.getId()%>">
<input class="toggle" id="todo_toggle_<%=todo.getId()%>" onchange="toogle(this)"
type="checkbox" <%if (todo.getCompleted()) {%> checked <%}%> />
<label><%=todo.getTitle()%>
</label>
<button class="destroy" onclick="deleteTodo(this)"></button>
</div>
<%-- <input class="edit" value="<%=todo.getTitle()%>">--%>
</li>
<%}%>
</ul>
</section>
<footer class="footer">
<%
boolean hasCompleted = false;
for (Todo todo : todoList) {
if (todo.getCompleted()) {
hasCompleted = true;
break;
}
}
%>
<%if(hasCompleted) {%>
<button class="clear-completed" onclick="deleteCompletedTodo()">Clear completed</button>
<%}%>
</footer>
</section>
对于这段代码,我们就可以将它提取成4个小的JSP页面,重构之后的代码就相当清爽了。
<section class="todoapp">
<%@ include file="todoForm.jspf" %>
<jsp:include page="todoHeader.jsp"/>
<jsp:include page="todoList.jsp"/>
<jsp:include page="todoFooter.jsp" />
</section>
第三步,重构JSP中的JavaScript代码
将页面拆小后,我们还要继续重构各个小页面中的JavaScript代码。
长函数是遗留系统前端最常见的坏味道。早年开发JSP页面的都不是专业的前端开发,很多都是赶鸭子上架的后端开发人员,去写一些相对简单的JavaScript代码。或者是不知道怎么写某个页面元素的联动效果,就去论坛复制一大堆代码过来,稍加修改,只要代码能跑就敢提交,很少会清理和重构代码。这些操作导致业务逻辑、显示逻辑和控件操作杂糅在一起,根本没法维护。
面对这种混乱的代码,我们更要确保思路清晰。你可以按职责来将它分解为若干个小的函数,每个函数只做一件事情。这有点类似于代码重构中的拆分阶段(可以回顾第九节课),只不过拆分出来的是不同的职责,而不是一个职责的不同阶段。
下面这段代码是一个页面校验的函数,大体业务是,某家公司在组织团建时需要选择一个团建活动,而不同的团建活动之间有一些校验逻辑。具体的说明可以参考这里。
function clickActivityCheck(activityCheckedObject, packageId, activityId) {
if (activityCheckedObject.checked) {
var countInput = document.getElementById("activity_" + activityId + "_count");
var count = !countInput.value ? -1 : parseInt(countInput.value);
if (count < 1 || count > 50) {
alert("参加人数必须在1到50之间!");
activityCheckedObject.checked = false;
return;
}
if (activityId === 1) {
var checkBox2 = document.getElementById("activity_2");
if (checkBox2 && checkBox2.checked) {
alert("冬奥两日游和户外探险一日游不能同时选择!");
activityCheckedObject.checked = false;
return;
}
}
if (activityId === 2) {
var checkBox1 = document.getElementById("activity_1");
if (checkBox1 && checkBox1.checked) {
alert("户外探险一日游和冬奥两日游不能同时选择!");
activityCheckedObject.checked = false;
return;
}
}
if (activityId === 5) {
var checkBox1 = document.getElementById("activity_1");
if (!checkBox1 || !checkBox1.checked) {
alert("选择住宿前必须选择冬奥两日游!");
activityCheckedObject.checked = false;
return;
}
}
var result = createActivity(activityCheckedObject, packageId, activityId);
if (!result.success) {
alert(result.errorMessage);
activityCheckedObject.checked = false;
return;
}
} else {
var countInput = document.getElementById("activity_" + activityId + "_count");
countInput.value = "";
activityCheckedObject.checked = false;
if (activityId === 1) {
var checkBox5 = document.getElementById("activity_5");
if (checkBox5 && checkBox5.checked) {
checkBox5.click();
}
}
cancelActivity(activityCheckedObject, packageId, activityId);
}
这段代码有点长,不过我稍微解释一下你就清楚了。
在选择团建活动的时候,用户可以在“冬奥两日游”、“户外探险一日游”、“唱歌”、“吃饭”、“住宿”等活动中做出选择。
在勾选checkbox的时候,会触发这个函数来进行校验。它首先会校验所填的人数,然后校验所选活动之间的关系,比如冬奥和户外探险不能同时选择,选住宿则必须选冬奥。此外,当取消勾选的时候,也会触发一个联动逻辑,也就是取消冬奥的时候,会连带着一起取消住宿。
题面分析完了,你想到重构的思路了么?你脑海里涌现的第一个想法可能是这样的:可以将每个if都抽取成函数。但这样抽取出来的函数仍然有很多重复代码,逻辑并没有得到简化,而且页面元素的读写和业务判断还是混杂在一起的。仔细观察你会发现,所有的校验逻辑可以大体上分为3种:校验人数、校验互斥的活动、校验有依赖的活动。
对校验逻辑做了抽象之后,就可以把代码重构为下面这个样子:
function validateActivities(activityId) {
var result = validateCount(activityId);
if (result.success) {
result = validateMutexActivities(activityId);
if (result.success) {
result = validateReliedActivities(activityId);
}
}
return result;
}
function selectActivity(activityId) {
var result = validateActivities(activityId);
if (result.success) {
result = createActivity(activityId);
}
return result;
}
function clickActivityCheck(activityId) {
let activityInfoRow = new ActivityInfoRow(activityId);
if (activityInfoRow.isChecked()) {
var result = selectActivity(activityId);
if (!result.success) {
alert(result.errorMessage);
activityInfoRow.setChecked(false);
}
} else {
unSelectActivity(activityInfoRow, activityId);
}
}
注意,这里面还提取了一个ActivityInRow对象,用于保存每一行的活动元素。这样,我们就把页面元素和判断逻辑分离出来了。
第四步,移除JSP中的Java代码
JSP中,用<% %>括起来的Java代码叫做Scriptlet,正是这样的代码,把JSP变成了Smart UI。其实早在JSTL和EL诞生的时候,就不再推荐使用Scriptlet了。然而十几年来,情况不曾改观,反倒是新型前端框架的兴起,使前后端彻底分离,才遏制住了Scriptlet的滥用之势。
但对于遗留系统来说,Scriptlet仍然泛滥成灾,重构前端代码的重点,就是移除它们。JSP中的Scriptlet大致可以分为这么几类:
1.对所有请求执行相同的Java代码,如权限验证。这类Scriptlet可以迁移到后端,写到一个Filter里。
2.直接与数据库交互的Java代码,如从数据库中查询出数据并显示在table中,或登录页面中验证用户名和密码等。这类Java代码其实处理的都是GET/POST请求,也可以迁移到后端,实现一个新的Servlet,将代码迁移到doGet/doPost中。
3.控制页面显示逻辑的Java代码,如上面to-do的例子中,从后端拿到一个Todo对象的列表,然后遍历这个列表,用
对于第三种Java代码,你可以用JSTL和EL来替换,就像下面这样:
<section class="main">
<ul>
<c:forEach var="todoItem" items="${todoList}">
<li>${todoItem.title}</li>
</c:forEach>
</ul>
</section>
完成替换后,JSP中就只剩下了HTML、JavaScript和JSTL,已经相当清爽了。如果你的工作就只是移除Java,那么到此就可以告一段落。
但如果目标是前后端分离,彻底告别JSP,你可能会希望使用纯JavaScript来替换。这时候就可以先保留这部分Scriptlet,等下一步引入前端框架的时候,再来替换。
第五步,引入前端框架
当Java代码移除之后,我们再引入前端框架。比如对于todoList这个模块,引入Vue后的代码就变成了下面这样:
<%
List<Todo> todoList = (List<Todo>) request.getAttribute("todoList");
ObjectMapper objectMapper = new ObjectMapper();
String todoListString = objectMapper.writeValueAsString(todoList);
%>
<div id="todoListContainer"></div>
<script>
(function () {
var todos = JSON.parse('<%=todoListString%>');
new Vue({
el: "#todoListContainer",
data: function () {
return {
todos
}
},
template:`
<section class="main" v-show="todos.length">
<ul class="todo-list">
<li v-for="todo in todos" :key="todo.id" :class="{completed: todo.completed}">
<div class="view">
<input class="toggle" v-model="todo.completed" type="checkbox" @change="toggleComplted(todo)"/>
<label>{{todo.title}}</label>
<button class="destroy" @click="deleteTodo(todo)"></button>
</div>
</li>
</ul>
</section>
`,
methods: {
toggleComplted: function (todo) {
var sAction = "markDone";
if (!todo.completed) {
sAction = "markUnfinished";
}
rootPage.toggleTodo(todo.id, sAction);
},
deleteTodo: function (todo) {
rootPage.deleteTodo(todo.id);
}
}
});
})();
</script>
注意,我们这里只是使用脚本的方式引入了Vue。要想更好地使用前端框架,你还需要对这些代码进行组件化和工程化。为了实现小步前进,我们把这两部分内容交给第六和第七步。
第六步,前端组件化
引入前端框架之后,我们就可以进一步重构,将前面拆分出来的各个模块转换为组件。比如上面的Vue可以转换为下面这样的组件:
var todoListComponent = {
props:{
todos: {
type: Array
}
},
template:`
<section class="main" v-show="todos.length">
<ul class="todo-list">
<li v-for="todo in todos" :key="todo.id" :class="{completed: todo.completed}">
<div class="view">
<input class="toggle" v-model="todo.completed" type="checkbox" @change="toggleComplted(todo)"/>
<label>{{todo.title}}</label>
<button class="destroy" @click="deleteTodo(todo)"></button>
</div>
</li>
</ul>
</section>
`,
methods: {
toggleComplted: function (todo) {
var sAction = "markDone";
if (!todo.completed) {
sAction = "markUnfinished";
}
this.$emit("toggle-todo", todo.id, sAction);
},
deleteTodo: function (todo) {
this.$emit("delete-todo", todo.id);
}
}
}
在index.jsp文件中,就可以使用这种方式来引用这个组件:
<div id="app">
<todo-list-component :todos="todos" v-on:toggle-todo="toggleCompleted" v-on:delete-todo="deleteTodo" >
</todo-list-component>
</div>
此时组件的初始化数据还是从request中获取的,要把它们替换成对后端的Ajax调用。这需要你改造一下原有的Servlet,让原本在request中设置attribute的Servlet返回json:
ObjectMapper objectMapper = new ObjectMapper();
PrintWriter out = response.getWriter();
response.setContentType("application/json;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
response.setStatus(HttpServletResponse.SC_OK);
List<Todo> todoList = todoRepository.getTodoList();
out.write(objectMapper.writeValueAsString(todoList));
out.flush();
这时,前端页面中的所有Scriptlet都清除干净了,你可以将文件名的后缀从jsp改为html了。
第七步,前端工程化
我们上一步虽然将小模块都转换成了前端组件,但它们还是通过