這恐怕是”前後端混寫”的3p家族在”前後端分離”大流中的最後一塊陣地

643104191發表於2019-02-16
後端

前言

  • 前後端分離的風從我第一天當開發的時候
  • 就已經在我耳邊吹得呼呼作響了
  • 聽著各種前後端分離的各種牛X,心裡還是有點癢癢
  • 後來因為各種原因轉向前端,慢慢地瞭解起來了前後端分離
  • 雖然說轉向了前端,但是小公司,人不多,後端介面還是要我寫一點

好了,上面都是些廢話,下面開始正題

正文

在幾個專案開發過程中,可能是我水平不夠吧
我就發現前後端分離有時候相較於前後端混寫挺“蠢”的

各位先放下你們提起的40M大刀,且聽我慢慢道來.

不知道各位開發時發現沒,
有些請求是需要在頁面剛剛載入完時候,
就要用ajax之類的向伺服器發起一或者多個請求.

比如,一些可自定義因素較多的專案,需要請求,

  1. 網站的LOGO
  2. 網站的主色調
  3. 網站的CopyRight資訊
  4. 等等

再比如,微信公眾號網頁的開發
從後端請求回微信公眾號的一些東西

上述的那些一般做法就是剛剛載入完頁面的時候就得向後端發起請求
然後再賦值到頁面上或者執行請求返回的資訊之類的

覺不覺得這樣的方式有點”蠢”呢?

我明明向後端發起了一次請求,
為什麼不把我要的東西給全?
反而要我多跑兩趟腿?

這下能把你的刀放回刀鞘了吧

所以,我就在想,應該怎麼解決這個問題?

後來用了幾次JSONP,恍然大悟

其實完全沒必要在頁面請求回來之後
多寫幾段ajax之類的來請求剛剛說的那些東西

下面開始正題中的正題

突然之間不知道怎麼表述我想說的這是個什麼東西了

舉幾個栗子來說明吧

(前端程式碼都在vue-cli裡的模板檔案裡寫)

(後端程式碼都是php程式碼,當然你可以改成jsp,asp等等)

一、使用者自定義皮膚

HTML程式碼

<!--href可以指向任何你可自定義程式碼檔案連結-->
<!--且能在伺服器端跑起來的php,jsp,asp檔案-->
<link rel="stylesheet" type="text/css" href="./skin.php" />

是的,你沒看錯,是請求一個php(jsp,asp…)檔案

PHP程式碼

// 假設已經一頓操作,得到了一些使用者自定義的皮膚資料
$skin = array(
`background`=> `#F00`,
`font`=> `#0F0`,
// 等等配置
);

// 設定header頭,說明MIME型別和字元編碼
header("Content-Type: text/css;charset=utf-8");

// 生成css程式碼(當然,你可以選擇更好的字串拼接方式)
echo `body{background-color: `. $skin[`background`] .`;color: `. $skin[`font`] .`;}`;

然後,開啟你的頁面,開啟瀏覽器控制檯
就能在network選項卡的css請求裡看到拼接好的css程式碼

body{background-color: #F00;color: #0F0;}

當然,頁面樣式也會像拼接好的css程式碼描述那樣,背景呈現紅色,文字是綠色

二、微信公眾號網頁開發

主要是wx.config方面的簡化

HTML程式碼

<!--同樣的src可以指向任何你可自定義程式碼檔案連結-->
<!--且能在伺服器端跑起來的php,jsp,asp檔案-->
<script type="text/javascript" src="./wx.config.php"></script>

PHP程式碼

// 假設已經經過一頓操作,得到了微信公眾號的一些簽名,標識之類的東西
$data = array(
`appId`=> `0123456789`,
`nonceStr`=> `qwertyuiop`,
// 等等其他配置
);

// 設定header頭,說明MIME型別和字元編碼
header("Content-Type: text/javascript;charset=utf-8");

// 生成js程式碼(當然,你可以選擇更好的字串拼接方式)
// 配置有點多,就不一一寫出來了
echo `wx.config({
debug: true,
appId: "`. $data[`appId`] .`",
nonceStr: "`. $data[`nonceStr`] .`",
jsApiList:["onMenuShareAppMessage","onMenuShareTimeline"]
});`;

然後,開啟你的頁面,開啟瀏覽器控制檯
就能在network選項卡的js請求裡看到拼接好的js程式碼

wx.config({
debug: true,
appId: "0123456789",
nonceStr: "qwertyuiop",
jsApiList:["onMenuShareAppMessage","onMenuShareTimeline"]
});

然後你就可以不用在ajax之類請求成功之後再執行wx.config
直接wx.ready即可

小小的總結

舉了兩個例子,不知道大家有沒有明白我在說什麼

就是想說,大部分那種剛剛請求到頁面就向後端發起的ajax請求
都可以不用費太多js程式碼去獲取
直接讓後端生成就好了

當然用法很多,不拘泥於上面兩種用法

比如可以請求使用者資訊之類的

目前發現的缺陷

  • 比如請求自定義皮膚,請求回來的”css檔案”不能被快取,
  • 下次重新整理頁面又得重新請求,
  • 所以不適合請求大量的非自定義的css程式碼,
  • 需要自己對css程式碼量進行控制,
  • 但是我覺得這不算壞事,比如在請求wx.config的時候,
  • 每次必定有資訊是不相同的,
  • 在這時候,還是不要快取的好^_^
  • ———————————-
  • 還有個就是請求”js檔案”的時候,
  • 瀏覽器中,跨js檔案進行互動,
  • 必須有個掛在window下的全域性的中間變數
  • 比如微信公眾號開發中的wx
  • 個人認為js中暴露在window下的全域性變數越多,越不安全
  • 所以,使用上述方法請求”js檔案”的度還是需要把握下

就說到這裡

大家有任何疑問/想法都可以在評論裡交流
有對我上述內容的指正更好
感謝各位花費這麼多時間看一個頁面仔的思考

相關文章