这恐怕是"前后端混写"的3p家族在"前后端分离"大流中的最后一块阵地

前言

• 前后端分离的风从我第一天当开发的时候
• 就已经在我耳边吹得呼呼作响了
• 听着各种前后端分离的各种牛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文件"的度还是需要把握下

就说到这里

大家有任何疑问/想法都可以在评论里交流
有对我上述内容的指正更好
感谢各位花费这么多时间看一个页面仔的思考