前端漫谈——记录一次技术的聊天

今天有朋友问了我几个问题，稍微总结了一下：

1.静态资源缓存

缓存是为了减轻服务端压力，但是会伴随着什么时候同步、什么时候更新缓存的问题。整体有两种思路，一种是根据最后修改时间，一种是根据文件内容。

最初的方式是服务器单向的控制，响应头中加上Expires，告诉浏览器一个固定的时间点，在这个时间点之前都拿缓存。后来又有了更灵活一些的方式，Cache-Control:max-age=多长时间，不再指定一个时间点，而是每次根据响应的时间点和返回的max-age的缓存时间，计算出一个过期时间，以后每次响应会更新这个时间，过期时间可以不断的更新。

上面两种都是服务器单向控制，没有协商的过程，除非更新时间特别固定，否则不是很适用。现在更多的是用服务端和浏览器协商的方案，根据两份文件的最后修改时间和文件内容的数据指纹。因为是双向的沟通，自然就有两个头，一个请求一个响应：Last-Modified/If-modified-since，Etag/If-none-match。

如果不想走缓存，除了通过上面的机制修改内容，以更新最后修改时间或者文件内容的方式外，还可以修改文件名字。因为浏览器就是通过文件名来查找缓存的，名字变了，自然就找不到对应缓存资源了，修改名字的方式通过加时间戳或者hash都可以。

2.mock server

前后端分离的项目，前端开发的时候并不依赖后端的接口，只要起一个mock server就可以自己模拟接口数据。但是开发服务器和mock服务器的端口不一致，可以结合webpack-dev-server做一层转发。

 devServer: {
     contentBase: '',
     proxy: {
          "/api": { 
               target: 'http://localhost:7001/xxx',
               pathRewrite: {"^/api" : "/abc"}
          }
     }
}

mock服务器可以通过json-server+ mockjs来做，

//mockjs
 module.export = {
     '/abc' : Mock.mock({
              name: 'aaa',
              "list|4": [
                    {
                        "id|+1": 1,
                         name: '@word(5)'
                    }
              ]
      });
 }

//jsonServer
const jsonServer = require('json-server');
const routesConfig = require('./routes-config');

const server = jsonServer.create();
const router = jsonServer.router(routesConfig);
server.use(router);

const port = 7001;
server.listen(port, () => {
  console.log('mock server started at localhost:' + port);
});

3.对架构的理解

现在主流的是组件化的架构，把页面分成各种可以复用的ui单元，通过组合组件的方式来搭建页面。

react和vue都是做组件化的，整体思路类似，但细节有很多不同，主要是数据驱动一个是响应式，一个是全局数据对比，同时关于有些功能的内置还是交给社区去做的思路也不同。具体的区别可以见我之前的一篇文章：
从2张运行流程图看vue和react区别

开发过程中会涉及到很多资源的处理，比如html的模板引擎、css相关的less、sass、postcss，js的typescript、babel等，还有js模块的打包。这些东西都需要一个构建的工具去统一处理，进行资源的处理以及打包，同时可以加入一些优化性能的处理，比如小图片转base64、异步模块code spliting、js的treeshaking等。

4.移动端和pc端的区别

移动端的浏览器兼容性更好一些，可以适用flex来写一些布局，pc端有时候要考虑兼容性，还得用float和定位的方案。移动端只有touch事件，会涉及到复杂的手势处理，而pc端有鼠标、键盘事件。

此外，移动端网络不稳定，对于加载性能的优化要求更严格。

5.SEO的方案

爬虫抓取到的页面是静态的html，我们平时开发的单页应用是动态生成html的，搜索引擎抓不到动态的内容，针对这种情况需要在服务端做渲染。

vue本身支持的方案nuxt只支持node，如果服务端用的时java、php等语言，想做前后端分离，可以使用百度的fis方案，支持前端写服务端的模板引擎，本地起fis的开发服务器来解析这些模板引擎。

6.如何推广新的技术栈

不同技术栈之间的差别不是功能的差别，而是对不同代码封装形式的差别，比如react中使用js来操作html，而在vue中使用模板，需要学习指令、过滤器等，虽然页面结构还是一样，但是需要换一种方式来组织代码。

为了让成员了解这种技术的思想，可以写一些demo和文档，结合一些宣讲来让他们熟悉这种新的开发思路，并且和之前的封装方式、代码组织方式找到对应的部分，进而完成思路的转换。

7.安全性问题

安全性问题主要是用户输入一段恶意代码，比如xss攻击，应用没有做转义等处理，利用动态的解析绕过一些环节或者达到一些特殊的目的，避免的思路就是对用户的在存储之前做处理，或者在显示之前做转义，总之，不能信任用户输入的内容。

总结

整体，我们聊的比较分散，聊到了前端架构、mock server、支持seo的渲染方案、xss等安全问题、静态资源缓存、pc和移动端区别、以及如何在团队中推新的技术栈等，各方面都涉及到了一些，料到很多平时没有深入思考的东西给了我不少的触动。因此，简单总结一下，方便以后可以继续深入。

聊天的内容和架构图的对应关系（见图中数字）