4/26/2008
XHTML标签的自关闭
虽然xml的标签只要无内容便可写成自关闭的现象，xhtml作为xml的子集，理论上也应该遵循这样的规范，我也一直是这样理解的。
但事实上这样是不对的，xhtml需要保持一定的向下兼容，实际上只支持少量原本在html中可以不封闭的标签，其它标签或者不可以，或者表面上可以。script标签不可以自关闭，div等标签静态时没问题，如果使用js对innerHTML outerHTML等属性来修改的话，就很可能发生嵌套的混乱现象。慎用。
4/23/2008
视频正成为互联网上越来越重要的元素，国外的YouTube，国内的土豆，优酷，6间房发展的都是红红火火。 如何给自己的网站上加上视频功能了，flowplayer提供了一个十分简便的方式，flowplayer的宣传口号就是做自己的Youtube。 flowplayer是一个flash播放器，支持播放flv,mp4,swf,jpg等格式，并且提供了比较多的播放界面选项。 如何给视频加上广告呢？比如在视频的开始和结束加上图片或者flash的广告，在视频的播放中加上一个半透明的flash等。 可以考虑的有两种方式。一种是通过网页上的内容重叠，即在视频播放器上面悬浮一个图层，控制图层的显隐来加入广告。第二种是利用flowplayer的播放列表功能。 先说第一种，要保证广告的位置，可以将播放器和作为广告的flash，和作为广告的图片，flash放入一个固定大小相对定位的div中。 因为广告的大小一般比视频播放界面要小，对广告文件采用绝对定位的方式，能够精准的控制位置。通过css滤镜可以实现flahs和图片文件的半透明效果。 控制时间的过程如下 单击播放按钮，调用begin()函数，其中隐藏播放按钮和视频截图，并开始显示视频引导广告，setTimeout定时3~5s后隐藏引导广告并播放视频， 视频播放开始将触发onPlay()事件。在事件句柄函数中播放半透明的伴随广告，伴随广告可以加上关闭按钮供用户选择关闭。 视频结束后触发onClipDone事件。在此事件句柄中，隐藏伴随广告并播放回音广告。回音广告结束后，显示重播按钮以及需要的图片，如视频推荐列表等。 这种方式需要注意一些地方，因为其中有多个图层，需要定义好z-index，避免链接的混乱。因为广告等独立于视频播放器，比较难于做更多的控制。 第二种方式是播放列表。 playList:[ {name: 'guild_ad', url:'/image/myself32.jpg',duration:3,overlay:'/image/redheart.jpg'}, {name: 'main_video', url: '/upload/forum_video/14/14934.flv'}, {name: 'echo_ad', url:'/flash/2465362_22_163006.jpg',linkUrl:'http://www.sohu.com',linkWindow:'_blank',duration:50}, ] 可以将引导广告，视频，以及回音广告做成一个列表。不过伴随广告，仍需要使用上面的层叠实现。这里需要利用好几个事件。 onClipChanged,onClipDone这两个事件对播放列表中的每个剪辑都会触发。onPlay只在播放列表开始时触发一次。单击播放或者重播按钮时调用showVideo函数。开始播放后隐藏一些静态画面， 剪辑切换时根据情况显示或者隐藏伴随广告，剪辑结束时如果是最后一个剪辑则显示最终画面
<script>
function showVideo() {
$('#flow_player')[0].DoPlay();
}
function onPlay(clip) { $("#flow_cover,#flow_button,#flow_list").hide(); } function onClipChanged(clip) {
switch(clip.name){
case 'main_video':
$('#accompany_ad').show();
break;
case 'echo_ad':
$('#accompany_ad').hide();
break;
default:
break;
}
}
function onClipDone(clip) {
if(clip.name=='echo_ad'){
$("#accompany_ad").hide();
$('#flow_list').show();
}
}
</script> 4/21/2008
学习设计模式
看了 http://www.javaeye.com/topic/18648?page=1 上面的讨论，感觉挺有收获。工厂模式说到底是为了减少依赖，便于维护。用设计模式的语言来说就是依赖抽象，不要依赖具体。几种工厂模式都是用来创建对象的，有时仔细想想，似乎没什么区别，情况稍有变化，就分不清是什么工厂模式了。设计模式背后的的OO思想是一致的，我觉得最主要的就是两条：
- 封装变化
- 减少依赖
所以各种模式常常看起来有许多的相似性，这很正常。判断设计模式，有时主要看意图。
简单工厂是为了创建单一产品。如果这个产品可能有多种类型，那么就需要使用工厂方法了。再者如果需要创建多种产品，而且彼此间相互依赖或者存在联系（即不是各种产品间的自由组合）时，就是抽象工厂发挥作用的时候了。（明天继续）
4/19/2008
组织Flash脚本
这两天研究了下Flash的ActionScript，与javascript同源，语法比较相似。不过as脚本往往分散到各个剪辑，层或者帧里面。很难阅读。所以研究了下如何组织flash脚本。 最好是能够单独建立一个只有一帧脚本层，将脚本全部写在这里。甚至是在这一帧中仅仅写一个包含语句，脚本全部写在一个外部文件中。
#include "E://www/tmp/fanpai.as"
分散的脚本组织起来需要注意的事件处理的对象，以及变量的作用范围。
对于按钮使用 objname.onRelease = function(){}
特定帧的代码经常需要使用到onEnterFrame事件。
但是onEnterFrame的使用经常可能导致内存泄露。因此使用完了常常需要delete。这就需要给一个事件增加多个侦听函数。可以如下面这样做
_root.onEnterFrame = function(){
switch(this._currentframe){
case 1:
todo;
break;
case 20;
todo;
break;
default:
break;
}
}
需要的时候往frameListener中加入或删除侦听函数。
onEnterFrame = function(){
for(var i:String in frameListener){
(frameListener[i])();
}
}
var frameListener = { fun1:function(){
if(_root.getbytesloaded() >= _root.getbytestotal()) {
delete framelistener['fun1'];
loadMc(0);
}}
}
在ActionScript 3.0中还有更加惬意的方式。
import mx.events.EventDispatcher;
EventDispatcher.initialize(MovieClip.prototype);
var myListener:Object = new Object();
myListener.release = function (evt:Object) {
trace(evt.target);
}
aaa.onRelease = bbb.onRelease = function () {
this.dispatchEvent({target:this, type:"release"});
}
aaa.addEventListener("release", myListener);
bbb.addEventListener("release", myListener);
另外必须注意的的是一些 _root,this,_parent等的处理。这些变量都在某种意义上属于相对路径的范畴。代码更换了位置后，必须重新调整这些代码来保证所指的路径和对象一致。 需要的时候使用with结构来简化代码。
4/16/2008
css 学习之二
前段时间做了一个调整firefox下css的工作。总结了一些技巧。
- IE6的盒模型是与是否声明doctype有关的。声明了则为标准盒模型
width = content+padding+border+margin.否则与IE5一致。 - li2> 尝试使用em声明字号时候发现，子级元素继承父级元素的大小，但是table默认是不继承外围字号的。如需要继承。可使用table{font-size:inherit;}。使用em时先定义body{font-size:63%},设为62.5%ie下字体会略小。
- firefox和opera支持max-width和min-width，用来限制布局的过分自由。
- 注意用多个class指定样式优先于单个class。 属性>!important>内联样式表>id>多个class>单个clas>标签
- 导入样式表
@import url(sample.css)尽量不使用引号。 - 关于表格 合并边框
border-collapse:collapse.
需要固定宽度:table-layout:fixed - 给一些标签加入title属性大大提高了可读性。
- link visited hover active 中间的两个不可交换顺序。
- 容器不扩展问题。子级元素浮动，需在后面加上清除浮动的div.clear
.clear{font:0px/0px sans-serif;clear:both;display:block;} - 高度不适应问题。内层对象设置margin和padding后外层对象的高度不重新计算。这时候也需要再上下各加入一个不占高度的div.empty。
.empty{height:0px;overflow:hidden;} - 自动折行 IE (1)
word-break:break-all;(2)white-spacing:normalFF 还需要加入overflow:auto - 表格固定宽度且不换行 (1)
<td width="25%"> <div> content </div> </td>其中td宽度必须为百分比 - 半透明效果的实现
IE：filter:alpha(opacity=50);
firefox:-moz-opacity:0.5; - z-index大的层，背景图片仍可能被z-index小的层遮盖
订阅：
博文 (Atom)