前端设计_页面重构

‘return false’ vs ‘e.preventDefault()’

Jessica — Fri, 13 Apr 2012 08:47:11 +0000

介绍下’return false’和’event.preventDefault()’之间的不同开始，先知道preventDefault()

preventDefault() 定义

取消事件的默认动作。

比如Jessica,默认行为是跳转链接到http://www.funnyapple.com。那么preventDefault可以阻止它的默认行为而执行其他事件。

再来说说return false，它会阻止所有事件。

换句话来说


function(){
  return false;
}

// IS EQUAL TO

function(e) {
  e.preventDefault();
  e.stopPropagation();
}

查看demo

关于meta keywords那些事儿

Jessica — Sat, 03 Dec 2011 16:23:59 +0000

昨天有位童鞋问我，有没有原始的文章说seo可以不用考虑keywords。我懵了，据记忆中所记得都要考虑keywords。但人家问了，说明应该是有搜索引擎已经放弃考虑keywords了，查了wiki和msdn。

摘自wiki：The keywords attribute

Search engines began dropping support for metadata provided by the meta element in 1998,
and by the early 2000s, most search engines had veered completely away from reliance on meta
elements. In July 2002, AltaVista, one of the last major search engines to still offer support, finally
stopped considering them.

No consensus exists whether or not the keywords attribute has any effect on ranking at any
of the major search engines today. It is speculated that it does, if the keywords used in the meta
can also be found in the page copy itself. With respect to Google, thirty-seven leaders in search
engine optimization concluded in April 2007 that the relevance of having your keywords in the
meta-attribute keywords is little to none and in September 2009 Matt Cutts of Google announced
that they are no longer taking keywords into account whatsoever. However, both these articles
suggest that Yahoo! still makes use of the keywords meta tag in some of its rankings. Yahoo! itself
claims support for the keywords meta tag in conjunction with other factors for improving search
rankings. In Oct 2009 Search Engine Round Table announced that "Yahoo Drops The Meta Keywords
Tag Also" but informed us that the announcement made by Yahoo's Senior Director of Search was
incorrect. In the corrected statement Yahoo Senior Director of Search states that "...What changed
with Yahoo's ranking algorithms is that while we still index the meta keyword tag, the ranking
importance given to meta keyword tags receives the lowest ranking signal in our system.... it will
actually have less effect than introducing those same words in the body of the document, or any
other section.

摘自msdn:


HTML meta elements can be used to improve search-engine listings. The "keywords" meta
element is either not used at all or is given very little weight by the major search engines.

If there is no "keywords" meta element in the head element of the page markup, the meta
element is added to the page when the page is rendered. If the page markup already has a
"keywords" meta element, this property gets or sets the content attribute of the meta element.

在这里可以看出主流的搜索引擎算法中已经放弃考虑keywords，除了极少个数例如Yahoo还在考虑。作为本土的主流搜索引擎百度是否考虑？下面是我摘自《Search Engine Optimization for Baidu》的原话。


Like Google, Title tag is also very important. Unlike Google, Meta description and Meta
keywords tags are still very useful in improving ranking in Baidu. As always, we do recommend
clients add meaningful Meta description and keyword tags because they are still important for
some popular localized search engines.

从上述可以看出，百度搜索引擎还是考虑keywords和description。

让我们对比下google和baidu的关键因素的不同之处

	Google	Baidu
Title	重要	重要
Meta Description	小	重要
Meta Keywords	小	重要
Heading Tags	重要	重要
Alt Tags	小	重要
Internal Anchor Text	重要	小
External Anchor Text	重要	小
Quantity of Inbound Links	小	重要
Quality of Inbound Links	重要	小
Redirects and Robots.txt	重要	小

唉，悲催，这样子其实做国内站点的优化还是得堆关键字~~~

竟然作为本土老大的百度，那么就来总结一下百度的seo优化tips

1. Title and Meta Tags
2. Content
3. Linking
4. Content Language(由于百度是在中国大陆发展的，如果你的网站有简体中文，你的网站在百度上就很容易被搜索出来)
5. Alt Tag
6. Server
7. Geographical Market（中国是一个大市场，如果你的站点用户群体主要是中国大陆的，你的站点应当使用简体中文；如果你的目标市场是香港或者台湾，你的站点应该使用繁体中文。）

关于JS预解析一道题

Jessica — Sun, 09 Oct 2011 10:54:34 +0000


var i=10;
function a() {
    alert(i);
    var i = 2;
    alert(i);
};
a();

挺经典的一道题，结果出得让人不得不觉得奇怪，想知道是虾米回事，内部到底是怎么执行的。

先看JS的执行行顺序

如果一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），它们的运行顺序是：

步骤1. 读入第一个代码段（js执行引擎并非一行一行地执行程序，而是一段一段地分析执行的）
步骤2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到步骤5
步骤3. 对var变量和function定义做“预解析”（永远不会报错的，因为只解析正确的声明）
步骤4. 执行代码段，有错则报错（比如变量未定义）
步骤5. 如果还有下一个代码段，则读入下一个代码段，重复步骤2
步骤6. 结束

原来JS在执行过程之前，会对【var】和【function】定义做“预解析”。

解析引擎以块为单位级别，执行所有Var变量的创建，并赋予一个初始值undefined。这样子就能理解了为什么弹出undefined 2这样的答案而不是10 2。

CSS Reddit Alien

Jessica — Sat, 08 Oct 2011 11:16:39 +0000

今天看到这篇有趣的文章，现在到处充斥着用CSS3实现各种效果，这篇就只使用简单的font-size，text和position实现的Reddit Alien。粗略地翻译了一下~~~

CSS很有趣。今天我用纯CSS和文本做一个Reddit alien 的 logo。它实际是一个链接，当你鼠标划上去时，会有所改变。我不是第一个用这种方式画图的人，Roman Cortes画的CSS Homer是最好的CSS ASCII 艺术例子之一。

用文本和CSS画图的好处是可扩展的。如果你在你的浏览器改变字的大小，alien也随着变大变小。因为文字是矢量图形——这意味着CSS ASCII艺术是矢量艺术的一种格式。这也意味着不管你画多大，文件的大小一直都是不变的。如果你需要放一个大的Reddit alien在你的网站，图片的话大于8kb。你将更会（从文件大小方面考虑）选择用CSS版本。

那它是怎么做的呢？

实际很简单。这个alien是没有应用任何CSS——剥离掉后的裸奔链接

OO_()()OOOO/-oOOOOOOOO••()()

The HTML



O
O
_
(
)
(
)
O
O
O
O
/
-
o
O
O
O
O
O
O
O
O
•
•
(
)
(
)

The CSS

CSS也非常简单。每个字符都是绝对定位的，单位是用em。这样允许我们更容易通过改变font-size这个参数从而达到改变alien的大小。


#r-a {
font-size:3em; /* change his size here */
width:5em;
height:3.3em;
overflow:hidden;
font-family:Verdana, Arial, sans-serif;
float:left;
background:#fff;
position:relative;
text-decoration:none;
color:#000;
}
#r-a span, #r-a strong {margin:0;padding:0;position:absolute;}
#r-a .a {left:1.65em;bottom:-.63em;}
#r-a .b {right:1.65em;bottom:-.63em;}
#r-a .c {left:.78em;bottom:-.08em;font-size:2.3em;}
#r-a .d {left:1em;bottom:0;font-size:1.8em;}
#r-a .e {right:1em;bottom:0;font-size:1.8em;}
#r-a .f {left:1.9em;bottom:.55em;font-size:.9em;}
#r-a .g {right:1.9em;bottom:.55em;font-size:.9em;}
#r-a .h {left:.84em;bottom:.55em;font-size:1.7em;}
#r-a .i {right:.84em;bottom:.55em;font-size:1.7em;}
#r-a .j {left:.83em;bottom:.41em;font-size:1.95em;}
#r-a .k {right:.83em;bottom:.41em;font-size:1.95em;}
#r-a .l {left:2.3em;bottom:2.1em;}
#r-a .m {left:2.57em;bottom:2.52em;}
#r-a .n {left:4.8em;bottom:4.55em;font-size:.6em;}
#r-a .o {left:1.8em;bottom:2.4em;font-size:.8em;}
#r-a .p {right:1.8em;bottom:2.4em;font-size:.8em;}
#r-a .q {left:1.01em;bottom:.6em;color:#fff;font-size:1.63em;}
#r-a .r {right:1.01em;bottom:.6em;color:#fff;font-size:1.63em;}
#r-a .s {left:1.14em;bottom:.8em;color:#fff;font-size:1.4em;}
#r-a .t {right:1.14em;bottom:.8em;color:#fff;font-size:1.4em;}
#r-a .u {left:1.53em;bottom:.9em;font-size:1.3em;}
#r-a .v {left:1.515em;bottom:.955em;font-size:1.29em;color:#fff;}
#r-a .w {left:2.7em;bottom:2.3em;font-size:.7em;color:#f30;}
#r-a .x {right:2.7em;bottom:2.3em;font-size:.7em;color:#f30;}
#r-a .y {left:.7em;bottom:1em;font-size:1.3em;color:#f30;}
#r-a .z {right:.7em;bottom:1em;font-size:1.3em;color:#f30;}
#r-a .yy {left:0;bottom:.495em;font-size:2em;color:#f30;}
#r-a .zz {right:0;bottom:.495em;font-size:2em;color:#f30;}
#r-a .y, #r-a .z, #r-a .yy, #r-a .zz {display:none;}
#r-a:hover .y, #r-a:hover .z, #r-a:hover .yy, #r-a:hover .zz {display:block;}

鼠标划过试看看~~~

OO_()()OOOO/-oOOOOOOOO••()()

[每日一练]面向对象JavaScript继承例子一

Jessica — Thu, 14 Jul 2011 09:54:50 +0000


	function Person(){
		this.name;
		this.age;
		this.sex;

		this.getName = function(){
			return this.name;
		}

		this.getSex = function(){
			return this.sex;
		}

		this.getAge = function(){
			return this.age;
		}
	}

	function Girl(){
		this.sex = "female";
		this.isSingle = true;
	}

	Girl.prototype = new Person();
	var jessica = new Girl();
	jessica.name = "Jessica";
	jessica.age = "24";

RyanDing指点出JS也可以写得很有“性能”。上一段JS代码在效率上就很有问题，每次实例化的时候都需要将 getName，getSex ， getSex 给实例化出来。这些东西可以放在js特有的原型内。

对比下修改后的JS代码：


		function Person() {
		    this.name;  // 值传递，每次实例化后都会重新建立一个副本
		     this.age;
		    this.sex;
		}

		//实例化对象后进行引用传递不会建立新的内存副本。提高js性能
		Person.prototype.getName = function () {
		    return this.name;
		}

		Person.prototype.getSex = function () {
		    return this.sex;
		}

		Person.prototype.getAge = function(){
			return this.age;
		}

        function Girl() {
            this.sex = "female";
            this.isSingle = true;
        }

        // 将Girl的原型指向Person的一个实例
        // 因为Person的实例可以调用Person原型中的方法, 所以Girl的实例也可以调用Person原型中的所有属性
        Girl.prototype = new Person();
        var jessica = new Girl();
        jessica.name = "Jessica";
        jessica.age = "24";

在面向对象的语言中，使用类来创建一个自定义对象。在JavaScript中一切都可以是对象，用什么办法来创建一个自定义对象？

在这引入另外一个概念 – 原型（prototype）。函数Person称为构造函数，也就是创建自定义对象的函数。可以看出，JavaScript通过构造函数和原型的方式模拟实现了类的功能。 Girl从Person继承了原型prototype中的所有属性。

对比一下C#代码：


	public class Person{
		public string name{
			set;
			get;
		}
		public string sex{
			set;
			get;
		}
		public string age{
			set;
			get;
		}
	}

	public class Girl : Person{
		base.sex = "female";
		public bool isSingle = true;

	}

	static void Main(string[] args){
		Girl jessica = new Girl();
		jessica.name = "Jessica";
		jessica.age = "24";
	}

继续学习ing……

文章-等不到的爱

Jessica — Wed, 13 Jul 2011 06:20:17 +0000

《等不到的爱》未知是可怕的，而等待着未知的到来就让人无法释怀，可是“如果不是为那个期待”“如果拥抱没那么精彩”，有怎么会有等待？等待只是为了给寂寞找个借口，给伤心找个理由，或许当等待只能成为等待的时候，我们就能释怀。

MP3地址：等不到的爱

你深邃的眼眸想要透漏什么密码

犹豫的嘴角躲在严肃的背影下

压抑的空气回绕闭塞的城堡里

谜一般的天鹅

有你说不尽的故事

孤独的身影

只有钟声陪伴

敲进了城堡却敲不进你的心

冷淡的表情

只剩风霜遮掩我的身躯

遮住了天地遮不住你的情　

你在等待着谁

建筑了城堡

等待着天鹅的栖息

藏不住你空虚的心灵

你在眺望着谁

拥有了世界

却拥有不了平凡的爱

[每日一学]live vs bind

Jessica — Mon, 18 Apr 2011 04:04:45 +0000

live()与bind()不同的是一次只能绑定一个事件。

这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。

要移除用live绑定的事件，请用die方法

Html


		A1
		A2
		A3
		
			node one
			node two
		
		添加新元素

Jquery

		$(".a1").live("click",function(event){
			alert("A1 with live event");
		})

		$(".a2").click(function(){
			alert("A2 with normal click event");
		})

		$(".a3").bind("click",function(){
			alert("A3 with bind event");
		})

		//测试die
		//$(".a1").die("click");   //click事件被移除
		//$(".a2").die("click");   //click事件依然有效
		//$(".a3").die("click");   //click事件依然有效

		//测试unbind
		//$(".a1,.a2,.a3").unbind("click");  //A1的click事件依然有效，A2和A3的click事件被删除

		//测试live和bind的区别
		/*$("ul > li > a").live("click",function(event){
			alert("test");
		})*/
		/*$("ul > li > a").bind("click",function(){
			alert("test");
		})*/
		/*$(".addli").click(function(){
			$("ul").append('new node');
		})*/

四月份随笔

Jessica — Thu, 07 Apr 2011 02:47:51 +0000

我来上海8个月，很多人不理解我为什么离开厦门离开外企，即使这段时间同事叫我回去我依然坚持自己的决定，我一直知道自己想要什么，为什么要离开，我不停脚步地一直往前走，有人说我走得洒脱，走得勇敢，只因为我一直朝着目标，朝着梦想前进。好比如在黑暗中有一束光，你不在乎你脚下的路是有多崎岖，有多坎坷。经常我跟我朋友们说：你有自己的职业计划和人生计划吗？如果我在此刻跌倒，我会想把某一段计划提前，这过程只打乱了这一段的步伐，并未改变主干路线。我不想做温水里的青蛙！

这一路走得不孤单，我碰到很多好人，一直帮助我，让我这一年多里学到很多，我才能每一步走得这么坚定！

四月伊始，坚持每天学习，每天看书，知识是装备，不停地升级更换自己装备，才能有更强更有力的战斗力，才能在游戏中存活。人生就是一场荒谬的游戏，输输赢赢，过程是享受……

windows media player播放器把div给遮住的问题

Jessica — Mon, 24 Jan 2011 09:37:15 +0000

通常，我们碰到flash把div给遮住的问题。想到的解决方案都是：

IE：


Firefox：
	
今天别人请教我的问题是windows media player播放器把div层给遮盖住。我想到的是用iframe,然后z-index关系是div>iframe>object
杯具的是，竟然不行，可把我纠结死了。后来查找到的解决的方法是：
		

额外查了一下windowlessVideo的属性（from msdn）



Remove spaces between inline-block elements
Jessica — Wed, 10 Nov 2010 09:27:03 +0000
今天下午三思问我，关于inline-block元素之间的缝隙怎么去除，怎么做到inline一样？

其实对于这个问题的解决方法就是删除换行。

不过从重构人员给出“产品”给研发，为了便于研发嵌套页面，一般都是给很清晰的代码，如：


在此我们又要保证清晰的代码，又要保证压缩前与压缩后，我们的inline-block元素之间都不希望出现space，那怎么办？
对于重构和研发配合之间这是一种最优的解决方案：

为什么说它是最优解决方案呢？在最后产出的页面，一般都会进行压缩操作删除空格及注释之类。你觉得这种方案好吗？如果不好，你有什么更好的方法一起分享？