GOVO’s Blog

Phpnow是个傻瓜式的服务器软件集成套件，Win32 下绿色免费的 Apache + PHP + MySQL 环境套件包，网址是http://phpnow.org/，其网站上提供了下载链接，有需要的朋友可以去看一看。这个套件让你方便地在Win32平台下建立服务器环境，好处是便利，坏处不说也罢，下面讲讲我在使用时遇到的问题和解决方法。（Phpnow的安装方法请参见http://phpnow.org/guide.html）

注：我目前在使用的版本是PHPnow-1.4.5-20

1、phpnow添加虚拟主机。

上图出自phpnow.org，简单说明了虚拟主机的开设方法，关键是对于本机，得懂得修改host文件：

如果没有域名或者不会用，可以通过编辑 C:\WINDOWS\system32\drivers\etc\hosts 来使用“虚拟域名”。
本例中的 bbs.test.com 就是在 “127.0.0.1 localhost” 的下一行添加一行 “127.0.0.1 bbs.test.com” 实现的。

对于本机，我推荐这样设置：

运行PnCp.cmd，把主机名和主机别名都设置为 localhost2，目录就是你想设置到的硬盘上任何一个目录，如D:\localhost2，最后一步中把“限制虚拟主机权限”设为n，然后在host文件中添加进一行“127.0.0.1   localhost2”。这时，打开浏览器，输入http://localhost2/即可得到正确的页面。查看D:\localhost2文件夹，会发现多了一个index.php，这是phpnow添加进去的，可删除。（说得很基础吧- -）如果在安装Phpnow时用了别的端口，如我用了8080，就可以用网址http://localhost2:8080/进行访问。

2.为Apache配置SSI

在Phpnow中找到Apache文件夹，进入Apache\conf，找到httpd.conf文件，用Dreamweaver打开，不推荐用记事本打开，因为会乱码而出错，最好先备份一个。

打开后，找到这一行：#AddType text/html .shtml，会看到紧接着的是#AddOutputFilter INCLUDES .shtml，把前面的#号去掉，这样可以让Apache通过SSI方式加入.shtml后缀的文件了，为了让html和htm的文件也行，添加这几句：

AddType text/html .html
AddOutputFilter INCLUDES .html
AddType text/html .htm
AddOutputFilter INCLUDES .htm

保存文件。这样OK了吗？未，这样还不够的，再进入文件夹extra，即Apache\conf\extra，找到httpd-vhosts.conf，同样用Dreamweaver打开，你会看到文件中有这几行：
<Directory “D:/localhost2″>
Allow from all
</Directory>

修改成这样：

<Directory “D:/localhost2″>
Options Includes Indexes FollowSymLinks
Allow from all
</Directory>

这里的Options Includes Indexes FollowSymLinks 是一个对当前目录的设置选项，Options后面跟的分别是

Includes——允许服务器引入，Indexes——允许目录索引(针对无index.html时列出文件)，FollowSymLinks——不会解释介个了^_^

一切就序，重启Apache吧：还是运行PnCp.cmd，看对应的操作输入23重启Apache，命令窗口闪一下就没了，一切安好，这样，可以SSI的服务环境就配置成功了。

3.一些小细节

上面看到，我把Indexes也添加进去了，因为在本地机中，如果没有索引文件的情况下，可查看目录文件还是有利于工作的:) 但要完善这个小细节，还得再做些修改。返回Apache\conf，打开httpd.conf(不要用记事本打开哦:))，找到这行：

#LoadModule autoindex_module modules/mod_autoindex.so

把前面的#号去掉，这样就可以列目录了。再找到这行：

<IfModule mod_autoindex.c>

而套中其中的，可以找到这一行：

IndexOptions FancyIndexing VersionSort

这一行才是我们要修改的东西，把这行改为：

IndexOptions FancyIndexing VersionSort NameWidth=*

这就是为了让长文件名也可以显示出来。保存，再重启Apache，完美了

本文写得很口水，主要目的是笔记，其次也是分享（不是分享为先的么- -）

欢迎纠错，举报，检举，谢谢

Popularity: 10% [?]

我找到一个非常不错的水平滑动菜单的javascript特效：Horizontal JavaScript Accordion 1kb。我曾经把它应用到好些制作的页面上，但我的需求越来越多，所以情况也比Michael的样例复杂多了，而且，我需要更多的可选选项，就像这样的：

l found Horizontal JavaScript Accordion 1kb and it is very great! I have ever planted it in some pages. But my App is more complicated then the Michael’s demo. And it need to be more optional.
link this:

通过改变物件的宽度去实现像风琴一样的水平滑动是最常用的方法。不过我的是通过改变物件的left位置，并且提供了更多的可选选项，但脚本文件会大一点，达到了8.46kb。还有，我用面向对象的方式编写的，所以可以不用iframe，就可以实现一个页面中有多个风琴滑动效果菜单了。这就有一个简单的样例：

Making horizontal sliding with changing the width of each panel is the most normal way. But my one is by changing the left style of each panel, and it is more optional, but the file is a bit larger: 8.46kb. And it is programmed in OO way, we can have more instances in a page without iframe.Here is a simple demo:

The codes are:

<ul id="hslidemenu" >
<li><img src="images/1.gif" alt="" /></li>
<li><img src="images/2.gif" alt="" /></li>
<li><img src="images/3.gif" alt="" /></li>
<li><img src="images/4.gif" alt="" /></li>
</ul>

And the javascript:

HSlideMenu("hslidemenu").build();

下载：
Download:
hslidemenu.js
hslidemenu-plug.js
点击这里看完整的简介！
Click here to see the full introduce page!

Popularity: 31% [?]

rame onload event is not a good idea to listening child page loading state on Internet Explorer. Here are some solutions to make things better.

None-Cross-Domain

If the parent page and the child page is in the same domain, they can share the objects between the windows. For example: “window.parent.document.getElementById(’div_01′)” will be fine. So we can easily get things done. Just like this:

<!--This is an inner page in the iframe-->
<script type="text/javascript">
window.onload=function{
  window.parent.iframeCall();
}
</script>

Cross-Domain

According to REFERENCES Q239638 and Q188763, there are two ways:

1.Timer & document.readyState

var fm1=window.frames["iframe1"];
var fmState=function(){
  var state=null;
  if(document.readyState){
    try{
      state=fm1.document.readyState;
    }catch(e){state=null;}
    if(state=="complete" || !state){//loading,interactive,complete
      //onComplete();
      return;
    }
    window.setTimeout(fmState,10);
  }
};
window.setTimeout(fmState,400);//call this statement when iframe page start to change

A few microseconds is need, because DOM actions is asynchronous, we need to wait until the action has started.

2.onreadystatechange & counting state

var stateID={};
var fmStChange=function(){
  if(ifFirstLoad) return;
  stateID[this.id]=stateID[this.id] ? stateID[this.id]+1:1;
  switch (stateID[this.id]){
    case 1:
      //state loading
      //onComplete(STEP1);
      break;
    case 2:
      //state interactive
      //onComplete(STEP2);
      break;
    case 3:
      //state complete
      //onComplete(LASTSTEP);
      break;
  }
  if(stateID[this.id]>=3) stateID[this.id]=null;
};
$("iframe1").onreadystatechange=fmStChange;
//if you want to ignore the parent page load
//add the following two line
var ifFirstLoad=true;
$("iframe1").onload=function(){ifFirstLoad=false;}

The process will return three types of state: loading,interactive and complete. But don’t disturb the loading process untill one is finished, or else the stateID will not tell the correct state .

document.domain property

An article said document.domain property will be use to fix “Access Denied Error”:

The document.domain property can be set to ease the restriction somewhat.For example, if a document at www.example.com wants to communicate with a document at forums.example.com, the document.domain property could be set to example.com in both documents to allow JavaScript interaction between them.

I never try out, but I don’t think this will work.

None-IE

Iframe onload event is good for Firefox, Opera and Safari.

Popularity: 62% [?]

CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。

语法：

:nth-child(an+b)

为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari3+。

描述：

伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。

第一种：简单数字序号写法

:nth-child(number)

直接匹配第number个元素。参数number必须为大于0的整数。 阅读全文(Read the rest of this entry) »

Popularity: 60% [?]

关于CSS选择器优先级，目前国内已有很多人进行过解释，但感觉不如人意，特别对于初学者，更是难以理解。这里我把W3C上所描述的规范以我的理解再解释一下，希望能给大家提供到帮助。

在Calculating a selector’s specificity上的原文摘选如下：
(相信很多人更喜欢看原文)

A selector’s specificity is calculated as follows:

• count 1 if the declaration is from is a ’style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

  selector( a , b , c , d )
   compare: ↑ , ↑ , ↑ , ↑
  selector( a , b , c , d )

 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0 , 0 , 2 , 1  */
       /*compare                                       ↑ , ↑ , √      */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0 , 0 , 1 , 1  */
       /*compare                                       ↑ , ↑ , ↑ , √  */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0 , 0 , 1 , 3  */
       /*compare                                       ↑ , ↑ , √      */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0 , 1 , 0 , 0  */
       /*compare                                       ↑ , √          */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1 , 0 , 0 , 0  */

注意，这四组数值分别对应于不同类型的选择器，互不影响，根据读法法则进行比较。

(这里没有讨论到!important，就近原则和继承，也没有实例代码，欢迎大家共同讨论！）

参考：

[1] CSS优先级问题

[2]Calculating a selector’s specificity

Popularity: 49% [?]

Javascript的每个Function对象中有一个apply方法：

function.apply([thisObj[,argArray]])

此外，还有另一个很极之相似方法：

function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])

他们的共同之处是，都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。”——摘自JScript5.5 .chm

她们的不同之处是，apply最多只能有两个参数——新this对象和一个数组，如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。而call则是直接的参数列表，对比如下： 阅读全文(Read the rest of this entry) »

Popularity: 64% [?]

在Javascript前端编程中，使用过Prototype.js的人，会知道，只要使用一个简单的语句：

$("msg").hide();

就可以把id为msg的元素隐藏；同样的，$("msg").show()则可以把隐藏的元素显示出来。像这种对元素的扩展，是怎样做出来的呢？

在说明这个问题之前，先问一个问题：为什么要这样做？

为什么要对DOM element进行扩展？

如果你在Javascript编辑中，不使用任何库，即祼编去实现一些说大不大说小不小应用时，相信你一定会事先$一下：

var $=function (s){
return typeof(s)=="string" ? document.getElementById(s) : s;
};

或者更简单的

function $(){return document.getElementById(s);}

这样一来可以加快你写代码的速度，二来可以为页面节省不少字节。

但如果我们还需要很多对DOM的操作，而且这些操作具有一定的复杂性重用，需要分离出来，如对属性className的操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

rmCls=function(el,_c){// the full name is removeClassName
    el=$(el);if(!el) return null;
    var c=el.className.split(" "),str="";
    for(var i in c){if(c[i]!=_c) str+=" "+c[i];}
    el.className=str;
    return el;
},
adCls=function(el,c){// the full name is addClassName
    el=$(el);if(!el) return null;
    this.rmCls(el,c).className+=" "+c;
    return el;
},
hasCls=function(el,_c){// the full name is hasClassName
    var el=$(el),c=(el.className || "").split(" "), l=c.length;
    while(l--){if(c[l]==_c) return true;};
    return false;
};

当然，我们也可以直接使用$(”msg”).className=”on”来操作，但这对存在多个类名的元素来说就不那么便利了。但现在也不太便利，因为我们要把元素也写到参数中：
adCls($("msg"),"on");
如果可以这样似乎会更清爽些：
$("msg").adCls("on");
阅读全文(Read the rest of this entry) »

Popularity: 64% [?]

A CION HAS TWO SIDES.

“一枚硬币有两个面。”

这句话通常用于说明事物有两面性。Javascript的闭包也一样。

所谓的闭包（Closure）：

所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

闭包是 ECMAScript （JavaScript）最强大的特性之一，但用好闭包的前提是必须理解闭包。闭包的创建相对容易，人们甚至会在不经意间创建闭包，但这些无意创建的闭包却存在潜在的危害，尤其是在比较常见的浏览器环境下。如果想要扬长避短地使用闭包这一特性，则必须了解它们的工作机制。而闭包工作机制的实现很大程度上有赖于标识符（或者说对象属性）解析过程中作用域的角色。 (From 《理解Javascript闭包》)

问题所在： 阅读全文(Read the rest of this entry) »

Popularity: 69% [?]

做了几天的一个专题，分析了CSS清除浮动的要点和方法，对成因和结果进行归纳总结，以及如何避免在IE中偶尔遇到的一些不可思议的问题，其实是一个自我学习的过程，请大家给意见，谢谢！

点击链接进入专题：

CSS清除浮动专题

Popularity: 51% [?]

UPDATE：20080530最新修改
为了研究Currying in Javascript，翻阅了很多外文网站，为的是找一个比较好的Currying方案，找到的比较详细的有如下（文章内部链接可能包含更多的相关文章）：

1. Currying JavaScript Functions
2. JavaScript Currying Redux
3. JavaScript currying
4. functional.js 介绍及源码分析

发现大多人都用了Array.prototype.slice.call(argments,0)，一直不明白这句是干什么的。而昨天温习了slice()方法，再参考Function.call(thisArg[, arg1[, arg2[, ...]]])，还是不得而知（我脑筋转得慢:|）。上网查，第一时间查老外的Google.com in English也没解释，真到查找“Array.prototype.slice 用法”时，才得到数篇。虽然我很鄙视搞收集的人，搞得互联网文章像是天下一大抄似的，但现在却恨少，只得三篇（一模一样的三篇，责任编辑为admin或者超级管理员，作者是佚名。）

下面就我的理解，对Array.prototype.slice.call进行解说，菜鸟留下，大虾吐口水：
Update: 下面写的可能有点难懂，怕刚接触Javascript的人可能会看不懂，请大家看完后留个言，谢谢！

Array.prototype.slice.call(thisArg[, arg1[, arg2[, ...]]])

成员介绍：

Array [object]

Array对象(即数组对象)

prototype [property]

Javascript的原型，此prototype非Prototype.js，可以暂且理解为Java中的静态属性/方法。总之这个不好说，详细请看这里。

slice [Function]

数组切分方法，很有用的一个方法，具体请看这里，或那里。

call [Function]

神奇的方法，该方法是所有Function对象里的方法，所以slice就有这样一个方法。用于把Function对象里的this替换为目标对象。看这里。

串起来就是： 阅读全文(Read the rest of this entry) »

Popularity: 95% [?]