肉包子的摇滚生活

深入解读Supesite CMS的数据库缓存与文件缓存机制(一)

fangyuqiang — Mon, 14 Mar 2011 11:15:05 +0800

各种系统开发中都会大量的使用缓存，用于提高程序执行速度，避免过于频繁的查询或者是过于复杂的查询的性能消耗。例如网站名称这样的设置项,每个页面都会调用到,这属于频繁查询。另外一种比如是一个连接了3,4个表的sql查询，每次查询都会造成很大的数据库消耗，这属于复杂查询。

supesite中的缓存类型

supesite中有2种缓存，一种是文件缓存，一种是数据库缓存。

文件缓存的做法就是执行一次查询，然后将返回的结果生成一个.php的缓存文件,可以直接在程序中include进来，所有需要的地方都是直接include，这样就减少了数据库的查询。（当然，这里眼尖的同学会说这个增加了磁盘IO，等会下说个权衡问题）

数据库缓存的做法是将查询结果，再序列化成字符串，保存到数据库，碰到相同条件的查询语句时候，直接将查询结果又从数据库中读取出来。这里有些同学不理解，既然是减少数据库查询的负担，为什么又把结果保存到数据库再读出来？这是我们刚刚提到的复杂查询的缓存。我们将复杂的，性能消耗很高的查询结果保存到数据库，下次碰到一样的查询语句的时候，直接取出来，消耗仅仅是一个最简单的select语句而已，可以完全避免复杂sql的性能消耗。

以上是2种缓存文件实现提高性能的方式。具体缓存机制如何实现呢？

缓存机制的实现

无论文件缓存还是数据库缓存，实现都包括3个方面：

生成，更新，调用。

文件缓存的生成

文件缓存较为简单。生成文件缓存，只要将数据库结果整理成字符串，然后应用php自带的fwrite()函数将字符串写入文件即可。当然也要注意生成的文件语法要正确，才可以保证include的时候不会出错。

supesite中生成缓存的代码：

$cachefile = S_ROOT.'./data/robot/robot_'.$id. '.cache.php';
$text = '$cacheinfo = '.arrayeval($tarr). ';';
writefile($cachefile, $text, 'php');

其中$tarr是结果集数据组,指定文件名,生成文件就行.arrayeval是supesite中转换数据为缓存内容的函数,具体如下:

function arrayeval($array, $level = 0) {
       if(!is_array($array)) {
             return "'".$array. "'";
      }
       if(is_array($array) && function_exists('var_export')) {
             return var_export($array, true);
      }

      $space = '';
       for($i = 0; $i <= $level; $i++) {
            $space .= "\t";
      }
      $evaluate = "Array\n$space(\n" ;
      $comma = $space;
       if(is_array($array)) {
             foreach($array as $key => $val) {
                  $key = is_string($key) ? '\''.addcslashes($key, '\'\\').'\'' : $key;
                  $val = !is_array($val) && (!preg_match("/^\-?[1-9]\d*$/" , $val) || strlen($val) > 12) ? '\''.addcslashes($val, '\'\\' ).'\'' : $val;
                   if(is_array($val)) {
                        $evaluate .= "$comma$key => " .arrayeval($val, $level + 1);
                  } else {
                        $evaluate .= "$comma$key => $val";
                  }
                  $comma = ",\n$space" ;
            }
      }
      $evaluate .= "\n$space)" ;
       return $evaluate;
}

writefile是supesite封装的一个写文件的函数。主要是保证生成的php文件不会存在语法出错的状况，并且增加一定的可读性。

function writefile($filename, $writetext, $filemod='text', $openmod= 'w', $eixt=1) {
       if(!@$fp = fopen($filename, $openmod)) {
             if($eixt) {
                   exit('File :' .srealpath($filename).'Have no access to write!');
            } else {
                   return false;
            }
      } else {
            $text = '';
             if($filemod == 'php' ) {
                   $text = "";
            }
            flock($fp, 2);
            fwrite($fp, $text);
            fclose($fp);
             return true;
      }
}

文件缓存的更新

文件缓存的更新，就涉及到了整个业务机制了。有两种更新需求，一种是即时更新，就是一旦结果集发生变化，缓存文件也要更新，适应于对实时性要求比较高的配置项。另一种是定时更新，每隔一段时间就检查是否到了更新的时间点，到了时间点之后，无论结果是否有变化，都执行更新。不过两种方式没有绝对的性能优劣。假设结果集更新非常频繁，那么显然定时更新的方式性能较优，但是如果结果集很久才变化一次，那么即时更新的方式更划算。

即时更新的实现难度不大，只要在更新结果集的时候同时更新缓存即可。比如系统修改了设置项，那么在执行完数据库修改语句后，再加上缓存文件的更新代码即可。

定时更新则会稍微有一点点麻烦，你需要一个配置项来记住当前文件更新的时间间隔（例如1小时），然后每次触发执行的时候，都判断下当前时间与文件时间的差异是否达到了更新的间隔。

文件缓存的调用

文件缓存的调用非常简单，php中只要include指定的文件就可以了。当然，要稍微注意下include，require，include_once，require_once的差异。一般可使用include_once。

数据库缓存的实现

数据库缓存的整体实现机制相比文件缓存来说复杂得多，需要一整套完整的从生成更新到调用的机制。

supesite中采用的机制叫block，中文应该叫簇。这是一个相当好的设计，它极大的简化了数据调用的方式，并且与数据库缓存机制紧密结合，目前这种机制在各种开源CMS中都很流行。

首先来看看整套缓存表的设计，整个建表语句如下：

show create table supe_cache;

查看数据缓存表：

CREATE TABLE `supe_cache` (
`cachekey` varchar(16) NOT NULL DEFAULT '',
`uid` mediumint(8) unsigned NOT NULL DEFAULT '0',
`cachename` varchar(20) NOT NULL DEFAULT '',
`value` mediumtext NOT NULL,
`updatetime` int(10) unsigned NOT NULL DEFAULT '0',
PRIMARY KEY (`cachekey`)
) ENGINE=MyISAM DEFAULT CHARSET=gbk

cachekey缓存主键，用于识别缓存，uid基本是无用，可以忽略。cachename是supesite中区分缓存的内容的类型的，例如分类调用缓存，新闻调用缓存，评论调用缓存等，通过cachename字段，可以允许后台单独对某些分类的缓存进行更新。value则是整个调用结果集，它是php中的结果数组的序列化字符串。updatetime记录的是下次缓存要更新的时间。

通过这个设计，可以得出整个数据库缓存的实现思路：生成缓存的时候，生成一个唯一的cachekey作为主键，将结果集序列化为数组保存在数据库中，并记录下次更新的时间。调用缓存的时候凭借cachekey主键获取，并判断updatetime时间是否已经到达更新的时间点，如果需要更新，则更新缓存表。否则直接读取缓存的结果集。

这里面围绕着一个核心的技术问题：

如何将sql调用跟唯一的cachekey对应起来？也就是说我执行一条sql语句来查询数据，这个查询怎么生成一个唯一的cachekey，然后我下次再次执行同样的sql就可以跟通过cachekey找到缓存结果？

这里就是supesite的核心函数block的功劳了。

原谅我继续待续..

最近2个月的技术文写作计划

fangyuqiang — Wed, 09 Mar 2011 15:23:39 +0800

太懒了..人一旦养成惰性了就容易这样…博客荒废了这么久,真对不起几百个订阅我博客的观众哈..决定从现在起,每周强制自己至少写一篇技术文。

本次计划完整的书写关于CMS架构方面的东西，自己在长期的CMS开发中总结的一些技术经验与大家分享。欢迎拍砖。

深入解读Supesite CMS的数据库缓存与文件缓存机制
深入解读Supesite CMS的模板与数据调用机制
深入解读Supesite CMS的接口调用机制
深入解读Supesite CMS的静态页生成机制
深入解读Supesite CMS的计划任务执行机制
深入解读Supesite CMS的模型机制
深入解读Supesite CMS的内容采集机制
深入解读Supesite CMS的debug调试机制

每周一篇,敬请期待!

拼图游戏的算法分享

fangyuqiang — Sun, 30 Jan 2011 16:37:23 +0800

这里提到的拼图游戏，指的是类似3*3格子的框框，8个拼图移动拼成还原成原始的图片。

经过我一段时间的摸索。。目前总结出了2种拼图算法，与大家分享~欢迎拼图达人一起探讨~

第一种算法：旋转法。

这种方法规则最简单，整个完整的拼图，其实是可以连接成一条长龙，这条长龙可以顺着顺时针或者逆时钟旋转。
这个算法的原理就是：将中间的格子作为一个寄存拼图的架子，所有拼图围绕中间的拼图旋转，将整个拼图接成一条长龙。

假设正确拼图如下：
1 2 3
4 5 6
7 8
如果转换成一圈的长龙，就是
1 2 3
4 6
7 5 8
目前拼图如下：
1 3 4
2 5 7
8 6
我们的目标就是将这个图通过旋转，拼成上面那样的长龙。

第一步，我们要把2接在1后面，那我们将2寄存到中间的位置，6右5下2右，变成：
1 3 4
8 2 7
5 6

第二步，顺时针旋转外围拼图56743，留出1后面的空位，给2预备
1 3
8 2 4
5 6 7

第三步，接龙，2上将2移到1后面。
1 2 3
8 4
5 6 7
接下来每个拼图都如此操作。目前3已经自然接好，那接下来3下面接的是6，6上，把6“寄存”到中间的格子。
1 2 3
8 6 4
5 7
因为6要接在3的后面，所以向逆时针旋转整个拼图2次，第一次逆时钟58123，第二次逆时针4758123，留出3后面的空位，变成
3 4
2 6 7
1 8 5
继续接龙，6上，将6接到3后面，变成
3 6 4
2 7
1 8 5
现在龙已经接了4个了，继续接，8跟在6后面，将8移入中间的格子“寄存”，外围继续逆时钟旋转
3 6 4
2 8 7
1 5
逆时钟旋转1236
6 4
3 8 7
2 1 5
接龙
6 8 4
3 7
2 1 5

接下来8左边是接5，这个旋转的过程比较多，要注意的是，旋转过程，已经接好的龙不要再动，只旋转，不拆分。
6 8 4
3 7 5
2 1

8 7 4
6 5
3 2 1

4下7右5上，继续往下接
8 5 7
6 4
3 2 1

好了，现在看到了吗？
整条龙已经接好了！可以逆时针旋转4次，就是
1 2 3
4 6
7 5 8
然后5上8左
1 2 3
4 5 6
7 8
大功告成~

所有的拼图都可以以这样的“寄存”，接龙的方式拼成一条长龙，然后经过几次旋转就可以恢复成正确的拼图。刚开始玩的时候算法不熟悉的时候会比较慢，但是到了熟悉了之后就会越来越快，用这个算法，熟练的话可以打过第6关

上面这个过程是旋转法最基础的做法，我们的目的其实是接龙，而不是旋转，所以不是所有的拼图都一定要移动到中间，旋转接龙的，只要通过移动，可以接到一起的方式都行。要注意的是，旋转过程，已经接好的龙就不要再拆开。熟练之后，顺时针逆时针的方向旋转都可以接龙，2边同时接。

第二种算法: 交换法

交换法是一个交换两张对调了的拼图的算法，整个算法类似倒车入库。要熟练应用会比旋转法难一点。但是拼图要往高级的打，就一定要会这个算法。。

我们还是以上面的拼图为例开始：
1 3 4                   1 2 3
2 5 7 =》目标       4 5 6
8 6                      7 8

交换法是先完成第一行，123，目前这个要完成123较为简单。7下5右2右，变成
1 3 4
2 5
8 6 7
867543逆时针旋转
1 3
8 2 4
6 7 5
2上，最上面的一行123就完成了，接下来简化起见，我们隐藏掉123，进行排序
8 4
6 7 5
接下来是要完成最左边的一行，即4，7要归位。4，7如果归位，那么剩下的3个拼图只要旋转几下就可以归位了。所以核心就在于4，7如何归位。
目前这种情况，比较简单：
7上6右变成
8 7 4
6 5
8下，7左，4左变成
7 4
8 6 5
然后就简单了，5上6右8右。
7 4 5
8 6
7下4左。好了，74归位。整个拼图就完成了。
在很多情况下，交换法会比接龙更节省步数，因为接龙法需要移动所有拼图。上面这种情况比较简单，体现不出交换法的精髓，我们再造一个局：
7 8
4 6 5
这种情况是4，7对调，你会发现一直转来转去，74都对调不过来。交换法的精髓就是以退为进能的借位
首先将4移动到现在5的位置:
6上4左:
7 6 8
4 5
7下6左8左:
6 8
7 4 5
5上4右8下: 这一步是交换法的精髓所在,将连在一起的4，7切断
6 5
7 8 4
6右7上，7归位
7 6 5
8 4
8左4左，5下6右，现在让出位置，让47重相逢，但是原先相逢的时候4是在7下面的，但是这次的相逢，4是在7的右边
7 6
8 4 5

再次相逢
7 4 6
8 5
感觉是不是眼熟了呢？没错，就是刚刚旋转法一开始的做法。
8右7下4左，47归位完成
4 6
7 8 5

这是我目前已知的2种算法。。这2种算法融会贯通的用，打出高分就不是问题~

一个整理得比较清楚的JS对联广告代码

fangyuqiang — Mon, 24 Jan 2011 11:30:17 +0800

// 对联浮动广告代码
var HXFloatPari = {
 lastScrollY : 0,
 heartBeat : function() {
 var diffY;
 if (document.documentElement && document.documentElement.scrollTop) {
 diffY = document.documentElement.scrollTop;
 } else if (document.body) {
 diffY = document.body.scrollTop
 }
 var percent = .1 * (diffY - HXFloatPari.lastScrollY);
 if (percent > 0) {
 percent = Math.ceil(percent);
 } else {
 percent = Math.floor(percent);
 }
 $("#FloatPari1")[0].style.top = parseInt($("#FloatPari1")[0].style.top)
 + percent + "px";
 $("#FloatPari2")[0].style.top = parseInt($("#FloatPari1")[0].style.top)
 + percent + "px";
 HXFloatPari.lastScrollY = HXFloatPari.lastScrollY + percent;
 window.setTimeout("HXFloatPari.heartBeat()", 1);
 },
 init : function(swf,width,height) {
 var swfstr = "<div ><object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width='"+width+"' height='"+height+"'>" +
 "<param name='movie' value='"+swf+"' />" +
 "<param name='quality' value='high' />    " +
 "<param name='wmode' value='transparent' />    " +
 "<embed src='"+swf+"' width='"+width+"' height='"+height+"' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash'></embed>" +
 "</object></div>";
 document.write("<div id=\"FloatPari1\" style='left:2px;POSITION:absolute;TOP:10px;'>");
 document.write(swfstr);
 document.write("<p align=left><a onclick='javascript:$(\"#FloatPari1,#FloatPari2\").hide()' style='cursor:pointer'><img src=http://house.nhaidu.com/images/base/advclose.gif></a></p></div>");
 document.write("<div id=\"FloatPari2\" style='right:2px;POSITION:absolute;TOP:10px;'>");
 document.write(swfstr);
 document.write("<p align=right><a onclick='javascript:$(\"#FloatPari1,#FloatPari2\").hide()' style='cursor:pointer'><img src=http://house.nhaidu.com/images/base/advclose.gif></a></p></div>");

 HXFloatPari.heartBeat();
 }
}

注意本脚本需要结合jquery使用。如果你不是采用jquery的，只要把$调用都改成document.getElementById即可，没有应用jquery的其他api。

花了1个小时把网上一个现成的JS对联广告代码整理了下，格式会比较清楚，也更通用化，比较面向对象一点呵呵。使用方法很简单，

<script>
//对联广告
HXFloatPari.init('{S_URL}/flash/ad/2011/float_pari.swf',110,270);
</script>

第一个参数填flash地址，第二个参数宽度，第三个参数高度。

静态页面显示动态数据解决方案

fangyuqiang — Thu, 23 Dec 2010 09:12:50 +0800

经常有人问起我这个问题，生成静态页的页面，如何显示动态的数据？

大家都知道的，静态的html页面，一般都是跟随着各自CMS的设置进行更新的，比如说CMS的设置是10分钟，那10分钟静态html页面重新生成一次。

这里有些地方就有特别的要求了。页面上的有些数据不是静态的，而是动态变化的。比如

文章的阅读次数，评论次数，投票的次数，当前用户的登陆状态，等等，这些都是动态，并且要即时显示。

解决的方式就是应用Javascript来实现。Javascript的实现也分2种方式，一种是直接采用document.write页面上进行输出,另外一种就是应用ajax。

以php为例,新建一个php文件如test.php,输出

<?php
echo "document.write('动态输出,此处可以换成自己的变量例如阅读次数')";
?>

页面上在你需要显示此数据的地方采用Javascript链接:

这样既可达到目标。

另外一种方式ajax，就更容易理解了。就是每次页面载入的时候执行一个更新数据的ajax，将页面上需要更新的数据动态赋值就可以了。

IE6下CSS多类选择符的问题

fangyuqiang — Mon, 11 Oct 2010 13:59:27 +0800

IE6…这个前端开发的梦魇总是在你不经意的时候给你捅一刀.这次碰到的问题是CSS多类选择符的问题。IE6不支持。我们来看一段这样简单的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6多类</title>
<style type="text/css">
div{display:block;width:400px;height:200px;}
#id1.c1{background:#ccc;}
.c2.c3{border:1px solid red;}
</style>
</head>
<body>
<div id="id1" class="c1">
a
</div>
<div id="id2"  class="c2 c3">
b
</div>
</body>
</html>

形如#id1.c1的选择符，支持性很好，IE6及以上，ff,opera,safari等浏览器都支持。形如.c2.c3的选择符，在IE6下不支持，后一个类名会覆盖前一个类名，即直接识别为.c3

所以开发中用多类来组合实现css效果的时候,注意IE6的这个问题。最好的方法就是，不要用类组合的形式。

php两个不错的字符串startswith实现

fangyuqiang — Thu, 23 Sep 2010 00:40:33 +0800

写得很轻巧精妙的start with实现，学习借鉴。来自http://www.jonasjohn.de/snippets/，在他的网站上还能看到更多不错的一些实用函数的实现，有时间可以揣摩看看

/**
 * StartsWith
 * Tests if a text starts with an given string.
 *
 * @param     string
 * @param     string
 * @return    bool
 */
function StartsWith($Haystack, $Needle){
 // Recommended version, using strpos
 return strpos($Haystack, $Needle) === 0;
}

// Another way, using substr
function StartsWithOld($Haystack, $Needle){
 return substr($Haystack, 0, strlen($Needle)) == $Needle;
}

[转]被选择的互联网

fangyuqiang — Tue, 14 Sep 2010 12:15:24 +0800

本文来自wettuy的博客，是在月光博客上面看到的：http://www.lolibeta.com/pc/it/1574.html

我转载别人的文章不多，但是这篇文章对百度与google在搜索理念上的分析，让人折服。

我个人对于百度一向BS，对于百度的框计算，我的观点就是：滥用垄断地位的无耻做法，中国互联网的杀手，变相的竞价排名。会导致竞价的大网站越来越大，然后处于垄断位置，小网站消亡殆尽，最后都失去创新活力，名副其实的中国互联网杀手，杀手！

连线杂志的那篇《互联网死了》确实震动业界，而现在，百度的框计算似乎正在验证他的话。

无论是高兴也好，无论是哀嚎也罢，百度的框计算终究给最终用户带来了一些实际的东西。他改变了人们对于传统搜索的认知。而百度这类似的行为，正成为互联网的一种趋势。可以说，商业化的大潮，正在人为的割裂互联网，让他的边界越来越明显。

比特客栈写了一篇很有趣的文章《让互联网死亡，让互联网成长》，文章写的很棒，观点清晰明了，在此推荐一下。

就像最初的图中那样，互联网正在被人为的割裂。以各种门户网站为代表的商业网站，和传统的草根类个人网站。他们之间的界限是如此的分明，甚至正在越来越大。究竟是什么造成了互联网这样的格局？而互联网，又究竟给我们带来了些什么呢？

付费与免费之争

我们首先来看这样的一个实例。

一个普通的互联网用户，在寻找一个他一直想要得到的稀有资源。这个资源是如此的难以寻找，直到某天，他在一个需要花费积分才能下载的私人FTP论坛上，发现了这个资源。此时，他面临着两个选择——

花费10分钟时间，赚取相应的论坛积分，以便开始下载
花费10分钟甚至可能更多的时间，在搜索引擎上继续寻找其他免费的下载

在这个时候，这两个选择，可以说是等价的。我们假定这两种选择都只需要花费10分钟的时间，于是得到了这样一个公式

付费下载/10分钟=免费下载/10分钟

可以说在这个行为中，免费下载所花费的代价，事实上和付费下载是等价的。

但是这只是建立在一个假定的前提上的，那就是只需要10分钟就能够找到免费的替代资源。当这个时间开始增长的时候，公式也随之而改变。

付费下载/10分钟=免费下载/20分钟

在总代价仍然相同的情况下，在单位时间中，免费下载需要付出的更多，才可以得到与付费下载相同的结果。

在这样的时候，用户会趋向于选择付费下载，也并非不能理解的事情。

付费下载节省了用户寻找的成本。这也是为何付费的资源始终能够存在的主要原因。

再谈框计算

作为一个难得的实例，我们继续以百度的框计算为例，进行分析。

对于普通用户而言，他想要寻找一个软件的下载，两种方法：

访问常规的软件站；搜索自己想要的软件名；点击进入下载页面；找到下载链接然后开始下载
访问百度；搜索自己想要的软件名；点击框计算中的结果开始下载

很显然，框计算节省了用户的步骤。也可以说，框计算节省了用户寻找资源所需的时间成本。

在某种意义上，框计算实现了和付费下载一样的结果。

从这个角度来看，百度的做法实际上正是现在互联网的一种趋势。而出现这种趋势的一个原因，是因为互联网正在变得越来越快。

关于Google

曾经有人提到过这个问题。既然百度能够实现框计算，为什么Google没有想到？事实上，Google并非想不到这个问题。

这是百度的图片搜索与Google的图片搜索的对比。而这也是长期为人所诟病的一个地方。

他们之间最大的区别在于：百度直接显示出图片；而Google则将用户带领至原始网站。即使现在Google的图片搜索进行了全面的改版，较之之前的版本用户体验已经有了明显的提高，这一宗旨也没有改变。

正是这样细微的差别，早就了两种截然不同的搜索引擎。

对于站长而言，百度的做法与盗链无异，只会增加服务器的负担；但是Google则可以显著的带来流量的增加。
从用户的角度来说，往往他们并不关心这个图片出自一个怎样的网站；他们要的只是图片本身。

两种理念

让我我们来总结一下Google与百度这两种截然不同的理念。

Google认为，保证网站的生存是第一位的，用户应该尽可能快的离开搜索页面
百度认为，让用户找到自己的资源才是最重要的，用户最好在自己的网页上找到所有需要的资源

虽然两者在执行中有着诸多不同，但大抵如此。

决定这两种不同理念的因素有很多，但其中最主要的一点是：为了保证整个互联网业界的平衡与持续性。Google 并非不知道哪一种做法对于用户而言是更好的。只是这种做法，对于网站而言却是一种打击。

互联网的一个最大的特点，在于人人都可以创造价值。虽然这一点直到Web2.0时代才逐渐被发扬光大，但我始终认为，这正是互联网最基本的特征之一。无论是Twitter还是Facebook的风行，都证明了这一点。

但是这种特点，也造成了一个很严重的问题：资源的分散。有可能同样的资源，会在不同的网站中出现；也有可能更加有意义的资源，是出现在某个不为人知的小博客上。

这是一件非常棘手而严峻的事情。每个人都在互联网中占据一小块角落，并且各自为战，最终只会导致互联网被越割越小。但是这个问题并不是无解的。也正是出于对于这个问题不同的理解，百度和Google分别拿出了各自的解决方法——

百度认为，如果资源分散的话，只要将其中最有价值的集中起来就可以了。基于这一理解，框计算应运而生
Google认为，资源的分散是互联网不可避免的问题，无法依靠简单的集中来解决。基于这一理解，Google试图索引整个互联网的资源

百度的做法固然容易理解，但是Google的做法却更加疯狂，也更加彻底。Google所做过的所有事情，包括对站长们发布各种工具和教程，都是为了帮助他完成这一终极的目标：索引整个互联网。

对此，我并不愿意评价究竟谁的解决方法更加优秀。因为他们对于业界而言，有着完全相反的意义：Google的索引将会让互联网更加趋向于混乱和无序，但能够始终保持增长；百度的框计算将会让互联网更加有序而可靠，但中小网站终将无法生存。

为什么他们会如此的水火不容？答案是，用户的选择。

用户的选择

互联网究竟给我们带来了什么？有人说，是更多的资源；有人说，是无尽的自由；也有人说，只是另外一种交流方式。在我看来，互联网真正带来的东西，是选择。

这里，我必须要感谢你在如此巨大的互联网中，选择了我的博客。即使你并不是在lolibeta.com上读到的这段文字。这并不重要，因为作为互联网的用户，能够看到这里，你已经做出了一次选择。而你的这个选择，可能会成为促使我继续写下去的动力。

互联网，正是在这一次次的被选择中成长起来的。

但是这种用户选择的模式，也有一定的弊端。

假设对于普通用户而已，需要访问两个不同的网站以获取自己的资源。此时，出现了一种介于两个网站之间的索引服务，可以同时访问两个网站里的资源。对于这个用户用户，他在了解了这个索引服务之后，通常就不会继续访问那两个原始网站了。因为他至少节省了一个步骤，就可以获取到和以前同样的资源。

这就是用户作出的选择。用户始终喜欢简单的东西。这一点，我之前在《界面与自由度》中就已经论证过。现在重新引用这一结果。

无论任何时候，当面临多种不同的选择，大多数用户会趋向于选择最简单的那种。互联网始终在这种以“简单”为主导的选择中，不断的前进着，直到今天。

Supesite替换后台编辑器为ckeditor

fangyuqiang — Mon, 13 Sep 2010 10:37:16 +0800

Supesite的后台编辑器是ss自己写的，不怎么好用，尤其是查看源代码的功能，所有代码都粘在一起，没有格式化，根本看不了，跟discuz论坛的编辑器对比起来差距太大了，估计这个编辑器是comsenz早期出的东西，supesite一直没有更新，所以编辑器太古董了。最近有些受不了，决定将supesite的编辑器替换为业内目前流行的ckeditor，ckeditor的前身就是fckeditor，相信做web的应该都会听过。

替换supesite的编辑器，主要存在几个问题：

Javascript代码的兼容性，引入ckeditor的js代码，是否会与网站原先的代码产生冲突？
分页插入。supesite的分页机制较为特殊，与编辑器的结合比较紧密，它的各个分页都是存为一条数据库记录。引入新的编辑器对分页会有不小的影响。
插入图片功能，supesite的图片上传组件是独立的，引入ckeditor的话需要跟ckeditor再进行融合。
原有的编辑器的一些特殊功能，插入分页标志，远程下载图片，需要重写并融入ckeditor。

逐一解决。

引入ckeditor

下载ckeditor，将整个目录放在supesite的目录下面。包不算很大吧，不过我还是删除了很多无用的语言文件，代码洁癖…没办法…

修改 supesite/admin/tpl/header.htm，删除原有的editor的js的引入，引入ckeditor的代码。

<script language=”javascript” type=”text/javascript” src=”ckeditor/ckeditor.js”></script>

修改supesite/admin/tpl/spacenews.htm，去掉原先的editor的编辑器的初始化代码，改为ckeditor的模式。

原先是：

<div id="fulledit"><div id="message"></div></div>

<script type="text/javascript">

function init() {

<!--{if checkperm('allowpostattach')}-->

et = new word("message", "$thevalue[message]", 0, 1);

<!--{else}-->

et = new word("message", "$thevalue[message]", 0, 3);

<!--{/if}-->

}

if(window.Event) {

window.onload = init;

} else {

init();

}

</script>

改成：

<textarea cols="80" id="message" name="message" rows="10">$thevalue[message]</textarea>
 <script type="text/javascript">
 //<![CDATA[
 CKEDITOR.replace( 'message' );
 //]]>
 </script>

OK，刷新下页面。。你就可能看到界面已经变成ckeditor了。华丽丽的ckeditor！同时，我所担心的Javascript兼容问题没有出现，看了ckeditor这方面的确做得相当不错。

如果你需要的编辑功能很少，到这一步你基本上就可以结束了，基本的编辑功能都ok了。不过如果你是做资讯类的网站，需要大量使用编辑器的各项功能，那还是要做完整的替换修改方案。

插入图片功能

插入图片功能的实现，是在supesite/function/common.func.php中的getuploadinserthtml函数，因为编辑器的替换，原先的插入图片无法找到原来的编辑区域，所以，只需要将原有的插入代码改成插入到ckeditor的插入代码即可。这里涉及到了ckeditor的一些接口方法调用。

原先的代码：

$inserthtml .= ' | <a href="javascript:;" onClick="insertHtml(\''.shtmlspecialchars($thehtml).'\');return false;">'.($isimg?$lang['insert']:$lang['insert_attachments']).'</a>';
 if(!empty($thehtmlsmallpic)) {
 $inserthtml .= ' | <a href="javascript:;" onClick="insertHtml(\''.shtmlspecialchars($thehtmlsmallpic).'\');return false;">'.$lang['insertsmall'].'</a>';
 }

修改后的代码：

$inserthtml .= ' | <a href="javascript:;" onClick="CKEDITOR.instances.message.insertHtml(\''.shtmlspecialchars($thehtml).'\');return false;">'.($isimg?$lang['insert']:$lang['insert_attachments']).'</a>';
 if(!empty($thehtmlsmallpic)) {
 $inserthtml .= ' | <a href="javascript:;" onClick="CKEDITOR.instances.message.insertHtml(\''.shtmlspecialchars($thehtmlsmallpic).'\');return false;">'.$lang['insertsmall'].'</a>';
 }

OK,搞定插入图片功能。

插入分页标志与远程下载图片功能

这2个功能的实现，就需要做ckeditor的插件开发了。

未完待续。

具体涉及的代码较多，有需要的同学可以邮箱联系我了解。fangyuqiang@gmail.com

注意table的cellspacing

fangyuqiang — Wed, 01 Sep 2010 17:06:13 +0800

通过为表格定义border-collapse:collapse可以避免table的cellspacing在各个浏览器不一致的状况。

应用以下的reset来定义表格，即可避免cellspacing带来的问题：

table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}

在《一些冷门但是关键时刻很有用的html标签与属性》这篇文章，我就提到过，table的cellspacing属性，是无法通过css来控制的。。今天碰到一个界面的问题，ff下面界面对得很整齐，但是IE下总是高出一截，无论设置td的高度如何，总是会多出那么一截出来。

后来想起来自己曾经整理过的这篇文章，想起来table的cellspacing属性无法通过css来控制，那也就是说原先网站采用的reset.css并不能保证各个样式都一样的。。偏偏IE跟FF这些浏览器默认的cellspacing的值不一样，导致表格在不设置cellspacing的时候样子总是不同。

table标签上经常可以看到cellspacing属性与cellpadding属性，还有border。虽然这些是控制外观的属性，但是它们是名正言顺的标准属性，可以放心用。一般都建议采用css来控制表格样式。但是有个特殊的地方，cellspacing属性是无法通过css来控制的。所以cellspacing只能在table里直接指定。

所以，应用表格的时候，一定需要写上<table cellspacing=”0″>，至于其他reset的css，就会通用了。

border-collapse:collapse