全栈工程师修炼指南
熊燚（四火）
Oracle首席软件工程师
立即订阅
2286 人已学习
课程目录
已更新 43 讲 / 共 40 讲
0/4登录后，你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 从成长角度看，为什么你应该成为全栈工程师？
免费
学习路径 | 怎样成为一名优秀的全栈工程师？
导读 | 如何学习这个专栏？
第一章 网络协议和 Web 接口 (6讲)
01 | 网络互联的昨天、今天和明天：HTTP 协议的演化
02 | 为HTTP穿上盔甲：HTTPS
03 | 换个角度解决问题：服务端推送技术
04 | 工整与自由的风格之争：SOAP和REST
05 | 权衡的艺术：漫谈Web API的设计
06 | 特别放送：北美大厂如何招聘全栈工程师？
第二章 欢迎来到 MVC 的世界 (7讲)
07 | 解耦是永恒的主题：MVC框架的发展
08 | MVC架构解析：模型（Model）篇
09 | MVC架构解析：视图（View）篇
10 | MVC架构解析：控制器（Controller）篇
11 | 剑走偏锋：面向切面编程
12 | 唯有套路得人心：谈谈Java EE的那些模式
13 | 特别放送：选择比努力更重要
第三章 从后端到前端 (7讲)
14 | 别有洞天：从后端到前端
15 | 重剑无锋，大巧不工：JavaScript面向对象
16 | 百花齐放，百家争鸣：前端MVC框架
17 | 不一样的体验：交互设计和页面布局
18 | 千言万语不及一幅画：谈谈数据可视化
19 | 打开潘多拉盒子：JavaScript异步编程
20 | 特别放送：全栈团队的角色构成
第四章 数据持久化 (7讲)
21 | 赫赫有名的双刃剑：缓存（上）
22 | 赫赫有名的双刃剑：缓存（下）
23 | 知其然，知其所以然：数据的持久化和一致性
24 | 尺有所短，寸有所长：CAP和数据存储技术选择
25 | 设计数据持久层（上）：理论分析
26 | 设计数据持久层（下）：案例介绍
27 | 特别放送：聊一聊代码审查
第五章 寻找最佳实践 (6讲)
28 | Ops三部曲之一：配置管理
29 | Ops三部曲之二：集群部署
30 | Ops三部曲之三：测试和发布
31 | 防人之心不可无：网站安全问题窥视
32 | 和搜索引擎的对话：SEO的原理和基础
33 | 特别放送：聊一聊程序员学英语
第六章 专题 (7讲)
34 | 网站性能优化（上）
35 | 网站性能优化（下）
36 | 全栈开发中的算法（上）
37 | 全栈开发中的算法（下）
38 | 分页的那些事儿
39 | XML、JSON、YAML比较
40 | 全栈衍化：让全栈意味着更多
全栈工程师修炼指南
登录|注册
17 | 不一样的体验：交互设计和页面布局
四火 2019-10-18
你好，我是四火。
前几讲我们一直在 JavaScript 的代码中游走，这一讲我们来换换脑子，聊一聊界面设计，讲一讲交互和布局。这部分对于基于 Web 的全栈工程师来说，不只是技术栈特殊的一部分，还是一个能够给个人发展格局带来更多可能的部分。
1. 单页面应用
SPA，Single-Page Application，即单页应用，是一种互联网应用在用户交互方面的模型。
用户打开一个页面，大部分操作都在单个页面里面完成。和传统的 MPA（Multiple-Page Application）相比，用户体验上，SPA 省去了页面跳转的突兀感受和等待时间，用户体验更加桌面化，操作迅速、切换无缝；软件架构上，SPA 可以更彻底地落实前后端分离，后端彻底变成了一个只暴露 API 的服务，将不同终端的视图层的工作，特别是页面聚合搬到前端来完成（如有遗忘请回看 [第 09 讲]）。
对于许多大型应用，SPA 和 MPA 往往是在一定程度上结合起来使用的，比如新浪微博的网页版，用户可以浏览时间线，并作出一些转发评论、媒体播放等等操作，但是也可以跳到单独的单条微博的页面去。
但 SPA 也有着先天的缺陷。比如说，网页的 SEO（Search Engine Optimization）就是一个例子，单页应用上的操作，引起页面的状态改变，很难被搜索引擎敏锐地捕获到，并使之成为“可搜索到的”，因此 SPA 页面的 SEO 需要做额外的工作，关于这部分我会在第五章中介绍一些相关知识。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《全栈工程师修炼指南》，如需阅读全部文章，
请订阅文章所属专栏。
请订阅文章所属专栏。
立即订阅
登录 后留言
精选留言(8)
零维1. 现在基本上工作做都是后台管理系统，不太需要考虑浏览器的适配，需要适配的地方就简单的使用一下栅格布局组件。除此之外，其实我在工作中，很少用到响应式布局的那种解决方案呢。如果PC 、手机都需要某个网页，就做两套了。
2. 发现除了 div 、 span 都是有语义化的。作者回复: 关于 #2 基本正确，就一个：b（加粗）也是没有语义的
2019-10-25 1
咕叽咕叽1，目前参与的前端项目针对的浏览器版本较高，IE9+，遇到兼容性的问题较少。对于兼容性的问题，我主要有如下的做法：首先借助了normalize.css库来做兼容，其次借住一些打包工具，会给css加上前缀，比如-webkit，-moz等来做不同浏览器的处理。最后会借住caniuse网站，查属性兼容浏览器的版本。
2，div，span，b是没有语义的，其他均有语义作者回复: 👍
2019-10-28
Franklin.du用过Bootstrap。Bootstrap是响应式布局，使用的时候简单的页面还是很容易实现。稍微复杂的界面，需要兼容手机端的时候就没那么方便。手机端屏幕大小有限，要把重要的内容简洁的显示出来，手机页面布局和传统的网页也不一样，更接近手机app的布局样式。最后为了不让页面代码过于复杂，还是设计了两套页面，分别针对大屏幕和小屏幕。2019-10-23
丁丁历险记pc 和wap 绝不做兼容，太多不一样的东西了。2019-10-22
xianhaibootstrap是不是响应式布局的银弹？作者回复: 你觉得呢？:)
基本上用了“银弹”这两个字，一般都是否命题。2019-10-20
Middleware这篇收获很大作者回复: 😎
2019-10-19
靠人品去赢这个适配的问题，我看很多种方案都是先拿到宽度，然后定个数比如是100得到单位长度，然后不管多大分辨率，都可以标准化，老师有没有更好的适配方案，还有现在回头用原生的JS写页面好难受，不知道什么原因赋值不成功，不起作用很难受。2019-10-18
leslie我记得样式和加载不同：有时会听到开发PM抱怨用户用小众型的浏览器，甚至许多都是根本不曾听闻的，导致效果不一致缺东西。
其实这块最大的坑在于有时不知缺啥且做了个性化导致：个性化其实有时导致的兼容性问题。2019-10-18
收起评论