前端技术及开发模式的演进，带你了解前端技术的前世今生

先声明，本篇不会讲带有年代性的前端发展史，不讲故事，想了解的读者可以去查阅一些其他的资料和文章，本篇仅仅从技术发展角度结合案例分析，说明前端技术的发展和开发模式的演进变化。本篇内容重点说明PC端技术，移动端、桌面端本篇不涉及，防止读者看到后面有疑惑，这里强调一下。

这里先讲一个需求，有一个系统需要实现一个模块，用户管理，模块的功能很简单，就是查询、删除。基于这个需求，南风哥会使用几代不同的前端技术分别予以实现，让读者感受其中的变化和奥秘。界面大概是这个样子。

非常老土，非常简单，这都不是重点，重点是能说明问题就行。

第一代：单文件模式

何为单文件模式，解释一下就是一个模块所有的代码都集中在一个文件中，实现上面说的需求，目录大概是这个样子的。

然后看「user.html」具体里面的内容。

    
    用户管理

    
        .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;
        }

    



    

        用户添加
    

    


        
        

            用户姓名： 查询
        

        
        
            
                id
                姓名
                性别
                年龄
                联系电话
                创建时间
                操作
            

            
                1
                张三
                男
                22
                123456789
                2018-08-08
                删除
            

            
                2
                李四
                女
                18
                987654321
                2018-07-18
                删除
            
        
    





    function deleteUser(e,id){
        // 调用控制器删除方法
        // 后端逻辑是，控制器调用删除业务方法后，返回到user.html页面，即当前页面
        location.href = "/userDelete?id=" + id;
    }

    function search(){
        var name = $("#name").val();
        // 调用控制器搜索方法
        // 后端逻辑是，控制器调用删除业务方法后，返回到user.html页面，即当前页面
        location.href = "/userList?name=" + name;
    }

我们会发现，所有的样式声明，js代码以及html代码都会集中在一个文件中。这样一个功能如果较为复杂，页面代码看起来会非常复杂，久而久之就会变得不易维护。

当然有一些优化的方式。就是目录划分更友好一些，剥离css和js脚本，采用外部引入的方式，这种方式也是后来采用的比较多的方式，像下面这样，看起来就清爽多了。

    
    用户管理

    
    



    

        用户添加
    

    


        
        

            用户姓名： 查询
        

        
        
            
                id
                姓名
                性别
                年龄
                联系电话
                创建时间
                操作
            

            
                1
                张三
                男
                22
                123456789
                2018-08-08
                删除
            

            
                2
                李四
                女
                18
                987654321
                2018-07-18
                删除
            
        
    

以上两种形式，本质上没有什么区别，所以就放在一起说明，以上方式的优点就是简单粗暴，代码开发的速度较高。

与后端的交互都是后端建立一个Controller或Servlet 这么一个控制器，请求到达控制器，处理完逻辑，然后控制器中跳转到一个页面，页面进行数据渲染展示。每次交互过程目标跳转页面的内容都需要全部刷新加载，即使多次交互跳转的是同一个页面。

这种有什么问题吗？我们来看一下，在用户管理中的用户列表页我们有个查询功能，我们输入一个姓名，点击查询，如果采用上面的方式，想想看，点一下查询，到控制器，后端执行完SQL拿到数据后，又会跳转到用户列表页，我点5次查询，整个列表页就会加载5次，而且整个页面只有用户表格这个部分是变化的，其他部分是没有变化的，这样资源（背景图、jquery库、css）每次就是重复加载，带来的问题就是一、体验不好，二、资源重复加载，给web服务器带来一定的请求压力。

这里补充多说一点内容，就是jsp这个东西，虽然现在用的不多，但还是说一下，之前南风哥面试问过很多面试者，前端都会什么技术，面试者张口就来，jsp .... 什么什么，这里南风哥想说，jsp不属于前端技术，为什么 ?

因为jsp本身执行前是需要编译的，编程成class文件，是在服务端执行的，而真正的前端技术一定是在浏览器或相关前端技术执行引擎上（类Chrome V8）解释执行的。像jsp里写的css、html、js这些东西属于前端技术的范畴，这些都是由浏览器解释执行的，很多人被jsp这种表象迷惑了，看到jsp里面写的都是页面展现相关的代码，认为jsp就是前端技术。

回到上面的问题，我们再来看如何解决上面的问题，这就是第二代技术。

第一代代表技术：html、css、javascript、jquery

第二代：SPA

单页Web应用（single page web application，SPA），简称SPA，由于ajax技术的兴起，使得局部加载变得流行，单页应用页得到了广大开发者和用户的青睐。

简单理解单页应用，就是整个应用加载都在一个页面当中，做的就是局部替换，比如点击一个菜单，系统整个头部，底部，菜单部分都不变化，只变化中间区域的模块内容。

再比如上面说到的查询需求，点击查询后，用户列表整体内容不变，通过ajax请求，数据回来后，通过js仅仅修改表格部分的数据内容。

这样就解决了上面说的一、体验的问题，二、资源重复加载的问题。

大部分情况下，我们只需要在整体页面中引入需要的所有资源，模块中就不需要在引入资源，只处理模块自身的内容和业务即可。

这种方式与后端的交互都是就是建立一个Controller或Servlet 这么一个控制器，请求到达控制器，处理完逻辑，然后返回局部页面片段或者json数据，页面进行渲染展示。每次交互过程只刷新局部，整体页面不做刷新。

这里的数据渲染，一种是通过jquery或js的方式，字符串拼接，然后设置到对应的dom中，像这样。

页面Dom

Ajax加载渲染

function search(){
    var name = $("#name").val();
    // 调用控制器搜索方法,返回json数据
    $.get('/userList?name=' + name,{},function(data){
        var userList = data.userList;

        var row = '';
        row += '';
        row += '    id';
        row += '   姓名';
        row += '   性别';
        row += '    年龄';
        row += '    联系电话';
        row += '   创建时间';
        row += '   操作 ';
        row += '  ';
        
        for(var i = 0 ; i < userList.length; i++){
            var user = userList[i];
            row += '';
            row += '    ' + user.id + '';
            row += '    ' + user.name +'';
            row += '    ' + user.sex + '';
            row += '    ' + user.age +' '';
            row += '    ' + user.phone + '';
            row += '    ' + user.createDate + '';
            row += '    删除';
            row += '';
        }
        $("#userList").html(row);

    },'json');

}

另一种方式模板引擎

    
        id
        姓名
        性别
        年龄
        联系电话
        创建时间
        操作
    

    {{each list as user i}}
    
        {{user.id}}
        {{user.name}}
        {{user.sex}}
        {{user.age}}
        {{user.phone}}
        {{user.createDate}}