2018-03-31

2018-03-31

[18-03-31]ionic1.x版本,使用其他promise库时需要对finally进行polyfill
[18-03-27]css伪类:last-child的误解
[18-03-26]github pages只支持特定的Jekyll插件
[18-03-24]使用ES6函数默认参数的语法,设置函数参数不能为空.

[18-03-31]ionic1.x版本,使用其他promise库时需要对finally进行polyfill

由于ionic1.x版本中,有相当一部分的内部逻辑使用了promise.finally,所以如果在应用中使用了其他promise的实现时,要注意对finally进行polyfill

import _Promise from 'es6-promise';
window.Promise = _Promise;
// hack ionic需要的finally函数
window.Promise.prototype['finally'] = function finallyPolyfill(callback) {
  var constructor = this.constructor;
  return this.then(function(value) {
    return constructor.resolve(callback()).then(function() {
      return value;
    });
  }, function(reason) {
    return constructor.resolve(callback()).then(function() {
      throw reason;
    });
  });
};
[18-03-27]css伪类:last-child的误解

个人对css伪类:last-child理解有误,之前一直是以为选定所选择的元素中的最后一个元素,举例来说

.child:last-child {
  /* 之前的误解: 这里的匹配规则是,选中最后所有.child元素中的最后一个 */
  /* 实际意义: 这里的匹配规则是,选中父元素的最后一个子元素,并且这个元素是.child */
}

下面是html结构

<!-- 最后一个.child元素被匹配 -->
<div class="parent">
  <div class="child">不会被匹配</div>
  <div class="child">不会被匹配</div>
  <div class="child">会被匹配</div>
</div>
<!-- 没有匹配的元素,因为最后一个元素不会.child -->
<div class="parent">
  <div class="child">不会被匹配</div>
  <div class="child">不会被匹配</div>
  <div class="child">不会被匹配</div>
  <div class="not-child">不会被匹配</div>
</div>

如果需要实现选中父元素下特定元素中的最后一个元素,可以使用:last-of-type伪类

<style>
.child:last-of-type{
  color: red;
}
</style>
<div class="parent">
  <div class="child">不会被匹配</div>
  <div class="child">不会被匹配</div>
  <div class="child">不会被匹配</div>
  <!-- 需要注意这里最后一个元素如果同为div将不会匹配成功 -->
  <!-- 因为last-of-type匹配的是最后一个div元素,而不是最后一个.child元素 -->
  <!-- 这里的表现形式还有不清楚的地方,日后再来继续研究 -->
  <p class="not-child">不会被匹配</p>
</div>
[18-03-26]github pages只支持特定的Jekyll插件

在使用github pages和Jekyll搭建博客时,出现在本地serve页面正常的情况,但是到github pages上却不能正常显示,需要检查一下github pages是否支持你所使用的Jekyll插件.

github pages-Dependency versions

[18-03-24]使用ES6函数默认参数的语法,设置函数参数不能为空.

通过下面的写法不仅可以实现没有传参时报错,甚至可以做类型校验.

const paramRequired = (name) => {
  throw new Error(`Param ${name} is required`);
}

const fnWithRequiredParams = (a=paramRequired('a'), b=paramRequired('b')) => {
  console.log(a, b);
}