之前写过两篇开辟中碰到的题目和处理计划。当时是CSS 和 JavaScript 离开写的。如今写这篇文章的时刻觉得许多内容都是有内在联系的，所以不好离开。

给人人分享一下这半年来的感觉吧：

晓得和明白之间是有很大间隔的。他人谈到一个知识点，能接上嘴并且能宣布一下本身的看法，这叫晓得。碰到题目能够想到用什么知识点处理题目，这叫明白。

所以有许多知识点本身确着实书上都看到过然则在日常平凡碰到题目的时刻却不晓得怎样去用或者说想到去用，有时刻会有同事给一下指点说用什么处理题目。症结时刻照样多看（看书，看他人的代码）和多用。

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

display:none 封闭一个元素的显现（对规划没有影响）；其所有子女元素都也被会被封闭显现。文档衬着时，该元素犹如不存在。（不会显现在文档流中的位置，然则 DOM 节点仍会出如今文档流中）
visibility:hidden visibility属性让你能够掌握一个图形元素的可见性,然则仍会占用显现时刻在文档流中的位置。

运用 display:none 的时刻虽然元素不会显现，然则DOM 节点仍会涌现，所以我们就能够运用挑选器对该元素举行操纵。以下图中的示例：

2.事宜冒泡激发的题目

这个题目是发作在本身上篇文章《h5端呼起摄像头扫描二维码并剖析》中的。细致的代码能够看那篇文章。

题目发作的场景

先看一段html 代码：

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

之前我的主意是这个模样的：
1.我先触发qr-btn的 click 事宜，在回调中触发 input 的 click 事宜click 事宜
2.然后触发 input 的 change 事宜,猎取上传图片的信息。

依据我的思绪代码应当是下面的这个模样的

//点击父级元素的事宜
    $('.qr-btn').bind('click',function(){
        //触发子元素的事宜
        $('[node-type=jsbridge]').trigger("click");
    });
    $('[node-type=jsbridge]').bind('change',function(){
        //做一些事变
    });

上面的代码，依据一般的思绪应当是没有题目的，然则，在现实的运转历程当中却发作了题目。浏览器的报错信息以下：

这是由于客栈溢出的题目。那末为何会涌现如许的题目呢？我把断点打在了以下的位置，然后点击子元素

发作的状况是：代码无限次的触发$('.qr-btn').bind(...) ,就涌现了上面的报错信息。那末是什么缘由致使的呢？
思索一下发明：是由于事宜冒泡的题目。我单击父元素触发子元素的 click 事宜，子元素的 click 事宜又冒泡到父元素上，触发父元素的 click 事宜，然后父元素再次触发了子元素的 click 事宜，这就造成了事宜的轮回。

题目处理办法：

尝试阻挠事宜的冒泡，看能够处理题目？
那我们尝试在触发子元素的click的时刻，尝试构造子元素的冒泡，看可否处理我的题目？增加以下的代码：

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

经由我的测试，代码是能够一般的运转的。

那末我们有无更好的方法来处理上面的题目呢？请看接下来的内容

3.lable标签的 for 属性

先来看 lable 标签的定义:

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户显现任何特殊效果。不过，它为鼠标用户革新了可用性。假如您在 label 元素内点击文本，就会触发此控件。就是说，当用户挑选该标签时，浏览器就会自动将核心转到和标签相干的表单控件上。
<label> 标签的 for 属性应当与相干元素的 id 属性雷同。

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

<form>  <label for="male">Male</label>
 <input type="radio" name="sex" id="male" />
 <br />  <label for="female">Female</label>
 <input type="radio" name="sex" id="female" />
</form>

效果以下图：

到这里应当之道我们该怎样革新我们的代码了，

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

除了 lable 标签的款式我们本身须要本身定义外，另有两个长处：

• 减少了 JavaScript 的誊写；

• lable 标签和 input 标签没有必要是包括关联

4.“弹层盒”规划和一般盒模子规划的优缺点对照

近来做了一个抽奖的运动，个中就有一个轮盘的扭转的动画效果（注重啦，中心的谁人卡顿是 gif 图片又重新最先播放了）。，效果以下图：

关于动画实如今下一篇文章中会继承引见，这里重要来关注下规划的题目。由于我们页面会在 pc 和挪动挪动各出一套。所以在 pc 和挪动我离别用了两种计划，pc 传统规划完成，h5 “弹性盒”完成。

1.弹性盒完成九宫格

外围的那些灯是运用相对定位来做的，就不过过量的引见，重要的是看中心的奖品九宫格的部份。html 代码以下：

        <div class="re-middle">
                <div class="row-a" node-type="row-a">
                    <div>mac pro</div>
                    <div>扫地机器人</div>
                    <div>iphone6s</div>
                </div>
                <div class="row-b" node-type="row-b">
                    <div>20积分</div>
                    <div></div>
                    <div>优惠券</div>
                </div>
                <div class="row-c" node-type="row-c">
                    <div>ps4</div>
                    <div>
                        <p>猴年限定</p>公仔</div>
                    <div>祝愿红包</div>
                </div>
                <div node-type="reward-layer"></div>
            </div>

css代码以下：

.re-middle {
    position: absolute;
    width: 28.3rem;
    height: 16rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #f69f75;
    color: #ffdece;
    font-size: 1.8rem;
}

.row-a,
.row-b,
.row-c {
    height: 5.3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 5.3rem;
    background-color: #f69f75;
}

由上面的 css 代码能够看出来我仅仅是在程度方向上运用了“弹性盒”,而在竖直的方向上，照样运用了牢固高度（由于我是用的 rem 单元，这里的牢固也是不正确的，高度会依据 fontsize 值举行盘算。）

那末可不能够在竖直和程度都是用“弹性盒”呢？
来看一下下面的css代码：

.re-middle {
    position: absolute;
    width: 28.3rem;
    height: 16rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #f69f75;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #ffdece;
    font-size: 1.8rem;
}

.row-a,
.row-b,
.row-c {
    /*height: 5.3rem;*/
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 5.3rem;
    background-color: #f69f75;
    /*position: relative;*/
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}

周末的时刻关于这个规划本身又翻书看了下“弹性盒”的文档，终究完成了在竖直和垂直方向上都完成内容的程度垂直居中内部元素。实在上面的代码只须要把内容的父级元素再次定义为display:flex 再增加两个属性 justify-content和align-items就能够了。前者是掌握弹性盒的内容垂直方向居中，后者掌握内容程度方向居中。

细致代码以下：

.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #000;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

2.传统体式格局完成

与 h5 端比拟，我在 pc 端的完成是传统的浮动体式格局.我的 HTML 代码以下：

<div class="re-middle">
                            <div class="row-a">
                                <div>mac pro</div>
                                <div class="row-a-sec">祝愿红包</div>
                                <div class="row-a-last"> iphone 6s</div>
                            </div>
                            <div class="row-b clearfix">
                                <div>优惠券</div>
                                <div class="row-b-sec"></div>
                                <div class="row-b-last">20积分</div>
                            </div>
                            <div class="row-c">
                                <div>扫地机器人</div>
                                <div class="row-c-sec">猴年限定
                                    <p>公仔</p>
                                </div>
                                <div class="row-c-last">ps4</div>
                            </div>
                            <div class="reward-btn"></div>
                        </div>

css 代码以下：

.re-middle {
    background-color: #f89f71;
    width: 530px;
    height: 320px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.row-a,
.row-b,
.row-c {
    /*height: 106px;*/
    font-size: 0;
    overflow: hidden;
}

.row-a > div,
.row-c > div {
    float: left;
    width: 176px;
    height: 106px;
    text-align: center;
}

.row-b div {
    float: left;
    width: 176px;
    height: 106px;
    text-align: center;
    line-height: 106px;
    background-color: #f69f75;
}

由上面的 css 代码对照看我们能够明显看出传统的浮动体式格局的规划和“弹性盒”规划的一些优缺点：

• float规划代码简约，然则必需肯定的指定盒子的宽度和高度，多屏幕的适配上会差一些（rem动态盘算除外）。

• “弹性盒”规划代码运用新的 css3属性，须要增加分外的厂商前缀，增加了代码的复杂度(增加厂商前缀能够运用 sublime 插件，一键完成，引荐我的文章 前端开辟工程师的 sublime 设置)

• “弹性盒”为多屏幕的适配供应了便利性。我不用去关心子元素的宽度和高度是多少，或者是屏幕的宽度是多少，都邑依据现实请款flex本身会去适配。

碰到的一个小题目，多行文本的措置居中：
这个九宫格内的文本元素，假如只是单行的话，只需运用 line-height 就能够处理题目，然则假如多行呢？会出什么状况呢，看下图：

所以这里只能斟酌不运用 line-height，运用 padding 来处理题目 ,尝试padding后的效果。以下图：

能够看到容器的下面多出了一部份。那也是我们运用的padding的题目，那末怎样处理这个题目呢？这就要用到之前提到过的box-sizing来处理题目。

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

5.按钮屡次提交的处理计划

在做“跑马灯”插件的时刻碰到了一个题目，就是用户点击最先抽奖按钮今后在还没有返回效果的时刻用户又第二次点击抽奖按钮，谁人时刻时机涌现“奇葩”的题目。比方说：第一次请乞降第二次要求重合返回的效果显现哪个，就算许可用户举行二次抽奖，交互也不友好。而且假如前端页面不做限定的话，显现也会涌现奇葩的题目。比以下面如许：

如许是否是很蹩脚啊。。。

那末我是怎样处理这个题目呢？
答案很简单，我就是在点击按钮以后，运用相对定位弹起了一个通明的弹层，将按钮给掩盖，等效果返回并显现今后，我在同时去掉弹层。如许就避免了用户的反复提交。细致看一下代码：

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

.cover-layer{
    width:100%;
    height:100%;
    top:0;
    position:absolute;
    z-index:9999;
}

这里保证我的这个通明的弹层能够掩盖在抽奖按钮的上面。固然这个class 是我经由历程JavaScript 动态的增加和删除的。

$(node).on('clcik','.reward-btn',function(){
    //呼起弹层
    $('[node-type=cover_layer]',node).addClass('cover-layer');
    .....

    //返回效果今后去掉弹层
    $('[node-type=cover_layer]',node).removeClass('cover-layer');
    .....
});

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