概述
近期学习了一下大厂h5开发实战内容，并且参考实战手册做一些记录。大概包括以下几个方面内容：
- 基础页面开发；
- 响应式页面开发；
- 滑屏应用开发；
- 动效开发；（若干篇章）
接下来会根据以上几个方向来进行总结和概述。（可参考掘金小册——大厂h5开发实战手册）
基础页面开发
很多开发者可能问，不就是画ui吗，有什么好说的呢？自然，基础页面开发是作为h5开发者，最为基础的能力。但是完成一个页面和做好一个页面是有本质区别的。因此，基础篇必不可少。
那，上菜吧。
一、 能力要求
你以为是简单的html/css/js吗？emm,对，但还不够。
- html/css
- JavaScript（简单脚本）
- 切图
你没看错，【切图】也在能力要求范围内。不会「切图」意味着我们无法将设计稿中的图层元素转换成为网页中所需要的图片，那么产品所要求的高保真还原设计稿便是更不能企及了。
二、 案例
如果我们得到设计稿如下图：
通常，我们在ui设计师得到类似的.psd文件，然后开始着手开发。那么我们在开发中一般步骤如下：
- 设计稿审查;
- 编写页面骨骼框架;
- 填充网页血肉内容;
- 润色;
- 兼容性测试;
我们一个一个来。
1. 设计稿审查
审查意义：
- 了解设计稿的开发友好性
- 了解设计稿的排版布局及内容构成
此处也是常人的正向思维，拿到设计稿，先熟悉了解内容，然后思考以下是否有漏洞，或者是否有更好的建议与意见，其中某些模块细节如何处理，考虑复用性、易拓展性等，然后规划某些模块是否编写为可复用组件，复用范围等。
还以上图为例，明显多处可复用。那么可复用的又大致可分为两种类别：跨页面复用以及当前页面复用。那么该案例设计稿则可以划分如下：
- 跨页面复用组件： 头部导航、脚部信息；
- 当前页面复用组件： 如下图中1、2
这些展示的只是该过程中最为基础的审查，当然，如果条件允许的话，团队内可以学习凹凸实验室，尝试总结出一个类似的审查清单：
- 确定设计稿的开发友好性（是否有还原成本高或无法还原的地方）
- 确定一些特殊的元素是否有合理的边界处理（如文案超出外层容器的边界怎么办）
- 确定页面的框架结构（Layout）
- 确定跨页面可复用的组件（Site Component）
- 确定当前页面可复用的组件（Page Component）
- ……
此处不再一一赘述。
2. 编写页面骨骼框架
审查结束后，心里基本上有了比较成型的代码模型了，那么接下来就是编写页面骨骼框架了。通俗的来讲，就是搭架子。那么架子怎么搭？仁者见仁，但是最为基础的却都是统一的，比如必须掌握的知识点——盒模型。当然，此处不会讲解关于盒模型以及兼容性和差异性，还不太了解的可以自行搜索或者查询w3school。我们需要掌握盒模型在不同浏览器下的差异，盒模型宽高计算方法、内外边距以及一些兼容性问题的解决方案。然后，在摸清楚兼容性差异并解决之，达到统一后，便开始着手开发。
开发第一步：布局。
开发过程中，我们会写无数个块级元素，那么其实每个块级元素都相当于是一个盒模型，而一张完整的页面，正是由多个盒模型组合在一起组成的。如此来讲，我们的页面布局便是重中之重：我们应该如何合理的布局呢？想回答这个问题，不得不啰嗦一下目前常见的几种布局方式：
- 文档流布局;
- 浮动布局(float);
- 绝对布局(absolute);
- 弹性布局(flex);
- 网格布局(grid)；
在这几种常见的布局方式中，我们在经过第一步的审查设计稿之后，已经对开发内容有了一个大致的了解，起码架子方面是可以肯定的，因此根据设计稿内容选择合适的布局即可。目前一般页面布局都会属于混合布局，为了展示更加酷炫和对用户更加友好的内容，布局难度也在不断增加。但所谓复杂的布局，也要回归到基础布局上来回嵌套，因此这几种布局是必须全部熟悉并且掌握，合理运用。
3. 填充网页血肉内容
在页面布局完成之后，下一步就是要开始填充页面内容了，图片、音视频、文字混排等等，都让我们的页面更加鲜活和立体。如果把网页开发比喻成房屋建设，那么我们前面完成的就是打好了地基。就此结束吗？醒醒，工头让我喊你搬砖。根据设计，砌墙、装修、水管电线等等都要一步步的来啊，任重而道远。
在小册中，凹凸实验室此处概述重点讲解了前端另一大能力——切图。我不再作出相关介绍，关于切图姿势、如何高效切图等，都可以查找相关介绍。而在此处，我额外补充一点：优化。我所说的优化不是代码优化，而是引入的资源优化，比如图片、音视频等。因此一些小技巧，如雪碧图、占位图、预加载、懒加载等功能的特性便需要掌握。
4. 润色
何谓润色？且不要多想，当作普通的css编写即可。
其实在我们基础页面开发过程中，最容易获取成就感的地方，就在于润色过程，就好似给图画上色，哦不，是拍照化妆开美颜加滤镜，效果感十足。但是写的时候容易，维护却是一大难题。
往往在写完某个页面一段时间后，需要对其中某个样式就行维护时，找到该css位置需要理一下思路，那么……我们怎么通过某种规范来规避此问题或者是使该问题简单化呢？
BEM
BEM(boundary element method，边界元法)是一种继有限元法之后发展起来的一种新数值方法，与有限元法在连续体域内划分单元的基本思想不同，边界元法是在定义域的边界上划分单元，用满足控制议程的函数去逼近边界条件。所以边界元法与有限元相比具有单元的未知数少，数据准备简单等优点。但用边界元法解非线性问题时，遇到同非线性项相对应的区域积分，这种积分在奇异点附近有强烈的奇异性，使求解变得困难。
那么在我们的css代码中，如何使用BEM呢？
BEM 的意思就模块（Block）、元素（Element）、修饰符（Modifier），使用这种命名方式可以让 CSS 的类名变得有实际意义且能自我解释，具有更高的开发友好性。
Block - 模块，名字的单词之间用 `-` 符号连接
Element - 元素，模块中的子元素，用 `__` 符号连接
Modifier - 修饰符，表示父元素或子元素的其他形态，用 `--` 符号连接
举个例子
普通写法：
<footer class="footer-box">
<div class=“left”></div>
<div class=“right”></div>
</footer>
BEM写法：
<footer class="footer-box">
<div class=“footer-box__left”></div>
<div class=“footer-box__right”></div>
</footer>
对比后可发现，模块的命名已经语义化，后期维护减少了些许的复杂程度，页面的渲染效率提升了，但是……会不会命名太复杂了呢？不得不说，sacc/less是个好东西。我们搭配其来使用，则可编写为：
.footer-box{
&__left{ ... }
&__right{ ... }
}
5. 兼容性测试
在页面开发完成之后，别急，换个浏览器试试？换台设备试试？emm，内心是拒绝的。
兼容性测试是开发完成后必不可少的一步。由于各浏览器内核差异，版本差异甚至不同设备之间的分辨率差距，会导致同一个页面在不同设备不同浏览器中展现出千奇百怪的姿态来。为了完成页面的统一性，我们不得不一个个的做兼容，这也是印证了IE 虐我千百遍，我待 IE 如初恋这句话。
基本原则
渐进增强与平稳退化。
根据小册提议，兼容下问题解决流程步骤如下：
- 确认触发的场景：什么浏览器，什么版本，什么情况下触发的问题，做到稳定复现。
- 找出问题原因：是什么问题导致的，具体表现如何？
- 确定解决办法：参考现成的解决方案，如哪些属性不能使用以及相应的 Hack 处理。
- 收集兼容性处理方法，积累成文档。
小结
我们根据案例，分析了基础开发的五个步骤：设计稿审查;编写页面骨骼框架;填充网页血肉内容;润色;兼容性测试。每个步骤有了一个简单的介绍，但是不够深入，总体来讲还是对基础开发有了一个大致的了解。至于更加深入的内容，下篇接着写。
