好久没写PHP，最近因为项目指定ThinkPHP于是又重温PHP，由于长期写JavaScript以至于我忘了PHP的数组竟然还可以自定义key...
ThinkPHP默认不是使用PATHINFO模式，对于目前主流框架，貌似PATHINFO已经成为趋势，更让我意外的是ThinkPHP还能支持路由，有点类似于Python网络框架的路由了。之前在网上看不少人在Nginx开启PATHINFO模式主要修改localhost \.php里的内容，但最近发现了一条更简便的方法
location / {
if (!-e $request_filename) {
rewrite ^(.*)$ /index.php?s=$1 last;
break;
}
}
...
CSS有一个属性border-collapse，这个样式可以让table里相邻td的border合并为一条，这有什么好处呢？最显著的效果，在页面上有一个table，每个td都有border:1px solid #999，看看效果
使用border-collapse前的效果
使用后的效果border-collapse: collapse的效果
...
一直都听说NodeJS有一个非常强大的特性就是IO异步，今天具体总结以下这到底是个什么东西，以做备忘。
要说到到IO异步首先就要提到两个关键字，IO阻塞和IO非阻塞。
打个比方，你去银行办理业务，阻塞模式下为了同时处理多个业务，只能另开多个窗口接待多人。非阻塞模式下，在前一个人等待某件事情的间隙，比如客户的身份证被拿去复印了，那么趁这个间隙窗口工作人员可以继续处理后一个人的业务，当后一个人也被某件需要等待的事情耽搁需要等待时就继续处理再后一个人的业务，当在工作人员每处理完一件事情时如果前面复印身份证的被告知身份证复印好了，那么就继续处理第一个客户的事情。
...
这是偶然在一次调试中JavaScript发现的问题，把某个对象下的function传入某个函数，然后函数内再调用function，然而这样会导致被传入的function this指向有问题
var F = function (name) {
this.name = name;
};
F.prototype.getName = function () {
return this.name;
};
var f = new F('琼台博客');
var dosome = function (fun) {
if (typeof fun === 'function') {
return fun();
}
};
f.getName(); // 琼台博客
dosome(f.getName); // undefined
dosome.apply(f, [f.getName]); // undefined
...
最近朋友发把一道JavaScript的面试题发我
var name = "张三";
(function () {
name = "李四";
var name = "王五";
console.log(name);
})();
console.log(name);
虽然他已经知道运行结果，但他还是有点不太明白为什么！按照正常逻辑思维读这道题
name=张三name=李四 由于不带var关键字所以是修改全局下namename=王五...
之前在firebug下打断点刷新后一直都挺好用，后来又一次不知道怎么了就一直都刷新后断点记录全消失，这点让我很郁闷。于是每次为了断点都需要把页面默认执行的函数停止，然后等进入页面后再找到要断点的地方，再手动执行断点代码处实在累人。并且换了重装firebug、换台电脑都一样，甚至一度怀疑哪里没设置好导致的，为防止以后调试麻烦决定解决下这个问题。
一开始的思路是在网络上搜索“Firebug断点 刷新消失”居然没有找到任何疑似记录，以为关键字不准确，再缩小为：“Firebug断点”，文章一大堆，并且文章上面都明确指明刷新后断点记录不会消失。。。没辙了！
...
动手写了一个纯CSS的分类菜单，貌似还挺好用，可惜就没有添加动态效果了
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>分类菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.5 "宋体";
}
a {
text-decoration: none;
}
a:hover {
color: red;
}
ul {
position: relative;
margin: 50px 0 0 50px;
width: 300px;
border: 2px solid #aa9900;
}
li {
height: 30px;
line-height: 30px;
width: 100%;
text-indent: 1em;
list-style: none;
border-top: 1px solid #CCC;
}
li:hover,
li:hover + li,
li:first-child {
border-top: none;
height: 31px;
line-height: 31px;
}
div.box {
width: 300px;
height: calc(100% + 2px);
display: none;
left: 300px;
top: -2px;
border: 1px solid #999;
position: absolute;
z-index: 1;
background: #EEE;
}
div.item {
position: relative;
width: 100%;
height: 100%;
}
li:hover div.box {
display: block;
}
li div.item span.link {
display: block;
width: calc(100% - 1px);
height: calc(100% - 2px);
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-color: #FFF;
border-width: 1px 0 1px 1px;
z-index: 2;
}
li:hover div.item span.link {
border-color: #999;
background: #EEE;
width: 100%;
}
span.icon {
position: absolute;
right: 10px;
top: 0;
color: #999;
font-weight: bold;
font-family: serif;
}
li:hover a {
color: #270;
}
</style>
</head>
<body>
<ul>
<li>
<div class="item">
<span class="link">
<a href="#">分类1</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类1 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类2</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类2 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类3</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类3 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类4</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类4 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类5</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类5 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类6</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类6 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类7</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类7 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类8</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类8 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类9</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类9 详细信息</div>
</li>
</ul>
</body>
</html>
...
以前都使用display: block很少使用display: inline-block，近期写样式有时候为了方便我也使用inline-block，之后发现有问题，每个元素之间多了一个空白
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
span {
margin: 0;
padding: 0;
display: inline-block;
width: 50px;
height: 20px;
background: red;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
</html>
...
String s = "8532";
short t = Short.parseShort(s);
int i = Integer.parseInt(s);
long l = Long.parseLong(s);
Float f = Float.parseFloat(s);
Double d = Double.parseDouble(s);
如果字符串转换不成功会抛出一个运行时错误，需要注意一下
// 其中 something 为任意一种数字类型
String s = String.valueOf(something);
// 如果确保 something 不会为null
String s = something.toString();
// 还有一种
String s = something + "";
...
今天在一个新的环境上安装Nginx，结果访问的都是403
通常显示403我立马都会想到路径配置不对，但我仔细看了一下，目录路径没问题
nginx.conf
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /root/html;
index index.html index.htm;
}
}
...