HZ UED

JAVASCRIPT 模式

Posted on 2011/05/09, 9:15 上午, by yxq198514 and received No Comments ».

将最近阅读的《javascript设计模式》做下记录，以下是最新接触的一些设计模式。源码：http://www.jsdesignpatterns.com/ http://www.apress.com/

1、工厂模式：有助于消除那些彼此实例化对方的类之间的耦合，并用1个方法来确定要实例化哪个类。例子：RSS阅读器

2、桥接模式：把两个对象链接起来，实际就是一个门面类。

3、组合模式：用一条命令在多个对象上激发复杂的或递归的行为，例子：表单验证

4、门面模式：为兼容各类浏览器创建一个更完善的接口方法。

5、适配器模式：现有接口和不兼容的类之间进行适配。例子：EMAIL API

6、装饰者模式：为对象添加特性而不用创建新的子类。例子：自行车装车灯、车锁。

7、享元模式：把大批独立对象转变为少量共享对象，例子：tips。需要把对象的行为提出去。

8、代理模式：用来控制另一个对象的访问，可以拔本体的实例化推迟到真正需要的时候。例子：邮件里的通信录功能，其实就是按需加载。

_initialize 实例化本体；关联到各种触发器或条件；_isInitialized判断代理初始化是否完成

9、观察者模式：发布者-订阅者，对程序中摸个对象的状态进行观察，并且在其发生改变的时候能够得到通知。例子：报纸投递

10、命令模式：

11、职责链模式：

仿淘宝的结构新改的星星打分

Posted on 2011/04/18, 5:27 上午, by yxq198514 and received No Comments ».

重新改版后，利用绝对定位重叠每个星星的标签，又因为宽度不同，可以划到每个星星，这样只需要拼合2张图片

对应的HTML

对此应用评分  <strong id=”mytitle”>8分</strong>

对应的CSS

.dafen{ position:relative}
ul.rating {width:126px; height:22px; overflow:hidden; position:relative; background: url(../img/star-matrix2.png) no-repeat 0 0;}
ul.rating li a {position:absolute;left:0;top:0px;width:11px;height:22px; overflow:hidden; text-indent:-2000em; position:absolute; text-decoration:none; }
ul.rating li.one a{width:10%; z-index:10}
ul.rating li.two a{width:20%; z-index:9}
ul.rating li.three a{width:30%; z-index:8}
ul.rating li.four a{width:40%; z-index:7}
ul.rating li.five a {width:50%; z-index:6}
ul.rating li.six a{width:60%; z-index:5}
ul.rating li.seven a{width:70%; z-index:4}
ul.rating li.eight a{width:80%; z-index:3}
ul.rating li.nine a{width:90%; z-index:2}
ul.rating li.ten a{width:100%; z-index:1}
ul.rating li a:hover,ul.rating li a.hover{background: url(../img/star-matrix2.png) no-repeat 0 -22px;}

对应的JS//基于JUERY，请自行引入

function star(){
    $(“ul.rating li a”).click(function(){
      var title = $(this).attr(“title”);
   var cl = $(this).parent().attr(“class”);
   var obj= $(this);
       $(“#mytitle”).html(title+”分”);
       obj.addClass(“hover”);
     })}

标签：星星打分重构

JS性能（2）

Posted on 2011/03/06, 6:07 上午, by yxq198514 and received No Comments ».

我们经常会在for循环中迭代一些数组元素或者一些HTML元素。

for (var i = 0; i < myarray.length; i++) {// do something with myarray[i]}

技巧一：假如能将myarray.length存成max

for (var i = 0, max = myarray.length; i < max; i++) {// do something with myarray[i]}

afari下面提高两倍的速度，在IE7下面提高190倍的速度。

技巧二：定义数组的时候，用 var myarr=[];代替 var myarr= new Array();

技巧三：用Array对象存储字符串,然后用join()方法去代替字符串拼接

如将

var str = “hello”;str += “world”;

改成

var arr = [];
arr[0] = “hello”;
arr[1] = “world”;
var str = arr.join(“”);

标签：JS性能

字体对照表

Posted on 2011/01/14, 2:50 上午, by yxq198514 and received No Comments ».

中文名英文名 Unicode
Mac OS
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1
华文黑体 STHeiti \534E\6587\9ED1\4F53
华文楷体 STKaiti \534E\6587\6977\4F53
华文宋体 STSong \534E\6587\5B8B\4F53
华文仿宋 STFangsong \534E\6587\4EFF\5B8B
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro
标楷体 BiauKai \6807\6977\4F53
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B
Windows
新细明体 PMingLiU \65B0\7EC6\660E\4F53
细明体 MingLiU \7EC6\660E\4F53
标楷体 DFKai-SB \6807\6977\4F53
黑体 SimHei \9ED1\4F53
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
仿宋 FangSong \4EFF\5B8B
楷体 KaiTi \6977\4F53
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
Office
隶书 LiSu \96B6\4E66
幼圆 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
华文楷体 STKaiti \534E\6587\6977\4F53
华文宋体 STSong \534E\6587\5B8B\4F53
华文中宋 STZhongsong \534E\6587\4E2D\5B8B
华文仿宋 STFangsong \534E\6587\4EFF\5B8B
方正舒体 FZShuTi \65B9\6B63\8212\4F53
方正姚体 FZYaoti \65B9\6B63\59DA\4F53
华文彩云 STCaiyun \534E\6587\5F69\4E91
华文琥珀 STHupo \534E\6587\7425\73C0
华文隶书 STLiti \534E\6587\96B6\4E66
华文行楷 STXingkai \534E\6587\884C\6977
华文新魏 STXinwei \534E\6587\65B0\9B4F

标签：字体

变态IE6之奇数BUG

Posted on 2010/12/31, 1:00 上午, by yxq198514 and received No Comments ».

今天做一个项目中要用到圆角自适应容器，写了如下布局

<!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>demo</title>
<link href=”style/css/style.css” rel=”stylesheet” type=”text/css” />
<style>
/*box*/
.circbox{border:1px solid #E4E5EA; margin:10px; position:relative}
.circbox b{background: url(style/img/bg_box.png) no-repeat; display:block; position:absolute; width:6px; height:6px; overflow:hidden; font-size:0}
.circbox .tl{ background-position:0px 0px; left:-1px; top:-1px}
.circbox .tr{ background-position:-6px 0px; right:-1px;top:-1px }
.circbox .bl{ background-position:0px -6px; left:-1px; bottom:-1px}
.circbox .br{ background-position:-6px -6px; right:-1px;bottom:-1px }
.con h3{ font-size:14px; padding-left:10px; border-bottom:1px solid #ccc; height:24px; }/*将height+border之和变成奇数即可*/
.circbox .con{ padding:10px}
.con ul{ padding:10px;}
</style>
</head>
<body>
<div>
<b></b>
<b></b>
<div>
<h3″>标题</h3>
11111111111<br />
222222222222<br />
33333333333<br />
</div>
<b></b>
<b></b>
</div>
</body>
</html>

在IE6下因为H3导致边框不能对齐，搞了半天，经同事指点，发现原来又是IE6的奇数BUG在作怪，将height+border之和变成奇数即可
图像下载：

标签：IE6 BUG

JS性能（1）

Posted on 2010/11/15, 8:23 上午, by yxq198514 and received No Comments ».

今天有个菜单列表要点击后加个状态，写了2段JS用FF进行性能分析

方法一：

var myclick;
$(".colsidebox2 ul li").each(function(i){
	$(this).click(function(){
	if(myclick){
		$(".colsidebox2 ul li").eq(myclick).removeClass("on");}
		var index=i;
		var $_this=$(this);
		$_this.addClass("on")
		myclick=index;
		})
	})

方法二：

<script type="text/javascript">
$(".colsidebox2 ul li").click(function(){
	$(this).addClass("on").siblings().removeClass("on");
	})

虽然方法二比较简单，但对于一个超过10个的列表，还是推荐方法一

标签：JS性能

base.css

Posted on 2010/11/11, 12:06 下午, by yxq198514 and received No Comments ».

/*
* base css
* author    YXQ
* time       2010-11-11
*/

/*css RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal; }
table{border-collapse:collapse; border-spacing:0px; }
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal; }
fieldset,img{border:0px;}
q:before,q:after {content:”;}
abbr,acronym {border:0; }
/*文字排版*/
.f12{ font-size:12px;}
.f13{ font-size:13px;}
.f14{ font-size:14px;}
.f16{ font-size:16px;}
.f20{ font-size:20px;}
.fb{ font-weight:bold}
.fn{ font-weight:normal}
.t2{ text-indent:2em}
.lh150{ line-height:150%}
.lh180{ line-height:180%}
.lh200{ line-height:200%}
.unl{ text-decoration:underline}
.no_unl{ text-decoration:none}
/*定位*/
.tc{ text-align:center; }
.tr{ text-align:right; }
.tl{ text-align:left; }
.bc{ margin-left:auto; margin-right:auto}
.fr{ float:right; display:inline; } /* ‘display:inline’ 解决IE的双边距问题 */
.fl{ float:left; display:inline; }
.cb{ clear:both; }
.cr{ clear:right; }
.cl{ clear:left; }
.clearfix:after{ content:”.”; display:block; height:0; clear:both; visibility:hidden}.clearfix{ display:inline-block}
*html .clearfix{ height:1%}.Clearfix{ display:block}
.vm{ vertical-align:middle}
.pr{ position:absolute}
.pa{ position:absolute}
.abs—right{ position:absolute; right:0}
.zoom{ zoom:1}
.hidden{ visibility:hidden}
.none{ display:none}
/*长度高度*/
.w10{ width:10px}
.w20{ width:20px}
.w30{ width:30px}
.w40{ width:40px}
.w50{ width:50px}
.w60{ width:60px}
.w70{ width:70px}
.w80{ width:80px}
.w90{ width:90px}
.w100{ width:100px}
.w200{ width:200px}
.w250{ width:250px}
.w300{ width:300px}
.w400{ width:400px}
.w500{ width:500px}
.w600{ width:600px}
.w700{ width:700px}
.w800{ width:800px}
.w{ width:100%}
.h50{ height:50px}
.h80{ height:80px}
.h100{ height:100px}
.h200{ height:200px}
.h{ height:100%}

/*边距*/
.m10{ margin:10px}
.m15{ margin:15px}
.m30{ margin:30px}
.mt5{ margin-top:5px}
.mt10{ margin-top:10px}
.mt15{ margin-top:15px}
.mt20{ margin-top:20px}
.mt30{ margin-top:30px}
.mt50{ margin-top:50px}
.mt100{ margin-top:100px}
.mbt5{ margin-bottom:5px}
.mb10{ margin-bottom:10px}
.mb15{ margin-bottom:15px}
.mb20{ margin-bottom:20px}
.mb30{ margin-bottom:30px}
.mb50{ margin-bottom:50px}
.mb100{ margin-bottom:100px}
.ml5{ margin-left:5px}
.ml10{ margin-left:10px}
.ml15{ margin-left:15px}
.ml20{ margin-left:20px}
.ml30{ margin-left:30px}
.ml50{ margin-left:50px}
.ml100{ margin-left:100px}
.mr5{ margin-right:5px}
.mr10{ margin-right:10px}
.mr15{ margin-right:15px}
.mr20{ margin-right:20px}
.mr30{ margin-right:30px}
.mr50{ margin-right:50px}
.mr100{ margin-right:100px}
.p10{ padding:10px}
.p15{ padding:15px}
.p30{ padding:30px}
.pt5{ padding-top:5px}
.pt10{ padding-top:10px}
.pt15{ padding-top:15px}
.pt20{ padding-top:20px}
.pt30{ padding-top:30px}
.pt50{ padding-top:50px}
.pt100{ padding-top:100px}
.pbt5{ padding-bottom:5px}
.pb10{ padding-bottom:10px}
.pb15{ padding-bottom:15px}
.pb20{ padding-bottom:20px}
.pb30{ padding-bottom:30px}
.pb50{ padding-bottom:50px}
.pb100{ padding-bottom:100px}
.pl5{ padding-left:5px}
.pl10{ padding-left:10px}
.pl15{ padding-left:15px}
.pl20{ padding-left:20px}
.pl30{ padding-left:30px}
.pl50{ padding-left:50px}
.pl100{ padding-left:100px}
.pr5{ padding-right:5px}
.pr10{ padding-right:10px}
.pr15{ padding-right:15px}
.pr20{ padding-right:20px}
.pr30{ padding-right:30px}
.pr50{ padding-right:50px}
.pr100{ padding-right:100px}

标签：base.css

关于比较符合语义的新闻列表

Posted on 2010/11/10, 12:57 上午, by yxq198514 and received No Comments ».

今天和公司前端MM讨论新闻的写法，想到很久以前的一个讨论结果，翻出来记录一下。

<!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>
<style type=”text/css”>
*{ padding:0; margin:0; font-size:12px; line-height:1.8}
.news{ width:200px; border:1px solid #f60}
.news ul{ padding:10px; height:100%; overflow:hidden; list-style:none}
.title{ height:26px; line-height:26px; text-align:right; background:#f60}
.title h2{ float:left}
</style>
</head>

<body>
<div class=”news”>
<div class=”title”><h2>公司新闻</h2><a href=”#”>更多</a></div>
<ul>
<li>无标题文档无标题文档无标题文档</li>
<li>无标题文档无标题文档无标题文档</li>
<li>无标题文档无标题文档</li>
<li>无标题文档无标题</li>
<li>无标题文档无标题文档</li>
</ul>
</div>
</body>
</html>

标签：XHTML, 新闻列表

自由变量记录

Posted on 2010/10/28, 2:50 上午, by yxq198514 and received No Comments ».

var name=”the window”;
var obj={
name:”my obj”,
getNameFunc:function(){
return function(){
return this.name
}
}
}
alert(obj.getNameFunc())//the window

var name=”the window”;
var obj={
name:”my obj”,
getNameFunc:function(){
var _this=this
return function(){
return _this.name
}
}
}
alert(obj.getNameFunc())//my obj

标签：this指向

关于资源站项目小结

Posted on 2010/09/10, 6:06 上午, by yxq198514 and received No Comments ».

这个项目是一个游戏和软件下载的资源站，页面层级比较简单，主要是首页，列表页面，详情页面，排行榜页面，出错页面等。

CSS: 1、很勤快的做了CSS Sprite，将有关图片做了拼合减少HTTP request请求。
         2、关于CSS RESET，正好最近看了淘宝的新框架KISSY，比较了下觉得它的效率比较高，自己原来用的那套有冗余，譬如对DIV进行了{margin:0;padding:0}，这个是完全没必要的。因此在测试阶段进行了更新。
          3、因为有下载按钮只是下资源而不跳转，为解决难看的虚线框，我按同事原来的方式写了a:active, a:focus {-moz-outline:none;outline:none;ie-dummy:expression(this.hideFocus=true);}问题解决，渲染效率未知。
          4、还有些标签在目前项目中没用到，譬如sup{vertical-align:text-top}sub{vertical-align:text-bottom}，但考虑到未来的项目改版，还是先写着吧。
        5、为了减少自己的工作量及代码数量，像排行榜等模块都用了模块化的方式去写，但是因为之间有过些改动，样式命名不是特别规则，而且很多地方复用了。
        6、对于容错性，以前一直没特别关注，但这次因为是自己套了JSTL部分，发现部分模块在没有内容的时候特别丑，或者内容多的时候就出错，因为都做了处理，譬如没图片的时候也对IMG模块做个display:block处理，这样在FF下，即使没内容也不难看，还有一些截字符的内容，我们的原则是：尽可能的让用户看到名字信息，对于看不到的且有链接的内容，进行TITLE提示，而没有采用测试提的省略号意见。
       7、在FF下tahoma 的13号汉字字体找不到，直接变成了14号字体，还好我们默认是宋体，字体样式顺序为\5b8b\4f53,sans-serif,tahoma,arial，所以没做特别处理。
      8、我当时做资源列表的时候，看着这么多内容很想用表格，反正是数据，但是职业道德告诉我，这个应该算列表，所以最后还是用DIV模拟了表格，但事后发现代码也一个都没少，自己多了不少工作量。或许小爬虫喜欢吧
     9、图片既然已经拼合了，背景图样式就写在一起用逗号隔开，这样方便维护，而且在IE6这个老变态的浏览器下，算1个请求哦，写多个IE6就算多个了，你说冤不冤啊……
10、到底要不要把CSS压缩了呢？压！用了YUI的压缩工具，发现20K的东西被压下仍旧还有19K，不知道该夸自己写的规范还是说压缩工具不管用，想到以后自己维护还要反解压，为了这个1K好像不值得，就又替换回来了。

HTML：比较顺利，按自己的理解写下去，都一次性通过了W3C校验，唯独在星星打分模块，原来同事是用了金银2色的星星图片，一开始我也照搬照抄，后来看了其它几个大站的写法，要求换成比较科学的背景写法，他们又多辛苦了一下。

JS:之前在原生JS和JQUERY之间挣扎了下，到底用哪种方式呢，后来同事说要用到JQ里的AJAX封装方法，心中一乐，那就JQ吧，事后发现省去了不少浏览器兼容方面的麻烦。整个项目中用到很多TAB切换，我又写了个方法调用。还有关于页面打开的方式，原来是用window.open或者location.href这样的方式，阻止了原生态的A HREF方法，后来考虑到容错性，又整体换了回来，我也觉得有默认的干嘛不用？据说是为了鼠标点上去除链接好看……

JSTL:这块对我而言是新内容。学到了知识点记录一下，判断最后一个状态<c:when test=”${s.last}”>和判断当前状态 <c:if test=”${parentMenu.id==item.id}”>,还有排序可以用s.index(从0开始)

<c:forEach var=”item” items=”${GAMELIBID.childrenMenu}” varStatus=”s”>
<c:if test=”${parentMenu.id==item.id}”>
<c:choose>
<c:when test=”${s.last}”>
<li><a href=”/resource/resourceList.html?menuId=${item.id}” title=”${item.name}”>${item.name}</a></li>
</c:when>
<c:otherwise>
<li><a href=”/resource/resourceList.html?menuId=${item.id}” title=”${item.name}”>${item.name}</a></li>
</c:otherwise>
</c:choose>
</c:if>
<c:if test=”${parentMenu.id!=item.id}”>省略了…… </c:if>
</c:forEach>

一开始以为这里的$会和JQ理的$冲突，事后发现一个是用{},一个是()，因此相安无事，和平共处。

用户体验：很不习惯首页那个轮播的BANNER从右到左带着我的眼睛转动了600多PX，觉得眼珠上下滚动距离小，比较合理。和交互人员沟通了可人家说：QQ就是这么做的，好吧，一句话被顶回来了。仔细分析了，发现阿里的产品多是上下滚动，腾讯的产品为左右滚动，但上个月他们突然改版了，换成了淡入淡出的效果，估计是CDC部门发现了这个问题吧，O(∩_∩)O哈哈~全信书不如无书！