webpack异步路由的bug

bug描述:

假设我们为了缓存持久化,而给所有 js 文件名都加上了 chunkhash,当某个路由的js文件内容发生了改变,那么这个路由的 js 文件名的 chunkhash 会因此而变化,但是主入口文件的 js 文件的 chunkhash 并没有因此而改变,最终导致用户在浏览器中拿到的是旧的入口 js ,而这个旧的入口 js 中引用的是旧的路由 js 名。

Read More...

debounce和throttle

debounce

如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。
也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 idle,action 才会执行
* @param idle {number} 空闲时间,单位毫秒
* @param action {function} 请求关联函数,实际应用需要调用的函数
* @return {function} 返回客户调用函数
*/
var debounce = function(idle, action) {
var last;
return function() {
var ctx = this, args = arguments;
clearTimeout(last);
last = setTimeout(function(){
action.apply(ctx, args);
}, idle);
}
};

throttle

如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。
也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* 频率控制 返回函数连续调用时,action 执行频率限定为 次 / delay
* @param delay {number} 延迟时间,单位毫秒
* @param action {function} 请求关联函数,实际应用需要调用的函数
* @return {function} 返回客户调用函数
*/
var throttle = function(delay, action) {
var last = 0;
return function() {
var curr =+ new Date();
if (curr - last > delay) {
action.apply(this, arguments);
last = curr;
}
}
};

【翻译】为什么 web components 如此重要

这几年,关于 web components 的争论一直不绝于耳。有人说 web components 可以改变我们构建网页的方式,这是为什么呢,是什么让 web components 如此重要?

web component 是一种创建封装的、可复用的网页UI (user interface) 组件的标准化方式。

不是一个新概念

网页组件其实很早之前就存在了,其目的是构建可复用且可移植的代码,这并没有什么新鲜的。







Read More...