lanbos'blog

《移动网页设计与开发html5+css3+javascript》读书笔记

《移动网页设计与开发html5+css3+javascript》一书写于2013年,在前端书籍中还算比较新的一本,当时html5,智能手机已经兴起,书中介绍的许多新技术在当今有一些已经是很普及的技术(css媒体查询,svg,canvas等),还有很多技术因为国情还需兼容ie低版本和所谓的“手机上的ie”——腾讯的“x5内核”,所以没能普及(弹性盒子,web storage,视频音频基本API等)。书中还有部分前沿性的概念直到现在浏览器还没有实现其功能(原生web组件化,复杂的设备API)。

flexbox弹性盒子布局

flexbox布局技术已经很成熟了,但是因为之前微信采用的x5内核很长一段时间没有支持,导致使用的人并不多,知名的阮一峰的blog已经对flexbox布局方式做了详细的解释。这里结合书中58页内容和blog一起总结一下,简单记录作为备忘,对没看过的人的作为一个简单了解。

1.使用flexbox

在css中用display把元素设置为弹性盒子。

1
2
3
4
5
6
7
.box{
display: flex;
}
/*或者设置为行内元素*/
.box{
display: inline-flex;
}

注意,设为Flex布局以后,子元素的floatclearvertical-align属性将失效。

2.基本概念


上图已经很好的体现了flexbox的基本概念

1
2
3
4
5
6
main axis =》水平的主轴 x轴
cross axis =》垂直的交叉轴 y轴
main start =》主轴的开始位置(与边框的交叉点)
cross end =》主轴的结束位置(与边框的交叉点)
cross start =》交叉轴的开始位置
cross end =》交叉轴的结束位置

3.属性设置及例子

  • flex-direction 主轴方向 x轴方向,甚至能和y轴互换
  • flex-wrap 换行方式
  • flex-flow 流动方式(上两个的简写方式)
  • justify-content 主轴对齐方式
  • align-items 交叉轴对齐方式
  • align-content 多根轴线的对齐方式

原文中详尽的解释了这些属性的作用,我把这种新的布局方法实现用positon和float布局的方式做个对应。


水平排列

1
2
3
4
5
6
7
.fBox {
overflow: hidden;
}

.fItem {
float: left;
}
1
2
3
4
5
6
.fBox {
display:flex;
flex-flow:row wrap;
}

.fItem {}

水平居右反排列

1
2
3
4
5
6
7
.fBox {
overflow: hidden;
}

.fItem {
float: right;
}
1
2
3
4
5
6
.fBox {
display:flex;
flex-flow:row-reverse wrap;
}

.fItem {}

水平居右正排列

1
2
3
4
5
6
7
8
9
10
.fBox {
overflow: hidden;
}
.wrap{
float: right;
overflow: hidden;
}
.fItem {
float: left;
}
1
2
3
4
5
6
.fBox {
display:flex;
justify-content:flex-end;
}

.fItem {}

水平居中

1
旧的方式使用定位和负边距居中,或者设置为blog利用margin:auto居中,比较繁琐
1
2
3
4
5
6
.fBox {
display:flex;
justify-content:center;
}

.fItem {}

导航常用的设置:等距水平排列

1
旧的方式需要使用浮动和宽度计算实现,比较繁琐
1
2
3
4
5
6
.fBox {
display:flex;
justify-content:space-around;
}

.fItem {}

可以看到弹性盒子可以通过简单的属性配置就能代替float属性的绝大多数使用情况,而且不用引入伪类来清除浮动,或者引用overflow:hidden这种后患无穷的清浮动方式。
弹性盒子布局的强大之处除了在水平方向的代替float方案,更强大的是在垂直方向的使用。很大程度上大体了position的使用。


全部子元素靠下排列

1
2
3
4
5
6
7
8
9
10
11
12
13
.fBox {
position: relative;
}

.wrap {
overflow: hidden;
position: absolute;
bottom: 0;
}

.fItem {
float: left;
}

1
2
3
4
5
6
7
.fBox {
display:flex;
justify-content:flex-start;
align-items:flex-end;
}

.fItem {}

水平垂直居中

1
这是经典面试题,各种各样的方法和奇技淫巧可以实现

1
2
3
4
5
6
7
.fBox {
display:flex;
justify-content:center;
align-items:center;
}

.fItem {}

子元素属性及特殊用法

弹性盒子之所以称之为“弹性”不仅仅是因为上述的几种简化了的布局的方式,更是因为在设置为display:flex后的元素的子元素上可以设置更为“弹性的方法”

  • order 子元素排序
  • flex-grow 子元素弹性放大
  • flex-shrink 子元素弹性缩小
  • flex-basis 子元素宽度
  • flex 是flex-basis,flex-grow,flex-shrink的简写方式
  • align-self 设置子元素独特的align-items

上述方法在blog上有详细的描述。但是除了可以预料到的order属性和align-self外(这两个属性非常的强大,在布局中对特殊元素的处理会起很大的作用),真正所谓的弹性属性flex却缺少使用场景,原因下面阐述。

关于flexbox和响应式网站

要不要响应式

书中对弹性盒子布局的描述主要是为了网格布局和响应式网站做铺垫。很明显flex属性在响应式网站开发中会发挥巨大作用。最近的消息是全球最流行的web前端ui框架bootstrap也在新版本中放弃了传统的布局方式,全面使用了flexbox布局。更令国内开发者鼓舞的消息是腾讯x5内核也在今年的新版本中大大兼容了flexbox。而在全球范围内flexbox的兼容性也不用多有顾虑can I use
但是响应式网站的根本问题是不适合定制化的制作,更适合模板网站的推广。
像网站后台界面、blog的皮肤等场景,只需简单且固定的布局方式,无需复杂的展现方式是非常适合响应式开发的。但是当复杂的定制化需求时,当前国内网站开发的工作流是,专门的ui设计人员,专门的web前端人员和服务器端的人员这种配合开发方式。响应式开发对于ui设计的要求太高,而且前端开发并没有提高很大的开发效率,一样要写很多的媒体查询断点。而网站天然具有的界面易变性导致当需求有变动时,响应式网站很难改动。所以响应式网站在实际开发中并不多做考虑。但是flexbox那些可以代替定位和浮动的便利性功能在移动端可以放心的使用了,这也是flexbox布局最大的作用。

什么时候不用flexbox

使用了flexbox后并不是要完全舍弃传统的position和float,而是让他们回归到他们原本在创立之初时就本应使用的地方——脱离文档流操作即z轴布局。可以说flexbox提供了较为完备的x轴、y轴解决方案,而当布局需要在z轴方向有布局要求时,使用position和float才是最合适的方式。

web组件

书中175页开始对web组件的描述做了展望,提到了模板,样式封装,自定义元素,shadow DOM四个概念。不知道写书时react是否已经出现,但是react框架和近来很火的vue是这四个概念完整的体现。
传统的前端代码组件方式为html文件,css文件夹,js文件夹,资源文件夹,当前端项目很小时,代码复用没有很高的要求,这样可以很好的配合后台的mvc架构。而如今前后分离的开发方式是主流,spa大行其道,前端功能越来越复杂,甚至包括要处理路由等功能。这种情况下,组件化的开发方式更能提高代码的复用率,而且以组件为单位维护复杂的网页更合理简便。

模板

书中描述的模板的使用是在html底层来解决,而当前的开发方式用到的模板还是在js中实现的,js模板引擎有很多(这里就不分在后台还是前端使用了),ejs、jade、doT、artTemplate等,配合文章中提到的在div内部封装style标签来整合样式能基本完成简单的web组件化封装。而react中的jsx和其他现代化框架中的模板配合前端自动化工具的实现才更符合书中提到的web组件化的封装形态。

样式封装和自定义元素

css预处理器less和sass提供了css编程的效果,也打下样式封装的基础。自定义元素也只能通过js的预处理才能完整的实现。之前这种预处理过程基本都是由开发者的ide或者一些其他语言的脚本工具来实现,所以应用并没有非常的广泛。而nodejs的发展让web前端开发带来了新的活力。
nodejs开发之初是让js跑在服务器中,让jser更加的渗透到全栈领域,但是nodejs真正影响巨大的是通过制作前端工具来改变前端的开发。grunt,gulp,webpack等前端自动化构建工具的诞生彻底颠覆了传统的前端开发流程,这些工具利用node预先编译的形式完成了web组件在开发形式上的道路。同时也推动了很多前端mv*框架的诞生。
2017年最火的三个前端框架肯定是angular,react,vue无疑,中小型项目选型又可以放弃angular这种臃肿的解决方案,vue和react都支持组件化开发(angular也有组件化解决方案),特别是react初始就采用的jsx语法(vue在2.0版本也开始支持jsx),完美的封装了web组件,这里又得提到阮一峰的blog罗列了react开发用到的技术栈。react和vue的开发又可以展开说很多这里就不做赘述了。

shadow DOM

shadow DOM的概念非常的好,是解决web组件化封装和性能的一种很好的方案,但是现代前端框架对dom性能的解决方案是Virtual DOM。这两种概念容易混淆。

Virtual DOM不是DOM,只是DOM的一种(经过优化的)映射,JS代码操作Virtual DOM获得更好的渲染性能,因为直接操作DOM额外开销太大。

Shadow DOM是指浏览器的一种能力,它允许在文档(document)渲染时插入一棵DOM元素子树,但是这棵子树不在主DOM树中。

二者的形态都是dom的一种映射, Virtual DOM是为了避免dom操作浪费性能用js模拟dom的解决方案,而Shadow DOM是html dom中利用特殊声明放置的一层无法用通常意义上的js选择器和css选择器来获取的dom,可能因为兼容性问题和操作的不便利性没有被其他框架所采用来映射dom操作和组件化封装。

总结

下面对书中的提到四个概念和现代前端框架的解决方案作一个简单的对照:

  • 模板 =》各式的template,jsx
  • 样式封装 =》webpack 等自动化工具预处理
  • 自定义元素 =》webpack 等自动化工具预处理
  • shadow DOM =》没有被采用,封装和性能方案被webpack 等自动化工具预处理与Virtual DOM代替。

虽然html5并没有从底层上有好的web组件化解决方案,但是以上提到的现代化的工具和框架已经用另一种方式实现了书中展望的web组件化,让开发者已经享受到了web组件化的便利性。

html5图片解决方案(svg图片和canvas)

在移动优先为主的开发模式下,位图的能伸缩不变形的优势显的越来越重要,svg和canvas是矢量图在web上的两种最常见的解决方式,书中123页谈了svg格式和canvas格式的选择,总而就是svg更利于编辑,canvas性能更有优势。
svg有很大的便利性和定制性,首先常见的位图设计工具ai和sketch等都可以导出svg,这对当前设计+前端+后台的web开发方式可以基本照搬使用,而且因为保留了基本的dom结构,也可以对其进行简单的js操作和css操作。但是这种看起来美好的格式却因为位图本身无法简便的制作高光阴影等效果,色彩较为单一等缺点一直无法得到重用。当前移动端图片适配还是通过大图片(@2、@3等)通过等比例压缩来保持清晰度和不同尺寸的适配。反而canvas的使用情况较多,canvas可以在浏览器端简单的处理图片(裁切,加滤镜,压缩等),而且因为其高性能性,复用程度高,定制化需求的低的一些模板图表,简单动画等都采用了canvas技术。canvas在html5游戏中也起到了非常重要的作用,较多html5游戏引擎都是基于canvas和webgl技术来实现的。canvas技术在前端圈火爆了一阵,似乎很多人都在学用canvas画一些简单的图画,但是其实复杂绘图和动画制作这种功能并不适合用代码来实现,更多的是用软件工具来进行所见即所得的编辑。
复杂的canvas使用就不在这里详细阐述了,总之canvas在前端的使用更多是配合一些图形算法来进行图像的简单操作,html5的图片适应问题仍旧没有很完美的解决方案。

html5多媒体

终究会是网络多媒体时代

坐着写书时flash仍在web上有着很大的一席之地,但是到今天,flash已经彻底被主流所舍弃,国外大多的视频网站都放弃了flash,国内的视频也在今年逐渐的转型。多媒体+交互其实是网站的终极形态,苹果官网和一些很注重设计元素的网站,很多都用一个大的视频当做了网站的banner,今年很多的非常热的营销h5也逐渐加入了多媒体与用户交互的元素。可以预见,当运营商基础设施逐渐好时,人们的网速都达到一定程度时网站必将会产生分化,大多不注重有阅读元素的网站终究转换为视频+交互的网站,直播和小视频的愈演愈热就是直接的证明。

常见api分析

HTML5视频的那些事儿一文中详细解释了视频相关的问题:
总结就是 兼容选mp4格式,没有定制化需求 使用jwplayer等第三方播放软件(最近很火的是b站开源的flv.js是一个flv格式解决方案,可以多加关注),有定制化需求的看api:
html5提供的多媒体api不算丰富只能说够用,大体常用的只有播放,暂停,进度,缓存等,列一个总目录:

书中则阐述了进度条设置和播放暂停的实例可以作为对照。
推荐两篇blog,对常见video和audio的使用做了很好的实践
HTML5中使用js控制audio标签的方法
使用 HTML5 音频和视频

总结

html5多媒体更深层次的使用需要对视频和音频的底层进行了解,而且html5对视频仅仅是提供够用的api还是满足不了一些更复杂的交互要求,如广告插入,视频深层交互等功能。这也是当前很多公司没有放弃flash的原因。

设备API

web storage

设备API中用到的最多的就是web storage,书中101页开始简单描述了web storage的使用,作为代替cookie成为浏览器储存的方案web storage的使用很便捷:

  • .setItem( key, value) 存储
  • .getItem(key) 提取
  • .removeItem(key) 删除
  • .clear() 全部清除

若是排除ie8的兼容考虑,浏览器的离线缓存方案完全可以用local storage来实现,而页面间的通信则可以使用local storage和session storage实现。书中这张的最后也提到了更现代化的IndexedDB——浏览器端数据库可以作为储备了解。

其他设备API

更多的api开放是html5变得强大的根本,很多html5的设备api的使用大大提高了网页和用户的交互方式,如摄像头、麦克风、定位、方向、震动等等,书中做了简单的阐述和事例,当用到的这些api的时候可以查阅来做启发。
看到和想到的几个利用新设备api很好的交互方式,有待实践:

  • 利用方向api+3d贴图使做一些3d动画交互效果
  • 地理定位API的地图和ar交互
  • 利用网络信息api检测用户网络条件来进行不同的加载处理

这些强大的api和美好的想法要想实现主要受制于两点:浏览器厂商的分裂api导致的兼容问题,浏览器本身的性能问题。希望随着时间的推移这两点会有改观。

总结

《移动网页设计与开发html5+css3+javascript》一书并不是一本入门书籍,更不像是一本工具书籍。全书只有不到200页,只是作者在2013年时对html5,css3,es5比XHTML,css2.0,es3新增了哪些主要的新功能并做了一些简单的实例和讲解。2016年看了这本书后我又结合我认为的当前比较热门主流的技术做了一些摘录和总结,并加了一些自己的观点拼凑出了此篇笔记。当然此书也有盲点,对于很重要的css3能实现的2d,3d动画效果只是一笔带过;websocket网络长链接这种大家很看好的技术也没有直接讲解;2013年es6(js2015)还未定稿,对最近的es6语法并没有过多的讲解而且全书对于js方面讲解本身就不多。正好下一篇对《javascript高级程序设计》读书笔记可以更侧重的讲js部分。