咱們爲何要嘗試先後端分離

時間 2019-11-09

標籤咱們爲何嘗試後端分離简体版

原文原文鏈接

這不是一篇純技術文章，而是一篇分享我我的在先後端分離路上收穫的點點滴滴的文章，以此來爲準備嘗試先後端分離或者想了解先後端分離的童鞋作一個大致的講解。html

嘗試與改變

若是你沒有嘗試過先後端分離的工做流程，那麼能夠先試想一下這樣的流程改變：前端

把流程從
PM：「我要這個功能」
後端：「這個先找前端作個模板」
前端：「模板作完了」
後端：「我來對接一下，這裏樣式不對」
前端：「我改完了」
後端：「功能交付」
PM：「春節要加這個活動」
後端：「這個先找前端改個模板」
前端：「模板作完了」
後端：「我來對接一下，這裏樣式不對」
前端：「我改完了」
後端：「功能交付」vue

變成
PM：「我要這個功能」
前端：「我要接口」
後端：「接口完成了」
前端：「我來對接一下，功能交付」
PM：「春節要加這個活動」
前端：「須要增長接口」
後端：「接口完成了」
前端：「我來對接一下，功能交付」web

因而可知，先後端分離的主要概念就是：後臺只需提供API接口，前端調用AJAX實現數據呈現。json

現狀與分歧

做爲一名前端開發人員，咱們應該嘗試一些新穎的技術，完善每個細節性的問題，不斷突破自我。雖然先後端分離已經算不上什麼新穎的技術或思路，可是目前不少後臺開發人員甚至前端開發人員都沒有接觸過。後端

據我我的的瞭解，若是在一個部門裏，部門人員全是後臺開發人員，前端的一些頁面也是由後臺人員完成的，那麼先後端分離對於他們而言多是一片未知的領域，項目大可能是先後端強耦合的，甚至不存在前端的概念。前端框架

在不重視前端的公司或部門，不瞭解先後端分離這也無可厚非。在我剛進入一個全是後臺開發人員的部門的時候，整個部門就我一個前端，我剛開始的主要職責就是負責項目前端頁面的製做和JS功能的實現，雖然部門有先後端分離的意識，但都不知該如何去實踐。在那時，部門的後臺人員認爲先後端分離就是後臺再也不須要寫HTML和JS了，能夠交給前端來作了，然而這隻能叫作先後端分工。服務器

以上講述的是一種狀況: 不瞭解先後端分離，也不知如何去實踐的。下面還有一種狀況：瞭解先後端分離，但不想去嘗試的。框架

針對第二種狀況，不少人也作過相應的解釋，其實這就涉及到「先後端分離的利弊」問題。不少後臺人員會認爲本身所作的那一套沒有問題，即使後臺套用前端html也是司空見慣，一直是大勢所趨，後臺MVC框架也是這麼推薦使用的，很合理。這時候前端開發人員在部門中的話語權每每是不夠的，或者認爲後臺開發人員的意見永遠是對的，沒有主觀性。前後端分離

相反，也有多是後臺開發人員很是推薦先後端分離，而前端開發人員不想去實踐的。這時候前端會認爲後臺開發人員在瞎折騰，以前先後端不分離項目作起來都很順利，分離了反而會給本身帶來額外的工做量和學習成本，而這就取決於前端的技術能力和見識了。

固然，這也是我我的認爲的先後端分離所存在的一些現狀和分歧所在。

場景與要求

對於先後端分離的應用場景，不是全部的場景都適合，可是大多數項目都可以經過先後端分離來實現。

因爲我主要從事企業級後臺應用的前端開發工做，我的認爲對於後臺應用的開發來講，先後端分離帶來的利是遠大於弊的。

大多數後臺應用咱們均可以作成SPA應用（單頁應用），而單頁應用最主要的特色就是局部刷新，這經過前端控制路由調用AJAX，後臺提供接口即可以實現，並且這樣的方式用戶體驗更加友好，網頁加載更加快速，開發和維護成本也下降了很多，效率明顯提高。

一樣的，在展現類網站和移動APP頁面中先後端分離也一樣試用。先後端不分離的狀況下，服務端要單獨針對Web端作處理，返回完整HTML，這樣勢必增長服務端的複雜度，可維護性差，而web端須要加載完整的HTML，必定程度上影響網頁性能，這對於移動端性能爲王的地方很是的不友好。

隨着前端技術的發展和迭代，前端MVC框架應運而生，利用目前主流的前端框架，如React、Vue、Angular等咱們能夠輕鬆的構建起一個無需服務器端渲染就能夠展現的網站，同時這類框架都提供了前端路由功能，後臺能夠再也不控制路由的跳轉，將本來屬於前端的業務邏輯所有丟給前端，這樣先後端分離能夠說是最爲完全。下面是一段前端控制路由的代碼：

'use strict'

export default function (router) {
    router.map({
        '/': {
            component: function (resolve) {
                require(['./PC.vue'], resolve)
            }
        },
        '/m/:params': {
            component: function (resolve) {
                require(['./Mobile.vue'], resolve)
            }
        },
        '/p': {
            component: function (resolve) {
                require(['./PC.vue'], resolve)
            },
            subRoutes: {
                '/process/:username': {
                    component: function (resolve) {
                        require(['./components/Process.vue'], resolve)
                    }
                }
            }
        }
    })
}

先後端分離的實現對技術人員尤爲是前端人員的要求會上升一個層次，前端的工做不僅是切頁面寫模板或是處理一些簡單的js邏輯，前端須要處理服務器返回的各類數據格式，還須要掌握一系列的數據處理邏輯、MVC思想和各類主流框架。

優點與意義

對於先後端分離的意義咱們也能夠看作是前端渲染的意義，我主要總結了下面四點：

1.完全解放前端

前端再也不須要向後臺提供模板或是後臺在前端html中嵌入後臺代碼，如：

<!--服務器端渲染 -->
<select>
    <option value=''>--請選擇所屬業務--</option>
    {% for p in p_list %}
    <option value="{{ p }}">{{ p }}</option>
    {% endfor %}
</select>

這是先後端耦合的，可讀性差。

<!--前端渲染 -->
<template>
    <select id="rander">
        <option value=''>--請選擇所屬業務--</option>
        <option v-for="list in lists" :value="list" v-text="list"></option>
    </select>
</template>

<script>
export default {
    data: {
        return {
            lists: ['選項一', '選項二', '選項三', '選項四']
        }
    }，
    ready: function () {
        this.$http({
            url: '/demo/',
            method: 'POST',
        })
        .then(function (response) {
            this.lists = response.data.lists // 獲取服務器端數據並渲染
        })
    }
}
</script>