移动端 h5开发相关内容总结(三)

之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的，所以不好分开。

给大家分享一下这半年来的感受吧：

所以有很多知识点自己确实在书上都看到过但是在平时遇到问题的时候却不知道怎么去用或者说想到去用，有时候会有同事给一下指导说用什么解决问题。关键时候还是多看（看书，看别人的代码）和多用。

1.display:none; 和 visibility:hidden;的区别

使用 display:none 的时候虽然元素不会显示，但是DOM 节点仍会出现，所以我们就可以使用选择器对该元素进行操作。如下图中的示例：

2.事件冒泡引发的问题

这个问题是发生在自己上篇文章 《h5端呼起摄像头扫描二维码并解析》 中的。详细的代码可以看那篇文章。

问题发生的场景

先看一段html 代码：

1. <div class="qr-btn" node-type="qr-btn">扫描二维码1
2. <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
3. </div>

按照我的思路代码应该是下面的这个样子的

1. //点击父级元素的事件
2. $('.qr-btn').bind('click',function(){
3. //触发子元素的事件
4. $('[node-type=jsbridge]').trigger("click");
5. });
6. $('[node-type=jsbridge]').bind('change',function(){
7. //做一些事情
8. });

上面的代码，按照正常的思路应该是没有问题的，但是，在实际的运行过程中却发生了问题。浏览器的报错信息如下：

这是因为堆栈溢出的问题。那么为什么会出现这样的问题呢？我把断点打在了以下的位置，然后点击子元素 

问题解决办法：

1. $('[node-type=jsbridge]').bind('click',function(e){
2. // console.log(e.type);
3. e.stopPropagation();
4. });

经过我的测试，代码是能够正常的运行的。

那么我们有没有更好的方法来解决上面的问题呢？请看接下来的内容

3.lable标签的 for 属性

先来看 lable 标签的定义:

看想一下 w3school 的示例代码和效果：

1. <form> <label for="male">Male</label>
2. <input type="radio" name="sex" id="male" />
3. <br /> <label for="female">Female</label>
4. <input type="radio" name="sex" id="female" />
5. </form>

效果如下图：

到这里应该之道我们该怎么改进我们的代码了，

1. <lable class="qr-btn" node-type="qr-btn" for="qr-input">扫描二维码1
2. <input node-type="jsbridge" id="qr-input" type="file" name="myPhoto" value="扫描二维码1" />
3. </lable>

除了 lable 标签的样式我们自己需要自己定义外，还有两个优点：

• 减少了 JavaScript 的书写；
• lable  标签和  input  标签没有必要是包含关系

4.“弹层盒”布局和普通盒模型布局的优缺点对比

最近做了一个抽奖的活动，其中就有一个轮盘的旋转的动画效果（注意啦，中间的那个卡顿是 gif 图片又重新开始播放了）。，效果如下图：

关于动画实现在下一篇文章中会继续介绍，这里主要来关注下布局的问题。因为我们页面会在 pc 和移动移动各出一套。所以在 pc 和移动我分别用了两种方案，pc 传统布局实现，h5 “弹性盒”实现。

1.弹性盒实现九宫格

外围的那些灯是使用绝对定位来做的，就不过过多的介绍，主要的是看中间的奖品九宫格的部分。html 代码如下：

1. <div class="re-middle">
2. <div class="row-a" node-type="row-a">
3. <div>mac pro</div>
4. <div>扫地机器人</div>
5. <div>iphone6s</div>
6. </div>
7. <div class="row-b" node-type="row-b">
8. <div>20积分</div>
9. <div></div>
10. <div>优惠券</div>
11. </div>
12. <div class="row-c" node-type="row-c">
13. <div>ps4</div>
14. <div>
15. <p>猴年限定</p>公仔</div>
16. <div>祝福红包</div>
17. </div>
18. <div node-type="reward-layer"></div>
19. </div>

css代码如下：

1. .re-middle {
2. position: absolute;
3. width: 28.3rem;
4. height: 16rem;
5. top: 0;
6. left: 0;
7. right: 0;
8. bottom: 0;
9. margin: auto;
10. background-color: #f69f75;
11. color: #ffdece;
12. font-size: 1.8rem;
13. }
15. .row-a,
16. .row-b,
17. .row-c {
18. height: 5.3rem;
19. display: -webkit-box;
20. display: -webkit-flex;
21. display: -ms-flexbox;
22. display: flex;
23. -webkit-flex-flow: row nowrap;
24. -ms-flex-flow: row nowrap;
25. flex-flow: row nowrap;
26. }
28. .row-a div,
29. .row-b div,
30. .row-c div {
31. -webkit-box-flex: 1;
32. -webkit-flex: 1;
33. -ms-flex: 1;
34. flex: 1;
35. text-align: center;
36. line-height: 5.3rem;
37. background-color: #f69f75;
38. }

由上面的 css 代码可以看出来我仅仅是在水平方向上使用了“弹性盒”,而在竖直的方向上，还是使用了固定高度（因为我是用的 rem 单位，这里的固定也是不准确的，高度会根据 fontsize 值进行计算。）

那么可不可以在竖直和水平都是用“弹性盒”呢？来看一下下面的css代码：

1. .re-middle {
2. position: absolute;
3. width: 28.3rem;
4. height: 16rem;
5. top: 0;
6. left: 0;
7. right: 0;
8. bottom: 0;
9. margin: auto;
10. background-color: #f69f75;
11. display: -webkit-box;
12. display: -webkit-flex;
13. display: -ms-flexbox;
14. display: flex;
15. -webkit-box-orient: vertical;
16. -webkit-box-direction: normal;
17. -webkit-flex-direction: column;
18. -ms-flex-direction: column;
19. flex-direction: column;
20. color: #ffdece;
21. font-size: 1.8rem;
22. }
24. .row-a,
25. .row-b,
26. .row-c {
27. /*height: 5.3rem;*/
28. -webkit-box-flex: 1;
29. -webkit-flex: 1;
30. -ms-flex: 1;
31. flex: 1;
32. display: -webkit-box;
33. display: -webkit-flex;
34. display: -ms-flexbox;
35. display: flex;
36. -webkit-flex-flow: row nowrap;
37. -ms-flex-flow: row nowrap;
38. flex-flow: row nowrap;
39. }
41. .row-a div,
42. .row-b div,
43. .row-c div {
44. -webkit-box-flex: 1;
45. -webkit-flex: 1;
46. -ms-flex: 1;
47. flex: 1;
48. text-align: center;
49. line-height: 5.3rem;
50. background-color: #f69f75;
51. /*position: relative;*/
52. -webkit-box-align:center;
53. -webkit-align-items:center;
54. -ms-flex-align:center;
55. align-items:center;
56. }

周末的时候关于这个布局自己又翻书看了下“弹性盒”的文档，终于实现了在竖直和垂直方向上都实现内容的水平垂直居中内部元素。 其实上面的代码只需要把内容的父级元素再次定义为 display:flex 再添加两个属性 justify-content 和 align-items 就可以了。前者是控制弹性盒的内容垂直方向居中，后者控制内容水平方向居中。

详细代码如下：

1. .row-a div,
2. .row-b div,
3. .row-c div {
4. -webkit-box-flex: 1;
5. -webkit-flex: 1;
6. -ms-flex: 1;
7. flex: 1;
8. border: 1px solid #000;
9. -webkit-box-align: center;
10. -webkit-align-items: center;
11. -ms-flex-align: center;
12. align-items: center;
13. -webkit-box-pack: center;
14. -webkit-justify-content: center;
15. -ms-flex-pack: center;
16. justify-content: center;
17. display: -webkit-box;
18. display: -webkit-flex;
19. display: -ms-flexbox;
20. display: flex;
21. }

2.传统方式实现

与 h5 端相比，我在 pc 端的实现是传统的 浮动 方式.我的 HTML 代码如下：

2. <div class="re-middle">
3. <div class="row-a">
4. <div>mac pro</div>
5. <div class="row-a-sec">祝福红包</div>
6. <div class="row-a-last"> iphone 6s</div>
7. </div>
8. <div class="row-b clearfix">
9. <div>优惠券</div>
10. <div class="row-b-sec"></div>
11. <div class="row-b-last">20积分</div>
12. </div>
13. <div class="row-c">
14. <div>扫地机器人</div>
15. <div class="row-c-sec">猴年限定
16. <p>公仔</p>
17. </div>
18. <div class="row-c-last">ps4</div>
19. </div>
20. <div class="reward-btn"></div>
21. </div>

css 代码如下：

1. .re-middle {
2. background-color: #f89f71;
3. width: 530px;
4. height: 320px;
5. position: absolute;
6. top: 0;
7. right: 0;
8. bottom: 0;
9. left: 0;
10. margin: auto;
11. }
13. .row-a,
14. .row-b,
15. .row-c {
16. /*height: 106px;*/
17. font-size: 0;
18. overflow: hidden;
19. }
21. .row-a > div,
22. .row-c > div {
23. float: left;
24. width: 176px;
25. height: 106px;
26. text-align: center;
27. }
29. .row-b div {
30. float: left;
31. width: 176px;
32. height: 106px;
33. text-align: center;
34. line-height: 106px;
35. background-color: #f69f75;
36. }

由上面的 css 代码对比看我们可以显然看出传统的浮动方式的布局和“弹性盒”布局的一些优缺点：

• float 布局代码简洁，但是必须确定的指定盒子的宽度和高度，多屏幕的适配上会差一些（rem动态计算除外）。
• “弹性盒”布局代码使用新的 css3属性，需要添加额外的厂商前缀，增加了代码的复杂度(添加厂商前缀可以使用 sublime 插件，一键完成，推荐我的文章  前端开发工程师的 sublime 配置 )
• “弹性盒”为多屏幕的适配提供了便利性。我不用去关心子元素的宽度和高度是多少，或者是屏幕的宽度是多少，都会根据实际请款 flex 自身会去适配。

所以这里只能考虑不使用 line-height ，使用 padding 来解决问题 ,尝试 padding 后的效果。如下图： 

可以看到容器的下面多出了一部分。那也是我们使用的 padding 的问题，那么怎么解决这个问题呢？这就要用到之前提到过的 box-sizing 来解决问题。

1. .row-c-sec {
2. color: #ffdece;
3. font-size: 30px;
4. padding-top: 17px;
5. background-color: #f69f75;
6. /*使容器的高=内容高度+padding +border*/
7. box-sizing: border-box;
8. }

5.按钮多次提交的解决方案

在做“跑马灯”插件的时候遇到了一个问题，就是用户点击开始抽奖按钮以后在还没有返回结果的时候用户又第二次点击抽奖按钮，那个时候机会出现“奇葩”的问题。比如说：第一次请求和第二次请求重合返回的结果显示哪一个，就算允许用户进行二次抽奖，交互也不友好。而且如果前端页面不做限制的话，显示也会出现奇葩的问题。比如下面这样：

这样是不是很糟糕啊。。。

那么我是怎么解决这个问题呢？答案很简单，我就是在点击按钮之后，使用绝对定位弹起了一个透明的弹层，将按钮给覆盖，等结果返回并显示以后，我在同时去掉弹层。这样就避免了用户的重复提交。详细看一下代码：

1. <div node-type="cover_layer"></div>

1. .cover-layer{
2. width:100%;
3. height:100%;
4. top:0;
5. position:absolute;
6. z-index:9999;
7. }

这里保证我的这个透明的弹层能够覆盖在抽奖按钮的上面。当然这个 class 是我通过 JavaScript 动态的添加和删除的。

1. $(node).on('clcik','.reward-btn',function(){
2. //呼起弹层
3. $('[node-type=cover_layer]',node).addClass('cover-layer');
4. .....
6. //返回结果以后去掉弹层
7. $('[node-type=cover_layer]',node).removeClass('cover-layer');
8. .....
9. });

这次的分享就到这里，下一次会分享“轮盘”抽奖效果的 JavaScript 开发过程。