唐霜的博客

一起使用babel-loader和webpack UglifyJS时，babel会优先处理一遍代码，编译后的代码才进入webpack进行打包和优化操作。在使用扩展运算符...时，不同的情况会进行不同的处理。当在函数参数中使用时，会编译为arguments，而在调用参数时会编译为apply，如下：

function debug(...args) {
  console.log(...args)
}

会被编译为：

function debug() {
  var e
  (e = console).log.apply(null, arguments)
}

这是很奇怪的一种解释方法，为什么要用一个多余的e变量来隔离console和log呢？如果这样编译之后，其结果自然不能被UglifyJS识别，drop_console等选项也就不生效了。解决的办法，就是在调用函数时，直接采用apply。

function debug(...args) {
  console.log.apply(null, args)
}

因为没有使用扩展运算符，所以在编译的时候不会产生上面那种奇怪的分割代码，也就正常被UglifyJS优化了。

Promise实例有then方法和catch方法，一般用then来处理成功返回数据时的情况，为了把处理后的数据往下一个then传递，通过return一个新数据的方法，让下一个then的参数等于这个新数据。catch方法更有差别，当你调用一次catch之后，后面如果再继续调用catch方法，它们都会被忽略，因为从概念上也可以认为，catch之后，错误已经被捕获了，为了让后面的catch还能生效，和then的return类似，也可以通过一种方法往下传递，但是不是用return，而是用throw:

new Promise((resolve, reject) => reject('a')).catch(err => {
  console.log(err)
  throw err
})
.catch(err => console.log(err))

这样就可以使第二个catch也捕获到错误信息，当然，在第一个catch中，可以通过throw不同的err来传递不同的错误信息给下一个catch。

svg里面有时候会用pattern去写一个背景图片，然后在其他元素里面去使用fill: url(#patternId)来调用它，这样就可以实现在一个svg里面定义自己的背景图片，而且还可以使用svg来画这种背景图。

但是有一个问题是，在IE里面，fill调用不支持style属性中使用，比如下面的无效代码：

<rect style="fill: url(#patternId)">

在Chrome下是正常的，但是在IE中使用的时候，没法正常显示，而你需要将fill属性改为attr：

<rect fill="url(#patternId)">

这样才能正常显示你想要的背景图效果。

浏览器线程包括：GUI渲染线程，JavaScript引擎线程，浏览器事件触发线程，定时触发器线程，异步http请求线程。其中，JS引擎线程就是执行JS的主线程，GUI渲染线程跟JS引擎线程是互斥的，不能同时进行，所以当JS陷入死循环的时候，浏览器界面没法进行渲染，而如果渲染消耗了大量资源，JS也没法马上执行。

setTimeout(fun, 0)是一个有趣的现象。这里的知识点是，定时触发器线程和JS主线程是分开的，当执行setTimeout的时候，就是告诉JS主线程，需要被分发到定时触发器线程中去计时等待。线程与线程之间通过消息来通信，当定时触发器线程的某个任务执行完之后，它会把消息发送回主线程，这个消息其实就是回调函数，它把回调函数发回给主线程，但是发回的消息在主线程执行顺序的最末端。所以setTimeout(fun, 0)的效果虽然在时间上看上去是立即执行，但是相对于js程序而已，其实是有一个延时的，起码延时到当前主线程所有任务的最后面。

这好像没有什么用，但是起码在阅读代码的时候不会懵逼。

一个组件的sass里面，不应该直接引用某个第三方vendor来进行继承，因为当sass compile的时候，会把第三方继承过来的code全部编译过来，导致你的组件编译后的css里面有大量第三方vendor的样式。正确的做法是当你要继承的时候，仅引入第三方的module文件，比如：

@import "~bootstrap-sass/.../_colors.scss";

因为一般的sass项目都会将单独的变量、函数等放在单独的文件中，而这些文件里因为没有实际的样式规则代码，所以在编译之后，它们实际上不会产生最终的css样式。

而如果你在写一个sass项目的时候，也应该遵循这种原则，如果你的组件的sass打算给其他组件去继承，也应该提供一个这样的modules的出口，这样别人只需要继承你的这个modules的出口文件，而不是你的样式出口文件。