先声明，本篇不会讲带有年代性的前端发展史，不讲故事，想了解的读者可以去查阅一些其他的资料和文章，本篇仅仅从技术发展角度结合案例分析，说明前端技术的发展和开发模式的演进变化。本篇内容重点说明PC端技术，移动端、桌面端本篇不涉及，防止读者看到后面有疑惑，这里强调一下。
这里先讲一个需求，有一个系统需要实现一个模块，用户管理，模块的功能很简单，就是查询、删除。基于这个需求，南风哥会使用几代不同的前端技术分别予以实现，让读者感受其中的变化和奥秘。界面大概是这个样子。
非常老土，非常简单，这都不是重点，重点是能说明问题就行。
第一代：单文件模式
何为单文件模式，解释一下就是一个模块所有的代码都集中在一个文件中，实现上面说的需求，目录大概是这个样子的。
然后看「user.html」具体里面的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户管理</title> <style> .bg{ background-image: url("../img/bg.jpg"); } .text-center{ text-align: center; } .condition-box{ margin-bottom: 10px; } table{ width:90%; } .table-header{ background-color: #dddddd; } .delete{ text-decoration: none; } </style> </head> <body class="bg"> <div class="text-center"> <h3>用户添加</h3> </div> <div class="text-center"> <!-- 查询条件 --> <div class="condition-box"> 用户姓名：<input id="name" type="text"> <button id="search" onclick="search()">查询</button> </div> <!-- 用户列表 --> <table align="center" border="1" cellpadding="0" cellspacing="0"> <tr class="table-header"> <td>id</td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>联系电话</td> <td>创建时间</td> <td>操作</td> </tr> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>22</td> <td>123456789</td> <td>2018-08-08</td> <td><a class="delete" href="javascript:void(0);" onclick="deleteUser(this,1)">删除</a></td> </tr> <tr id="5"> <td>2</td> <td>李四</td> <td>女</td> <td>18</td> <td>987654321</td> <td>2018-07-18</td> <td><a class="delete" href="javascript:void(0);" onclick="deleteUser(this,2)">删除</a></td> </tr> </table> </div> </body> <script src="../js/jquery-2.1.1.min.js"></script> <script type="text/javascript"> function deleteUser(e,id){ // 调用控制器删除方法 // 后端逻辑是，控制器调用删除业务方法后，返回到user.html页面，即当前页面 location.href = "/userDelete?id=" + id; } function search(){ var name = $("#name").val(); // 调用控制器搜索方法 // 后端逻辑是，控制器调用删除业务方法后，返回到user.html页面，即当前页面 location.href = "/userList?name=" + name; } </script> </html>