全栈工程师修炼指南
熊燚(四火)
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
  • xianhai
    bootstrap是不是响应式布局的银弹?

    作者回复: 你觉得呢?:)
    基本上用了“银弹”这两个字,一般都是否命题。

    2019-10-20
  • Middleware
    这篇收获很大

    作者回复: 😎

    2019-10-19
  • 靠人品去赢
    这个适配的问题,我看很多种方案都是先拿到宽度,然后定个数比如是100得到单位长度,然后不管多大分辨率,都可以标准化,老师有没有更好的适配方案,还有现在回头用原生的JS写页面好难受,不知道什么原因赋值不成功,不起作用很难受。
    2019-10-18
  • leslie
    我记得样式和加载不同:有时会听到开发PM抱怨用户用小众型的浏览器,甚至许多都是根本不曾听闻的,导致效果不一致缺东西。
           其实这块最大的坑在于有时不知缺啥且做了个性化导致:个性化其实有时导致的兼容性问题。
    2019-10-18
收起评论
8
返回
顶部