使用webpack-dev-server时不要配置6000端口

今天在搭建一个新项目，然后使用chrome始终无法访问，反复研究配置文件也没发现有什么不对，仔细看chrome的报错

网址为 http://localhost:6000/ 的网页可能暂时无法连接，或者它已永久性地移动到了新网址。
ERR_UNSAFE_PORT

一开始我以为是6000端口被占用了，

使用lsof -i:6000并没有发现有应用占用了6000端口，

仔细再看报错信息，其实重点是ERR_UNSAFE_PORT,

难道是浏览器禁用了6000端口？

于是修改了一下webpack-dev-server指定的端口为6001，可以正常访问了

2017-07-02

webpack热更新延迟问题

前提一

如果后端服务是通过session来控制用户登录态的，在客户端就是用过cookie来保存sessionid，而在前后端分离的情况下，cookie就需要保存在根域才可以保证客户端可以读到cookie

2017-06-24

display visibility opacity隐藏元素的区别

我们都知道隐藏元素通常使用的方法是display: none，不过很明显这不是唯一的一种方式，CSS2的visibility: hidden和CSS3的opacity: 0均可以隐藏元素，那么他们的区别是什么

css         | 是否占据空间 | 是否可以触发事件 | 是否受tab控制

—————– | —–| —- | ——–
display: none | No | No | No
visibility: hidden| Yes | No | No
opacity: 0 | Yes | Yes | Yes

2017-03-05

DOM中的事件流

今天在写事件监听器时，突然想起addEventListener方法是有一个非必填的参数，用来定义事件的执行阶段， 捕获还是冒泡，true是捕获还是false是捕获，记忆有些模糊了…

先看一段代码

HTML结构如下：

1
2
3
4
5
<div id="wrapper">
	<div id="content">
		<button id="btn"></button>
	</div>
</div>

JS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.addEventListener('click', function(e) {
    alert('document');
},true);
document.querySelector('#wrapper').addEventListener('click', function(e) {
    alert('wrapper');
},false);

document.querySelector('#content').addEventListener('click', function(e) {
    alert('content');
},true);

document.querySelector('#btn').addEventListener('click', function(e) {
    alert('btn');
},false);

提问： 那么，点击按钮后，alert的顺序是怎样的？

2017-02-24

jQuery的无冲突处理

noConflict这个东西在prototype，mootools这些老古董基本都被淘汰的情况下，能用上的几率基本不大了，本身也是非常简单的东西，说白了就是别名替换。之所以在2017年还谈论这个东西是因为看到书上对这个东西的解释，完全是简单问题复杂化，把我看晕了，所以我看看自己想以最简单的方法把这个东西说清楚

2017-01-19