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

前言

• 先後端分離的風從我第一天當開發的時候
• 就已經在我耳邊吹得呼呼做響了
• 聽着各類先後端分離的各類牛X,內心仍是有點癢癢
• 後來由於各類緣由轉向前端,慢慢地瞭解起來了先後端分離
• 雖說轉向了前端,可是小公司,人很少,後端接口仍是要我寫一點

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

正文

在幾個項目開發過程當中,多是我水平不夠吧
我就發現先後端分離有時候相較於先後端混寫挺"蠢"的

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

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

好比,一些可自定義因素較多的項目,須要請求,

1. 網站的LOGO
2. 網站的主色調
3. 網站的CopyRight信息
4. 等等

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

上述的那些通常作法就是剛剛加載完頁面的時候就得向後端發起請求
而後再賦值到頁面上或者執行請求返回的信息之類的

覺不以爲這樣的方式有點"蠢"呢?

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

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

---

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

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

其實徹底不必在頁面請求回來以後
多寫幾段ajax之類的來請求剛剛說的那些東西

下面開始正題中的正題

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

舉幾個栗子來講明吧

(前端代碼都在vue-cli裏的模板文件裏寫)

(後端代碼都是php代碼,固然你能夠改爲jsp,asp等等)

1、用戶自定義皮膚

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代碼描述那樣,背景呈現紅色,文字是綠色

2、微信公衆號網頁開發

主要是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文件"的度仍是須要把握下

就說到這裏

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