经验收获

• js的引入位置：body后面，不要忽视这个问题。
• a{-webkit-tap-highlight-color:rgba(0,0,0,0)}
• 避免多层循环的嵌套，通过变量打包函数，转变成函数的嵌套。特别是给最内层子集绑定事件的时候，往往会需要通过变量来进行处理，而循环嵌套无法处理变量，只能通过函数嵌套传参（变量）的形式。
• 隐藏域的使用<input type="hidden" value='value'>
• css3美化单选/复选框；input:checked+span{***};
• 在display:none到display:block的渲染过程中，transition不起作用，通过setTimeout,给一个极短的时间用于完成display的渲染。
• 背景模糊：filter:blur(2px);
• 超出屏幕高度设置：加一层wrap,body滚动条，设置wrap最小高度；
• 波纹动画的两种制作方式；多层阴影或者多个不同透明度圆形错时缩放；
• 将input放到label标签内部，通过隐藏input已达到操作label替代操作input的效果，避开丑陋的input默认样式，通过value提交信息；
• obj.style.cssText用于设置行内样式；相当于重置style=""内部的内容；类似于innerHTML;
• textarea:设置高度通过row来设置，避免直接设置高度，可能会出现半行显示的问题；
• 通过以下方式隐藏input框，通过设置label已达到美化文件选择框的美化。

• <label>
      <input type="file">
      <img src="img/camera1.png">
      <span>导入视频</span>
  </label>

• 问题：
  • less使用过程中的疑问：less的mixin可以让css的嵌套层级更加贴近html的结构，简单清晰；不过有很多class是可以重复调用，或者很多差不多的html结构可以用相同的样式表；这个时候less的混合嵌套使得我们只能复用最外层的样式，而嵌套在内层的样式无法单独调用；例如：

    .test{
        .child{
            width: 100px;
        }
    }
    //可以这样
    .test02{
        .test();
    }
    //不可以这样
    .test03{
        .child();
    }

    是不是在某种程度上说，混合模式在简化嵌套操作的同时也给class的复用带来困难。

  • js中变量重复定义的问题：
    • 在面向过程的写法中，往往会产生多层函数嵌套的情况，这种情况就会带来变量应该在哪里定义的问题；
    • 解决方案：
      • 1.在父函数中定义父函数及所有子函数需要的变量，但是往往这一个父函数下的子函数我们可能在其他的父函数中也会调用，这个时候只能将子函数单独拿出来通过函数传参的方式，让不同的父函数在调用同一个子函数时传递不同的参数，这种方式在层级超过两层的情况下，传参会变得异常混乱，父函数中需要定义的变量也不好把握；
      • 2.在子函数中定义自己需要的变量，如果兄弟函数也需要使用该变量，重复定义该变量；这种方式逻辑上清晰明了，但是子函数无法实现函数复用，且相同变量一直在重复定义；