idea's blog

--- TiddlyWiki中文网站上的介绍。

昨天朋友介绍的一个好东西。具有保存功能，作为记事本使用不错。到 http://gf.cs.hit.edu.cn/projects/tiddlywiki/ 下载。直接在浏览器中打开html文件。

“掌握了缓存机制，标志程序员进入中高级阶段。”---banq

首先创建一个缓存类，具体依赖你的程序。然后在JSP中把这个缓存类声明为scope="application"的Bean，它只创建一次，存在于application对象中，事实在它是ServletContext对象，对应用中的所有JSP文件都可见。

缓存类的实现可以参考Jive论坛(也就是Yazd)中的util包，下面是一个假想的博客文章缓存实现的大概思路，并不是可运行代码。

public class Cache{

	// Article 是文章类，String是它的id，通过id来查找文章
	// java.util.HashMap, 你可以用其它合适的素数来替代103
	protected HashMap<String, Article> cachedObjectsHash =
		new HashMap<String, Article>(103);

	// 根据访问计数来维护的链表，保存了Article的id。最先移除的Article是表尾的对象
	protected LinkedList<String> accessedList = new LinkedList<String>();

	// HashMap的最大体积(文章数)
	protected int maxSize =  1024;

	// 把Article的id加入到倒数第2位，也可以加入到表头
	public void add(Object key, Article article){
		if(!cachedObjectsHash.contains(article)){
			cachedObjectsHash.add(article.getId()+"", article);
			if(cachedObjectsHash.size() > maxSize){
				cachedObjectsHash.remove(accessedList.getLast());
				accessedList.removeLast();
			}
			accessedList.addFirst(article.getId()+"");
		}
	}

	public Article get(Object key){
		// 如果在链表中找到，位置前移
		// 返回
		// 否则查找数据库，并cacheObjectsHash.add()
	}
}

相关资源：

• b/s系统下，缓存的使用策略？？？
• Yazd Discussion Forum

我十分支持Web标准，并且认为它提出的文档对象模型(DOM，Document Object Model)是非常合理而且有用的。文档对象模型让我们脱离字符，在结构层面高级方式操作文档。

在网页制作(HTML/XHTML)方面，遵循Web标准可以使网站的结构更加合理。但是，新的标准总会导致一部分旧的网页制作者的排斥，很简单，因为他们无法掌握新的标准或者/同时他们认为不需要新的标准，原来的方式已经够用了。我不跟后一部分的人讨论。

应用标准的时候，有些网页制作者已经走进了一些误区。往往为了一个标准不擅长而且是微不足道的效果而弄得文档结构混乱。这显然已经违反了Web标准的初衷。Web标准就是让我们以清晰的结构来组织文档，好使用DOM方式操作文档。

举一个例子来说，在网页制作过程中的三栏(一般是3个div标签)布局。很多网页制作者都通过3个div标签的嵌套来达到目的，因为如果不嵌套，在窗口缩小的时候，div标签会向下流动。

它们是这样的：

<div id="column1">
	<div id="column2">
		<div id="column3">
		</div>
	</div>
</div>

无论从结构还是从内容或者表现上讲，这三栏一般都是等地位的，不应该嵌套。嵌套已经暗示了它们的附属关系。当我们使用xml解析工具如 JDOM，DOM4j 或者 DOM的JavaScript(ECMAScript)绑定 来解析这些内容时，我们就会发生逻辑上的混乱。

对Web标准抱有偏见的人可能会说，使用表格布局可以轻松实现良好的三栏布局。那我们来看看表格的代码：

<table>
	<tr>
		<td id="column1"></td>
		<td id="column2"></td>
		<td id="column3"></td>
	</tr>
</table>

可能表格在表现上能容易达到三栏布局，但是代码的结构上与上面一样是多层嵌套。<table>和<tr>标签是是冗余的。

正确的方法应该是下面的代码：

<div id="column1">
</div>
<div id="column2">
</div>
<div id="column3">
</div>

而 www.djangoproject.com 这样使用：

<div id="subwrap">
	<div id="content-main">
	</div>
	<div id="content-related">
	</div>
</div>
<div id="content-extra">
</div>

因为它认为第三栏只是额外的(extra)。这种布局从代码上可以看成是两栏布局，然后第一栏再分成两栏，所以表现上是三栏。

这样，符合结构和内容的关系，表现方面我们可以通过在CSS(级联样式表)中设定每一栏的宽度百分比来完成。或者我们定义每一栏的固定宽度，再定义body标签的最小宽度(IE6不支持，所以需要把三栏放在一个div--container里，再定义这个div的最小宽度)。我们还有更多的方法。

当需要表现复杂的外观的时候，我们应该怎么办？比如圆角边框，那么就使用图片吧。

我们来看一个版面和代码结构都非常好的网页 www.recyclenow.com 的首页。下面是它的截图和使用 Firefox 的 DOM Inspector插件查看它的DOM结构。

在网上逛，发现欧美的好站点总是各有各的过人之处----这就是个性吧。我想为什么他们的网站做得那么好，难道是他们是他们天生的种族上比我们优越吗？我不承认，你们也不承认，他们也不这样认为。那么是为什么？

我在这里给出了 www.recyclenow.com 和 www.smsoglasi.com 的链接和截图，如果你想得到更多，你可以从 CSS Mania 和 CSS Beauty 出发寻找。

这两个网站的特点就是简洁，用色正确，排版大方。 www.recyclenow.com 使用静态HMTL的首页，而 www.smsoglasi.com 首页采用了Ajax技术。

曾经有人问中国的特色网站是什么，我说是：杂，“通俗”。其实就是一个字：俗！我不是指所有的，我是指“特色的”。一进入那些“中国特色”的网站，满屏幕一大堆不明飞行物体乱飞，机器性能不好，或者即使机器性能很好，也极有可能浏览器被杀死。

这种“中国特色”的网站的产生应该和人们的欣赏感觉有关。我遇到过一个学生，做了大约10个静态HTML页面，打包压缩后文件的体积竟然达到了4MB。页面看起来怎么样呢？进了主页面，找不出超链接在哪。粗看起来挺让没有看过欧美网站的人赞一句：不错嘛，图片多好看。

对了，明摆就是使用了一个盗版的当前流行的网页制作软件拼凑出来的。所以做出来的网页看起来就跟中国盗版软件商场里的光盘包装一样----你应该知道盗版光盘的包装是怎么样的并且知道他们堆在一起的时候是怎么样的。

令这位同学“欣慰”的是，他的努力得到了在场绝大部分人的赞赏，因为他们都说了类似“不错嘛”之类的话。所以他们以后就成长为了“中国特色网站”的制作者，这是理所当然的。

你应该已经知道 www.recyclenow.com 是一个关于废物回收的网站，而看起来却那么优雅。

今天看到有人被问到xml，xhtml，html，css，div时，双方发生了不愉快，因为提问的人和回答的人都是概念不清。如果当时我回答，我也会不愉快的。所以到w3.org网站看文档。

Q. What is XML? 什么是XML?

A.

Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879). Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. http://www.w3.org/XML/

扩展的标记语言(XML)是一种简单的扩展性强的文本格式，源于SGML (ISO 8879)。最初是被设计来面对大规模电子出版(物)的挑战，XML在网络上和其它地方交换各种数据方面也在扮演着越来越重要的角色。

Q. 什么是CSS?

A.

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. http://www.w3.org/Style/CSS/

级联样式表(CSS)是一种为网络(Web)文档添加样式(如：字体，颜色，空白)的简单机制。

Q. 什么是XHTML?

A.

Extensible HyperText Markup Language XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4 [HTML4]. XHTML family document types are XML based, and ultimately are designed to work in conjunction with XML-based user agents. http://www.w3.org/TR/xhtml1/

扩展的超文本标记语言 XHTML是当前和未来文档类型和模型的家族，是HTML 4的一个子集，重新改造和扩展了HTML 4。XHTML家族的文档类型基于XML，最终被设计来联合基于XML的用户代理。

Q. 什么是HTML

A.

HyperText Markup Language (HTML) 超文本标记语言 是Web文档使用的主要格式，源于SGML。

Q. 什么是DIV

A.

DIV是HTML的一个元素。generic language/style container，通用的语言/样式容器。http://www.w3.org/TR/html4/index/elements.html

你最好还是自己到http://www.w3.org/看文档。

1. 通过JavaScript设置元素的样式

通过元素(Element)的setAttribute()方法设置style属性：

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("style", "font-size:24px;color:red;");

除了IE(Microsoft Internet Explorer)，这种方法在当前其它浏览器上都行得通。为了照顾IE，我们可以使用设置不标准的属性---元素style对象的cssText属性。尽管这个属性不是标准的，但得到了广泛的支持(除了Opera)：

var testdiv = document.getElementById("testdiv");
testdiv.style.cssText = "font-size:24px;color:red;";

• Firefox等浏览器：运行代码，在下面的测试区域查看效果。
• Firefox等浏览器IE浏览器：，在下面的测试区域查看效果。

2. 设置元素的class属性

使用Firefox和Safari之类的浏览器，可以通过元素(Element)的setAttribute()方法设置class属性：

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("class", "cat");

为了照顾IE这个异类，它只认识className属性---在IE中className = class，其它大多数浏览器都忽略className属性。你可以这样做：

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("class", "cat");
testdiv.setAttribute("className", "cat");

• Firefox等浏览器：运行代码，在下面的测试区域查看效果。
• Firefox等浏览器IE浏览器：运行代码，在下面的测试区域查看效果。

上面的代码已经在Mozilla Firefox 1.5.0.2，Opera 8.54，Konqueror 3.5.2，IE6 测试通过。

3. 创建输入元素

注意document.createElement()和<Element>.setAttribute()方法的顺序：

var button = document.createElement("input");
button.setAttribute("type", "reset");
var testdiv = document.getElementById("testdiv").appendChild(button);

• Firefox等浏览器和IE浏览器：运行代码，在测试区域查看效果。

4. 向元素增加事件处理

标准的做法是：

var testdiv = document.getElementById("testdiv");
testdiv.setAttribute("onclick", "doFoo();");

除了IE，上面的代码在所有的当前浏览器中都能工作。在IE中必须使用点词法来引用所需的事件处理程序：

var testdiv = document.getElementById("testdiv");
testdiv.onclick = function(){doFoo();};

相关资源：

• 《Ajax基础教程》纸质书---人民邮电出版社。
• World Wide Web Consortium (W3C)
• Document Object Model (DOM)
• ECMAScript [ECMAScript] binding for the Level 3 Document Object Model Core definitions.
• The XMLHttpRequest Object
• The Document Object Model in Mozilla and The Mozilla DOM Reference: all objects, properties and methods (Zipped HTML)
• ajaxian.com