不定时更新的日常踩坑指南

移动端video始终处于最顶层。无法在其上覆盖任何标签元素。腾讯系浏览器（X5内核）可通过给video标签设置x5-video-player-type="h5" x5-video-player-fullscreen="true"属性开启同层播放，达到在video上覆盖元素的目的，但是若是横屏播放则依然无法生效。

实现不定宽的等比宽高结构，可用伪元素进行撑起盒子的高度。

.constant-width-to-height-ratio {
background: #333;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
/* 用padding撑起元素的高度，改成不同百分比实现不同比例 */
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
/* 以下两属性使before伪类撑起高度生效 */
display: block;
clear: both;
}

ios的safari浏览器，打开跳转到Appstore的下载链接时，会弹窗提示是否打开APPstore，若点击取消，则该链接将失效，再次点击会弹窗显示“Safari无法识别地址”。解决办法：在点击事件后加个延时器，延时1s执行location.reload()方法重新加载页面，此方法看不出重新加载的效果（若页面很庞大，不知道是否会影响用户体验），用户体验max。（使用场景：分享页引流下载APP）
阿里云web播放器在x5内核中若想正常使用（前提条件：开发的h5页面使用rem作为单位），需给video容器设置important最高权重的定高（最好是使用类名来定高，以便兼容其他浏览器的全屏事件：通过监听播放器的requestFullScreen与cancelFullScreen切换对应的定高类名），然后在aliplayer的play事件的回调函数中把html根元素的font-size置零，在x5cancelFullScreen事件的回调函数中把html根元素的font-size改成原来的大小。

阿里云web播放器视频资源加载失败时的刷新按钮是reload整个页面的，若希望只重新加载视频，需拦截点击事件自己实现。实现思路:清空视频容器中的原视频组件元素，重新生成。

document.body.addEventListener("click",function(e) {
const event = e || window.event,
      target = event.targe || event.srcElement;
// prism-button-refresh 是刷新按钮的类名
if (target.className.includes("prism-button-refresh")) {
  event.stopPropagation();
  // 销毁原来的播放器组件（此为播放器暴露出来的方法）
  player.dispose();
  // 清空容器
  document.querySelector("#text_part_video").innerHTML = "";
  // 重新创建
  player = new Aliplayer(
    {
      id: "text_part_video",
      width: videoId,
      height: "360px",
      autoplay: false,
      //播放方式四：使用STS方式播放
      vid: videoId,
      accessKeyId: accessKeyId,
      securityToken: secretToken,
      accessKeySecret: accessKeySecret
    },
    function(player) {
      console.log(player);
      console.log("播放器创建好了。");
    }
  );
}
},
true
); // 注意，这里的true必须开启以使用捕获模式

直接修改document.title在IOS的qq内置浏览器中无法生效。因为该浏览器首次加载页面初始化title后，就再也不监听 document.title的change事件。而这里修改title之后，给页面加上一个内容为空的iframe，随后立即删除这个iframe，这时候会刷新title。
```
const iframe = document.createElement('iframe');
    iframe.src = '/favicon.ico';
    iframe.style.display = 'none';
    iframe.onload = function () {
        setTimeout(() => {
            iframe.onload = null;
            iframe.remove();
        }, 0)
```
Chrome支持正则表达式的超前匹配(?<=pattern),火狐等其他浏览器不支持。es2018已新增该规则，后续应该所有浏览器都会支持！

vue中子组件emit参数到父组件时，若父组件需要用到其他参数，可用$event代表子组件emit上来的参数。

// 子组件
this.$emit("blur", {
value: event.target.value,
deleteState: this.deleteState,
cursorPosition:this.$refs.textarea.selectionStart
});
// 父组件 是在一个循环中，需要用到index做某些判断
<HlTextarea @blur="saveText($event,index)"></HlTextarea>
// 方法
saveText(textValue, index) {
console.log(textValue);
//log   {
//      value:xxx,
//      deleteState: xxx,
//      cursorPosition: xxx
//  }
// }
console.log(index) // log 对应的index
}

一个四则运算库https://github.com/MikeMcl/decimal.js，其有抛离了三角函数的light版。运算获取结果的时候记得调用tostring方法将结果转成文字，或者用+转成数字
```
const priceVal = +new Decimal($input_publishPrice.val()).plus($input_profit.val());
```
gulp中gulp-sourcemaps插件与uglify插件无法很好的兼容（无法准确跟踪文件代码位置，会导致很不好调试），可以使用babel的babel-minify插件替换uglify插件对代码进行压缩混淆。

gulp中（其他构建工具不清楚会不会有这种问题）使用babel的minify进行代码压缩混淆的话，有以下几点坑需要注意：

检查一下package.json中的babel有关的核心的包都必须在7.0.0以上版本，不然会出现一堆乱七八糟的bug。（看issue看到吐才总结出的解决方法）

// package.json
devDependencies:{
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-core": "^7.0.0-bridge.0",
    "gulp-babel": "^8.0.0",
    "gulp-babel-minify": "^0.5.0"
}

minify中的builtIns需要设置成false！不然也会报错。希望以后官方能修复吧。

// gulpfile.js
const gulp = require("gulp");
const babel = require("gulp-babel");
gulp.task("minify", () =>{
gulp.src("./build/app.js")
    .pipe(
        babel({
        presets: ["@babel/preset-env",["minify",{builtIns:false}]]
        })
    )
    .pipe(gulp.dest("./dist"));
});

string无法像array那样通过更改length进行删除元素。原因：string的length是静态属性来的，只能get，不能set。而array的length是实例属性，既可以get又可以set。参考：
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/length
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length
- http://wiki.jikexueyuan.com/project/brief-talk-js/basic-type-of-packaging.html
```
let str = "abcd";
str.length = 2;
console.log(str); // abcd
console.log(str.length); // 4
```
在CSS中使用calc动态计算宽高时，如果使用了LESS等预处理器，则需要加个~，不然calc会被这些预处理器先解析，导致结果错误的bug。同时，需要注意的是*运算符（目前只支持+ - /）**两边都需要加一个空格，不然也是无法识别
```
//less的写法
height:calc(~ '100vh - 64px'); // 能正确计算出数值
height:calc(100vh - 64px); // 不能正确计算出数值，会被解析成-36vh
```
H5用a标签调用发送短信功能可以用<a href="sms:10086">发短信</a>"。当想要群发时，可以在号码后拼接一个;分号！注意，不能拼,逗号。拼逗号只会给第一个人发短信。
```
<a href="sms:10086">发短信</a>

<a href="sms:10086;10010;10012">群发</a>

<a href="sms:10086,10010,10012">群发</a>
```
ios10.x上浏览器对flex子项的属性不兼容（flex:1不识别），会产生其内部绝对定位或固定定位的元素（因为已脱离文档流无法撑起元素）在页面上渲染了却不展示的bug。解决办法：给该flex子项元素增加定宽\高（可用calc）以达到flex:1的效果。
使用moment.js进行周数显示且要携带年份时。format中年份应该是使用GG而不是YY。不然跨年周的年份显示会有bug
```
moment('2019-12-30','YYYY-MM-DD').format('YYYY-wo') // 2019-1st
moment('2019-12-30','YYYY-MM-DD').format('GGGG-wo') // 2020-1st
```

liubinis86 / blog

不定时更新的日常踩坑指南 #3