使用JQUERY实现JAVASCRIPT的简单观察者模式，主要提供一种思想，实际中可以继续完善。
直接贴代码：
<!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>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var observers = [];
$(function(){
setTimeout(function(){
//调用观察者
//ob1.update();
//ob2.update();
var _num = observers.length;
for(var _i=0;_i<_num;_i++)
{
observers[_i].update()
}
},1000);
})
</script>
</head>
<body>
<div id="observer1">observer1</div>
<script type="text/javascript">
function observer1_obj()
{
this.update = function(){
$('#observer1').html('observer1 update')
}
}
observers[0] = new observer1_obj();
</script>
<div id="observer2">observer2</div>
<script type="text/javascript">
function observer2_obj()
{
this.update = function(){
$('#observer2').html('observer2 update')
}
}
observers[1] = new observer2_obj();
</script>
</body>
</html>
稍微完善下：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function Subject()
{
this.observers = [];
}
Subject.prototype.add = function(obj)
{
this.observers.push(obj);
}
Subject.prototype.notify = function()
{
var _num = this.observers.length;
if(_num>0)
{
for(var _i=0;_i<_num;_i++)
{
this.observers[_i].update()
}
}
}
function observer(functionV)
{
this.update = functionV;
}
var subject = new Subject();
$(function(){
setTimeout(function(){
//调用观察者
subject.notify();
},1000);
})
</script>
</head>
<body>
<div id="observer1">observer1</div>
<script type="text/javascript">
subject.add(new observer(function(){
$('#observer1').html('observer1 update')
}));
</script>
<div id="observer2">observer2</div>
<script type="text/javascript">
subject.add(new observer(function(){
$('#observer2').html('observer2 update')
}));
</script>
直接贴代码：
<!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>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var observers = [];
$(function(){
setTimeout(function(){
//调用观察者
//ob1.update();
//ob2.update();
var _num = observers.length;
for(var _i=0;_i<_num;_i++)
{
observers[_i].update()
}
},1000);
})
</script>
</head>
<body>
<div id="observer1">observer1</div>
<script type="text/javascript">
function observer1_obj()
{
this.update = function(){
$('#observer1').html('observer1 update')
}
}
observers[0] = new observer1_obj();
</script>
<div id="observer2">observer2</div>
<script type="text/javascript">
function observer2_obj()
{
this.update = function(){
$('#observer2').html('observer2 update')
}
}
observers[1] = new observer2_obj();
</script>
</body>
</html>
稍微完善下：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function Subject()
{
this.observers = [];
}
Subject.prototype.add = function(obj)
{
this.observers.push(obj);
}
Subject.prototype.notify = function()
{
var _num = this.observers.length;
if(_num>0)
{
for(var _i=0;_i<_num;_i++)
{
this.observers[_i].update()
}
}
}
function observer(functionV)
{
this.update = functionV;
}
var subject = new Subject();
$(function(){
setTimeout(function(){
//调用观察者
subject.notify();
},1000);
})
</script>
</head>
<body>
<div id="observer1">observer1</div>
<script type="text/javascript">
subject.add(new observer(function(){
$('#observer1').html('observer1 update')
}));
</script>
<div id="observer2">observer2</div>
<script type="text/javascript">
subject.add(new observer(function(){
$('#observer2').html('observer2 update')
}));
</script>
MYSQL描述：
一个文章库，里面有两个表：category和article。category里面有10条分类数据。article里面有20万条。article里面有一个"article_category"字段是与category里的"category_id"字段相对应的。article表里面已经把 article_category字义为了索引。数据库大小为1.3G。
问题描述：
执行一个很普通的查询： SELECT * FROM `article` WHERE article_category=11 ORDER BY article_id DESC LIMIT 5 。执行时间大约要5秒左右
解决方案：
建一个索引：create index idx_u on article (article_category,article_id);
SELECT * FROM `article` WHERE article_category=11 ORDER BY article_id DESC LIMIT 5 减少到0.0027秒
继续问题：
SELECT * FROM `article` WHERE article_category IN (2,3) ORDER BY article_id DESC LIMIT 5 执行时间要11.2850秒。
使用OR:
select * from article
where article_category=2
or article_category=3
order by article_id desc
limit 5
执行时间：11.0777
解决方案：避免使用in 或者 or (or会导致扫表)，使用union all
使用UNION ALL：
(select * from article where article_category=2 order by article_id desc limit 5)
UNION ALL (select * from article where article_category=3 order by article_id desc limit 5)
ORDER BY article_id desc
limit 5
执行时间：0.0261
一个文章库，里面有两个表：category和article。category里面有10条分类数据。article里面有20万条。article里面有一个"article_category"字段是与category里的"category_id"字段相对应的。article表里面已经把 article_category字义为了索引。数据库大小为1.3G。
问题描述：
执行一个很普通的查询： SELECT * FROM `article` WHERE article_category=11 ORDER BY article_id DESC LIMIT 5 。执行时间大约要5秒左右
解决方案：
建一个索引：create index idx_u on article (article_category,article_id);
SELECT * FROM `article` WHERE article_category=11 ORDER BY article_id DESC LIMIT 5 减少到0.0027秒
继续问题：
SELECT * FROM `article` WHERE article_category IN (2,3) ORDER BY article_id DESC LIMIT 5 执行时间要11.2850秒。
使用OR:
select * from article
where article_category=2
or article_category=3
order by article_id desc
limit 5
执行时间：11.0777
解决方案：避免使用in 或者 or (or会导致扫表)，使用union all
使用UNION ALL：
(select * from article where article_category=2 order by article_id desc limit 5)
UNION ALL (select * from article where article_category=3 order by article_id desc limit 5)
ORDER BY article_id desc
limit 5
执行时间：0.0261
Web 前端优化最佳实践第四部分面向 CSS。目前共计有 6 条实践规则。
1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)
官方的解释我觉得多少有点语焉不详。这一条其实和用户访问期望有关。CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。没有人喜欢等待，而浏览器已经考虑到了这一点。
2. 避免 CSS 表达式 (Avoid CSS Expressions)
个人认为通过 CSS 表达式能做到的事情，通过其它手段也同样能做到而且风险更小一些。
3. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。
4. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
如果没有 JavaScript 与 CSS 可能更好。但，这是不可能的，SO，尽量小点吧。语法能简写的简写。
5. 使用 而不是@importChoose over @import
在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。
6. 避免使用Filter (Avoid Filters)
http://www.dbanotes.net/web/best_practices_for_speeding_up_your_web_site_css.html
1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)
官方的解释我觉得多少有点语焉不详。这一条其实和用户访问期望有关。CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。没有人喜欢等待，而浏览器已经考虑到了这一点。
2. 避免 CSS 表达式 (Avoid CSS Expressions)
个人认为通过 CSS 表达式能做到的事情，通过其它手段也同样能做到而且风险更小一些。
3. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。
4. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
如果没有 JavaScript 与 CSS 可能更好。但，这是不可能的，SO，尽量小点吧。语法能简写的简写。
5. 使用 而不是@importChoose over @import
在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。
6. 避免使用Filter (Avoid Filters)
http://www.dbanotes.net/web/best_practices_for_speeding_up_your_web_site_css.html
//设置freetextbox的content
var ed;
//兼容IE/FireFox
ed = document.all?eval("myTextBox_designEditor"):document.getElementById("myTextBox_designEditor").contentWindow ;//;
ed.document.open();
ed.document.write(objXml.getElementsByTagName("article")[0].firstChild.nodeValue);
ed.document.close();
var ed;
//兼容IE/FireFox
ed = document.all?eval("myTextBox_designEditor"):document.getElementById("myTextBox_designEditor").contentWindow ;//;
ed.document.open();
ed.document.write(objXml.getElementsByTagName("article")[0].firstChild.nodeValue);
ed.document.close();
