今天使用Observer 重构了S5Creator. 主要是将各个模块之间解耦.
首先快速的实现一个观察者模式. (现在暂时放在 S5Creator 这个类上, 以后再重构..)

S5Creator.prototype.register = function(topic,observer)
{
	if (!(this._topics[topic] instanceof Array))
		this._topics[topic] = [];
	this._topics[topic].push(observer);
}
 
S5Creator.prototype.notify = function(topic,data)
{
	console.log("notify " + topic);
	if (!(this._topics[topic] instanceof Array))
		return ;
	this._topics[topic].each(function(observer){
		observer.call(null,data);
	})
}

很简单的一段代码.
有下面的一个场景, 我们有一个主题选择器让我们选择主题. 选择完成以后我们需要通知编辑器更新主题.
以前我们需要由ThemeSelector 显示的调用Editor 的setContentCss.
现在我们只需要这样

Editor.prototype.init = function()
{
	var editor = this;
 
	//注册主题改变事件
	S5Creator.singleton().register(
		"theme_change",
		this.setContentCss.bind(this)
	);
        // 其他代码
}

和这样

ThemeSelector.prototype.select = function(theme)
{
	if(theme)
	{
		var path = this._options.themePath + '/'
			 + $(theme).attr('theme') + '/' + this._options.editorCssName;
		//注意这里
		S5Creator.singleton().notify("theme_change",path);
		$(this._box).dialogClose();
	}
}

解释一下上面有一个bind. 我很喜欢这个东西. 可以让我不用总是担心this.

Function.prototype.bind = function(obj)
{
	var func = this;
	return function(){
		func.apply(obj,arguments);
	}
}

我还将Observer 模式用在了其他几个地方. 比如编辑器内容更新后,通知缩略图. 改变了正在编辑的slide 以后, 通知编辑器更新内容.