当前位置: 首页/ 学苑/走心Share/

前后端分离有感

2018-04-13| 阅读:219 |类别:走心Share

一、前后端历史

        无前端       

        1、后台全包静态htmltable

        2、后台模板渲染数据,后端编译  php

         项目变大,css js html壮大分离出了前端

        3、编写html,嵌套成php   


        问题相爱想杀

             A相互依赖过深,职责不清——前后端都可以改代码,出现bug推诿,修改效率低,影响合作

            B效率慢——-前端等待接口/后端等待页面,开发效率低

            C前端交互效果弱化

            D、依赖后端的模板环境、模板编译、路由支持

        4、编写html,数据ajax局部刷新,后端提供路由、接口

            A、前端模块化—require  sea

            B、前端模板— tpl pub 

            C、前端工程化模板编译打包—gulp webpack grunt

       5、前后端分离

二、为什么分离明确分工,清晰职责

        1、代码管理

               后端不需要合并前端代码,减少代码合并冲突问题

        2、加速开发进程

               一键编译,都不用嵌套模板

               数据模拟,无需等待

               接口转发,易于调试            

        3、提测灵活

              如果只是前端改动,可以只部署前端代码

        4、性能优化      

              a、代码压缩,提示效率;

              b、代码编译,增加版本号,消灭缓存

              c、随着页面增多,js文件越来越大,可以对于线上文件进行cdn部署;

三、怎么分离

        分离前提

            1、数据  ajax

            2、路由  单页面  vue react angular 

        工作模式

            3、独立开发,代码管理单页面

            4、模拟数据

            5、接口代理转发

        实现模式

            6、单页面  

    

        7nodejs中间层前端mvc

四、例子演示——渠道系统

         A、技术支持  vue webpack

              1、单页面自带路由

              2、首页路径分配—Nginx

              3、数据交互——-ajax

         B、优化

              1、静态资源—CDN   

         C、好处工作模式

               1mock模拟数据 

               2node代理转发整数接口

               3、各自管理代码版本管理、发布、bug修改      

         D、劣势

               1js体积随着开发增大 

               2、首屏渲染缓慢用户体验   

               3SEO

        E、优化方法

            1、路由懒加载(可以将app.js进行划分成多个小的js,按需加载)
            2、服务器渲染、浏览器渲染共存(针对有SEO要求的项目–nuxt.js)
            3、node做中间层,控制接口的请求转发(劣势-)

            

参考:

https://juejin.im/post/59dad63ff265da065270d49e

http://2014.jsconf.cn/slides/herman-taobaoweb/

http://taobaofed.org/blog/2014/04/05/practice-of-separation-of-front-end-from-back-end/

觉得有用,烦请给个小赏¥以资鼓励!~~