西风坊

博客更换新域名: f2e.me

如题，blog更换新的域名：http://f2e.me 了
feed 地址：http://f2e.me/feed/

欢迎访问！！

解释下：f2e = front-end engineer 前端工程师的意思，哈哈

做页面的一些小伎俩

这段时间写页面时的一些小总结：
1、边框色的运用：

像上图一样，当鼠标移动上去之后需要给a链接增加一个边框。本来只是一句话事情。不过如果只是简单地加一个border的话被框起来的阿里导航几个字会有一点抖动，比较影响美观。对这么一个小应用来说要分别算宽高显然太麻烦了点。于是取巧了下，默认状态下把所有俩接的边框都设上，然后设置border-color的颜色和背景色相同，这样鼠标上移的时候只要改版边框的颜色就ok了。

2、<input  />输入框中的提示文案：

这样的输入框哪里都可以看到，，先预设value值=“请输入产品名称”，当文本框获得焦点的时候把输入框的value值置空。但是这样把这样的文案直接写在value里面本身就不是什么很好的主意，如果禁用js？

根据实际情况，在上图的应用中，input值没有明显的label标签，所以可以利用将这段提示文案放入label中，然后绝对定位到input输入框里面去。当输入框获取焦点的时候把label隐藏掉，这样两者就不会互相干扰了。

<div id="container">
	<label id="lab1" for="input1">请输入产品名称</label>
	<input id="input1" type="text" />
</div>

	#container{
		position:relative;
	}
	#lab1{
		position:absolute;
		top:0;
		left:0;
		display:none;
		color:#ccc;
	}

		window.onload = function(){
			document.getElementById('lab1').style.display = 'block';
			document.getElementById('input1').onfocus = function(){
				document.getElementById('lab1').style.display = 'none';
			}
			document.getElementById('input1').onblur = function(){
				document.getElementById('lab1').style.display = 'block';
			}
		}

3、switch case

都知道在多选择条件的情况下，switch case的性能比if elseif 好。可以有些时候（比如是很多的计算表达式）判断的条件比较特殊，好像switch起来比较麻烦。

其实只要能用if elseif的地方全都能改成switch。只要switch一个true，然后把每个表达式作为case去匹配就ok了：

 switch (true){
    case 1+1 == 2:
       //do something
       break;
    case 2+2 == 5:
        //do something
        break;
}

待续……

利用框架来支持设计规范

一直以来我都不是同为设计也是有规则可寻的（至少是有原则可依的）。现在整个UED都BU掉了，各条产品线基本上是各自为战状态，网站产品也越发显得散乱。此时设计规范对UED也显得越发重要。昊歌有句话说得很对，那么多年来我们一直在担心，担心规范被人挑战，担心标准本身的问题，结果发现担心到最后我们什么都没有……

所以，先统一标准，再优化标准。

之前也看了淘宝的DPL，其实这些绝大多数都有，个人觉得这些东西没有很好的执行的最大问题在于缺少一个终端的解决方案：我们定了icon库，但在使用的时候还要去专门库里寻找，前端还要切割，重新定义背景……

这里想说的是，设计规范（标准）的推广也应该有一个适合终端框架。于是，结合目前自己正在做的fdevlib库来谈下框架和标准之间的依存关系：

·  视觉方面：1、形、色、质上的约定，产物应该是类似于淘宝“淘斯基”或是原先社区方面做过的色彩标准之类的约定，对应在框架上就应该是皮肤。（目前fdevlib里还缺少皮肤这一块的内容）2、固定标识的制定，比如所有的icon及其含义的确定，这方面对应于框架中的icon.css。
Read the rest of this entry »