记录在前端路上的点点滴滴

jQuery: 通过事件委派一次绑定多种事件,以减少事件冗余

jQuery的最大特色之一就是方法连缀写法,这样的书写方式使得阅读起来更加方便。于是乎,在日常的开发中大量使用连缀写法,而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件,便于阅读和书写,习惯了使用连缀写法,但这样的书写方式会造成时间的冗余。
1.事件冗余:多个事件方法中多次调用相同的代码

下面的代码是一个事件方法连缀的写法:

jQuery(function($) {
	$('
').hide().appendTo('body'); var tipTitle = ''; $('#mytable').bind('mouseover', function(event) { var $link = $(event.target).closest('a'); if ($link.length) { var link = $link[0]; tipTitle = link.title; link.title = ''; $('#livetip').css({ top: event.pageY + 12, left: event.pageX + 12 }) .html('
' + tipTitle + '
' + link.href + '
') .show(); }; }).bind('mouseout', function(event) { var $link = $(event.target).closest('a'); if ($link.length) { $link.attr('title', tipTitle); $('#livetip').hide(); }; }).bind('mousemove', function(event) { var $link = $(event.target).closest('a'); if ( $link.length) { $('#livetip').css({ top: event.pageY + 12, left: event.pageX + 12 }); }; }); });

其中第5|6行、第18|19行、第24|25行多次地使用了同样的一段代码去判断事件对象是否存在。这不管是从代码效率还是代码文件大小的方面来说都是不合理的方法。
2.事件委派:一次性绑定多个事件,根据事件类别委派相应的操作

为了更好地优化上面的代码,可以通过事件委派来修改代码,修改后的代码如下:

jQuery(function($) {
	var $liveTip = $('
').hide().appendTo('body'); var tipTitle = ''; $('#mytable').bind('mouseover mouseout mousemove', function(event) { var $link = $(event.target).closest('a'); if (!$link.length) { return; } var link = $link[0]; if (event.type == 'mouseover' || event.type == 'mousemove') { $liveTip.css({ top: event.pageY + 12, left: event.pageX + 12 }); }; if (event.type == 'mouseover') { tipTitle = link.title; link.title = ''; $liveTip.html('
' + tipTitle + '
' + link.href + '
') .show(); }; if (event.type == 'mouseout') { $liveTip.hide(); if (tipTitle) { link.title = tipTitle; }; }; }); });

该段代码中一次性地将多个事件绑定到一个待处理的DOM对象之上,在代码的内部通过判断事件的类别来委派不同的处理代码。这样可以避免代码的重复定义,以达到避免时间冗余的效果。

  • Share/Bookmark

在网页中嵌入任意字体

字体使用是网页设计中不可或缺的一部分。经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:1. 不可能大范围的使用该字体;2. 图片内容相对使用文字不易修改;3. 不利于网站SEO(主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素)。网络上有一些使用sIFR技术、或javascript/flash hack的方法,但实现起来或繁琐,或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。

【第一步】

获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。

.TTF或.OTF,适用于Firefox 3.5、Safari、Opera
.EOT,适用于Internet Explorer 4.0+
.SVG,适用于Chrome、IPhone
下面要解决的是如何获取到某种字体的这三种格式文件。一般地,我们在手头上(或在设计资源站点已经找到)有该字体的某种格式文件,最常见的是.TTF文件,我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel提供的在线字体转换服务获取,它允许我们选择需要的字符生成字体文件(在服务的最后一个选项),这样就大大缩减了字体文件的大小,使得本方案更具实用性。

【第二步】

获取到三种格式的字体文件后,下一步要在样式表中声明该字体,并在需要的地方使用该字体。

字体声明如下:

@font-face {
	font-family: 'fontNameRegular';
	src: url('fontName.eot');
	src: local('fontName Regular'),
              local('fontName'),
              url('fontName.woff') format('woff'),
              url('fontName.ttf') format('truetype'),
              url('fontName.svg#fontName') format('svg');
}
/*其中fontName替换为你的字体名称*/
  • Share/Bookmark

(转)草根创业者杨勃:玩出来的”豆瓣”网

从2004年10月开始,北京朝阳门丰联广场的星巴克咖啡店多了一位常客。一个30多岁,衣着休闲的男子,肯定会在中午背着笔记本上门,然后打开电脑,旁若无人的工作到下午4点左右。店员们早就摸透了他的脾气,直接上一个中杯的今日咖啡就好。
此公便是豆瓣网创始人杨勃,网名“阿北”,豆瓣网几乎就是在北京和上海的几家星巴克写成的。“丰联广场星巴克有个小伙子特别好奇,知道我是在写网站后,经常问我还有多久才上线”,杨勃有点遗憾,如果不是搬家去了上海,全部店员都可能成为豆瓣的用户。
从2005年3月至今,由1个人开发、4个人运营的书评、影评、乐评网站豆瓣网,已经有5万多注册用户,成了web 2.0们的代表。这对于曾经把物理作为事业,“计算机不过是工具和兴趣”的杨勃来说是“玩”出 点明堂。
纸上谈兵
1983年的某一天,陕西工学院(现在的陕西理工学院)机房的老师有点诧异。一个初三学生,从口袋里掏出个写满代码的纸条,请求帮忙跑一下这个“程序”。实际上,这群来自附属中学的学生是被安排来参观“像乌龟壳、速度还不如PC”的苏联计算机,在这以前他们只见过计算器。
“那个老师最后还是帮我输入了程序”杨勃回忆说,这个计算“把1元钱换成零钱有多少种换法?”的程序,是他照着《少年科学》描述的方法编成的,当时的想法是借着参观的机会借机器测试一下是不是正确,结果“虽然得时间长了点,但最终还是得出了结果”,从此杨勃就开始对计算机产生了兴趣。
对计算机的兴趣开始并未成为杨勃的追求,“父母认为,数理化才是科学,计算机不过是工具,我也那样认为”,于是从清华到加州大学他的专业一直是物理,其间编程只是“玩”。“当时在清华上机需要‘机票’,撕掉一个角的票只能上不带图形卡的电脑,所以我就拿着带角的票到处寻找有图形卡的机器,这样就可以玩游戏,编游戏”,“在美国读博士的时候,一到假期先去电脑公司编程挣足1000-2000美元,然后就出去旅行,从西南角的南加州开车到西北角的加拿大边境”。毕业后,杨勃去了IBM公司做硬盘的计算模型。
2000年前后的归国创业热潮也影响了杨勃,他早就不满足于安逸“在IBM,你可以看到数十年后的发展,职位,甚至退休后一共可以赚多少钱”。回国后杨勃成了一家物流咨询企业的CTO,直到2004年初。
从驴宗到豆瓣
2004年7月中旬,回到美国“找感觉”的杨勃来到一家华尔街企业面试,“面试官也是一个华人,他说很羡慕我,有在大陆创业的经验,他问我为何不留在大陆继续创业,留在华尔街虽然很安逸但却没有发展”。杨勃接触了很多公司后发现已经因为创业“心野了”,已经不能回到“朝九晚五”的生活,在回国的飞机上杨勃打定了主意,“一定要自己创业、一定要做自己喜欢的事情”、一定要做互联网”。
“我的想法是和朋友聊天得到的”杨勃说,“他们点子很多,提出了很多建议,直到一天说起旅游的”,杨勃的朋友们讨论,“在开车去云南,青海时发现了一些小的旅店,酒店特别好,特别想推荐给别人,这样就可以分享信息并且约定搭伴旅行的伙伴”。
2004年9月杨勃为自己的旅行网站制作了商业计划书,并且将这个网站命名为“驴宗”,在论证这个商业计划时一些朋友认为,自助旅游的人群还是太少了,但是这个网站本身的想法更好,如果找一个更宽的领域可能有更大的发展。朋友的建议让杨勃放弃了“驴宗”,将眼光投到“书”这个更宽广的领域。
杨勃说,放弃“旅游”选择“书”是经过很仔细的分析的。考虑再三,杨勃将豆瓣的核心思想总结为,“可以发现不同的东西,并且适合自己”,他解释说,朋友的推荐往往对购买某种产品非常关键,现在豆瓣扩大了推荐的群体,你会相信特定陌生人的推荐,这“可以理解为一种以书等具体物体为媒介的人脉关系网”。
在确定以书为主要方向前,有人曾建议用时髦的数码产品、汽车等,但是杨勃认为手机的新品也就那么几十多种,很容易研究透。对每个手机的评价虽然具有价值,但是让大众参与,“让每个人都点评的价值不大”。这种产品更适合由几个工程师完成评论,采用类似硬件网站目前的模式。“书就不同了,每年出版的书大约数十万种,没有人知道全部的种类,因此需求十最为旺盛的,价值也是最大的”。
滚雪球
从2004年10月开始开发经历了5个月,2005年3月6日,杨勃的豆瓣网开张了,并且第一天就有用户注册。杨勃说那时的搜索引擎还找不到豆瓣,第一个用户可能是在寻找域名时无意敲打douban进入的。虽然第一个用户只“注册了个ID,到处看了看,没有做任何事情,并且此后也没有再来”但依然令杨勃不能忘记。
“需要用户产生内容的网站开始最困难,需要想办法找些基础的内容让用户来参与,然后产生滚雪球效应”为此豆瓣想到的办法是提供比价系统。这个系统实际上是一个搜索引擎,用户可以利用这个搜索引擎找到同一本书在卓越或当当的价格。
“开始我以为搜索是很困难的,试着写了一个,结果一次就成功了,此后我们才开始做网站本身的界面等等”,杨勃特别欣赏图片网站flickr那种简洁的页面,因此豆瓣的用户界面“借鉴了flickr”。后台的技术也是由杨勃一人完成的,“豆瓣的规划就是冲着100万用户去的,而且是一个纯动态的网站,因此我特别重视服务器端的技术“杨勃称,目前豆瓣网虽然有5万注册用户,但是只有一台单AMD处理器的服务器,内存刚被升到2G,到“100万用户时,最多10台服务器”。
在用户、技术积累改进的同时,豆瓣网的功能也在积累和改变。开始豆瓣只有书评,推荐方式只有2种,一种是有每个用户通过自己喜欢的一些书找到同好的人,然后根据这些同好的列表获得推荐;另外一种是机器根据用户的数据库信息进行推荐。后来,随着用户的创意出现了自由组合的小组,同城板块、二手交换等。
豆瓣的生意
“网站开张第一个天就有人通过豆瓣去当当买书”杨勃已经不能记起第一笔生意的具体信息,他表示豆瓣网的收入来自与书商分帐和广告,目前的营收可以支付网站的日常运营费用。
像所有Web 2.0的网站那样,杨勃也宣称对用户“永远免费”,“我们的核心价值是让用户发现新东西,如果我们做的好,用户就会发现有价值,就会去买。这样我们等于帮助商家做了营销,因此我们会与之分帐”,目前豆瓣已经在和当当、卓越分帐,杨勃称来自豆瓣的的10次点击就会发生一次购买行为。豆瓣未来另外一个营收手段是广告。
“我们还可能增加书、电影、音乐以外的产品,但是我认为最有实质性帮助的仍然是英文版豆瓣”李勃认为,“美国人喜欢读书,而且书卖得贵”,因此英文的市场更大,更加成熟,“我们已经打算和亚马逊合作,目前英文服务器已经架设完成,英文版的开发也基本完成”。
豆瓣目前在国内的工作重点已经转移到推广上:和读书等传统媒体合作,加强广告宣传等都已经提到议事日程。11月23日记者见到杨勃时,他正在把豆瓣迁来北京,在北京注册公司,招兵买马,他说“考虑到文化圈子,人才因素,豆瓣还是应该来北京发展”。
在资本方面,豆瓣早期的资金不过是几个朋友总额不到二十万元人民币的“天使投资”,杨勃说已经有风险投资找到门上了,不过他个人还是倾向再找一些愿意长期投资的“天使投资”。(完)

从2004年10月开始,北京朝阳门丰联广场的星巴克咖啡店多了一位常客。一个30多岁,衣着休闲的男子,肯定会在中午背着笔记本上门,然后打开电脑,旁若无人的工作到下午4点左右。店员们早就摸透了他的脾气,直接上一个中杯的今日咖啡就好。
此公便是豆瓣网创始人杨勃,网名“阿北”,豆瓣网几乎就是在北京和上海的几家星巴克写成的。“丰联广场星巴克有个小伙子特别好奇,知道我是在写网站后,经常问我还有多久才上线”,杨勃有点遗憾,如果不是搬家去了上海,全部店员都可能成为豆瓣的用户。
从2005年3月至今,由1个人开发、4个人运营的书评、影评、乐评网站豆瓣网,已经有5万多注册用户,成了web 2.0们的代表。这对于曾经把物理作为事业,“计算机不过是工具和兴趣”的杨勃来说是“玩”出 点明堂。
纸上谈兵1983年的某一天,陕西工学院(现在的陕西理工学院)机房的老师有点诧异。一个初三学生,从口袋里掏出个写满代码的纸条,请求帮忙跑一下这个“程序”。实际上,这群来自附属中学的学生是被安排来参观“像乌龟壳、速度还不如PC”的苏联计算机,在这以前他们只见过计算器。
“那个老师最后还是帮我输入了程序”杨勃回忆说,这个计算“把1元钱换成零钱有多少种换法?”的程序,是他照着《少年科学》描述的方法编成的,当时的想法是借着参观的机会借机器测试一下是不是正确,结果“虽然得时间长了点,但最终还是得出了结果”,从此杨勃就开始对计算机产生了兴趣。
对计算机的兴趣开始并未成为杨勃的追求,“父母认为,数理化才是科学,计算机不过是工具,我也那样认为”,于是从清华到加州大学他的专业一直是物理,其间编程只是“玩”。“当时在清华上机需要‘机票’,撕掉一个角的票只能上不带图形卡的电脑,所以我就拿着带角的票到处寻找有图形卡的机器,这样就可以玩游戏,编游戏”,“在美国读博士的时候,一到假期先去电脑公司编程挣足1000-2000美元,然后就出去旅行,从西南角的南加州开车到西北角的加拿大边境”。毕业后,杨勃去了IBM公司做硬盘的计算模型。
2000年前后的归国创业热潮也影响了杨勃,他早就不满足于安逸“在IBM,你可以看到数十年后的发展,职位,甚至退休后一共可以赚多少钱”。回国后杨勃成了一家物流咨询企业的CTO,直到2004年初。
从驴宗到豆瓣2004年7月中旬,回到美国“找感觉”的杨勃来到一家华尔街企业面试,“面试官也是一个华人,他说很羡慕我,有在大陆创业的经验,他问我为何不留在大陆继续创业,留在华尔街虽然很安逸但却没有发展”。杨勃接触了很多公司后发现已经因为创业“心野了”,已经不能回到“朝九晚五”的生活,在回国的飞机上杨勃打定了主意,“一定要自己创业、一定要做自己喜欢的事情”、一定要做互联网”。
“我的想法是和朋友聊天得到的”杨勃说,“他们点子很多,提出了很多建议,直到一天说起旅游的”,杨勃的朋友们讨论,“在开车去云南,青海时发现了一些小的旅店,酒店特别好,特别想推荐给别人,这样就可以分享信息并且约定搭伴旅行的伙伴”。
2004年9月杨勃为自己的旅行网站制作了商业计划书,并且将这个网站命名为“驴宗”,在论证这个商业计划时一些朋友认为,自助旅游的人群还是太少了,但是这个网站本身的想法更好,如果找一个更宽的领域可能有更大的发展。朋友的建议让杨勃放弃了“驴宗”,将眼光投到“书”这个更宽广的领域。
杨勃说,放弃“旅游”选择“书”是经过很仔细的分析的。考虑再三,杨勃将豆瓣的核心思想总结为,“可以发现不同的东西,并且适合自己”,他解释说,朋友的推荐往往对购买某种产品非常关键,现在豆瓣扩大了推荐的群体,你会相信特定陌生人的推荐,这“可以理解为一种以书等具体物体为媒介的人脉关系网”。
在确定以书为主要方向前,有人曾建议用时髦的数码产品、汽车等,但是杨勃认为手机的新品也就那么几十多种,很容易研究透。对每个手机的评价虽然具有价值,但是让大众参与,“让每个人都点评的价值不大”。这种产品更适合由几个工程师完成评论,采用类似硬件网站目前的模式。“书就不同了,每年出版的书大约数十万种,没有人知道全部的种类,因此需求十最为旺盛的,价值也是最大的”。
滚雪球从2004年10月开始开发经历了5个月,2005年3月6日,杨勃的豆瓣网开张了,并且第一天就有用户注册。杨勃说那时的搜索引擎还找不到豆瓣,第一个用户可能是在寻找域名时无意敲打douban进入的。虽然第一个用户只“注册了个ID,到处看了看,没有做任何事情,并且此后也没有再来”但依然令杨勃不能忘记。
“需要用户产生内容的网站开始最困难,需要想办法找些基础的内容让用户来参与,然后产生滚雪球效应”为此豆瓣想到的办法是提供比价系统。这个系统实际上是一个搜索引擎,用户可以利用这个搜索引擎找到同一本书在卓越或当当的价格。
“开始我以为搜索是很困难的,试着写了一个,结果一次就成功了,此后我们才开始做网站本身的界面等等”,杨勃特别欣赏图片网站flickr那种简洁的页面,因此豆瓣的用户界面“借鉴了flickr”。后台的技术也是由杨勃一人完成的,“豆瓣的规划就是冲着100万用户去的,而且是一个纯动态的网站,因此我特别重视服务器端的技术“杨勃称,目前豆瓣网虽然有5万注册用户,但是只有一台单AMD处理器的服务器,内存刚被升到2G,到“100万用户时,最多10台服务器”。
在用户、技术积累改进的同时,豆瓣网的功能也在积累和改变。开始豆瓣只有书评,推荐方式只有2种,一种是有每个用户通过自己喜欢的一些书找到同好的人,然后根据这些同好的列表获得推荐;另外一种是机器根据用户的数据库信息进行推荐。后来,随着用户的创意出现了自由组合的小组,同城板块、二手交换等。
豆瓣的生意“网站开张第一个天就有人通过豆瓣去当当买书”杨勃已经不能记起第一笔生意的具体信息,他表示豆瓣网的收入来自与书商分帐和广告,目前的营收可以支付网站的日常运营费用。
像所有Web 2.0的网站那样,杨勃也宣称对用户“永远免费”,“我们的核心价值是让用户发现新东西,如果我们做的好,用户就会发现有价值,就会去买。这样我们等于帮助商家做了营销,因此我们会与之分帐”,目前豆瓣已经在和当当、卓越分帐,杨勃称来自豆瓣的的10次点击就会发生一次购买行为。豆瓣未来另外一个营收手段是广告。
“我们还可能增加书、电影、音乐以外的产品,但是我认为最有实质性帮助的仍然是英文版豆瓣”李勃认为,“美国人喜欢读书,而且书卖得贵”,因此英文的市场更大,更加成熟,“我们已经打算和亚马逊合作,目前英文服务器已经架设完成,英文版的开发也基本完成”。
豆瓣目前在国内的工作重点已经转移到推广上:和读书等传统媒体合作,加强广告宣传等都已经提到议事日程。11月23日记者见到杨勃时,他正在把豆瓣迁来北京,在北京注册公司,招兵买马,他说“考虑到文化圈子,人才因素,豆瓣还是应该来北京发展”。
在资本方面,豆瓣早期的资金不过是几个朋友总额不到二十万元人民币的“天使投资”,杨勃说已经有风险投资找到门上了,不过他个人还是倾向再找一些愿意长期投资的“天使投资”。(完)

  • Share/Bookmark

css hack

有时候写css的时候,无法达到全部浏览器同样的效果,这时候就要用到css hack,
下面总结出浏览器中的hack

.sofish{  

        padding:10px; 

        padding:9px\9; /* all ie */ 

        padding:8px\0; /* ie8-9 目前应用于IE8的单独hack,情况比较少 */ 

        *padding:5px; /* ie6-7 */ 

        +padding:7px; /* ie7 */ 

        _padding:6px; /* ie6 */ 

}  

/* webkit and opera */ 

@media all and (min-width: 0px){ .sofish{padding:11px;} }  

/* webkit */ 

@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } 

/* opera */  

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } 

/* firefox * / 

@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */  

html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; }

全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表:

/***** Selector Hacks ******/ 

/* IE6 and below */ 

* html #uno  { color: red } 

/* IE7 */ 

*:first-child+html #dos { color: red }  

/* IE7, FF, Saf, Opera  */ 

html>body #tres { color: red } 

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 

html>/**/body #cuatro { color: red } 

/* Opera 9.27 and below, safari 2 */ 

html:first-child #cinco { color: red } 

/* Safari 2-3 */ 

html[xmlns*=""] body:last-child #seis { color: red } 

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 

body:nth-of-type(1) #siete { color: red } 

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 

body:first-of-type #ocho {  color: red } 

/* saf3+, chrome1+ */ 

@media screen and (-webkit-min-device-pixel-ratio:0) { 

        #diez  { color: red  } 

} 

/* iPhone / mobile webkit */ 

@media screen and (max-device-width: 480px) { 

        #veintiseis { color: red  } 

} 

/* Safari 2 - 3.1 */ 

html[xmlns*=""]:root #trece  { color: red  } 

/* Safari 2 - 3.1, Opera 9.25 */ 

*|html[xmlns*=""] #catorce { color: red  } 

/* Everything but IE6-8 */ 

:root *> #quince { color: red  } 

/* IE7 */ 

*+html #dieciocho {  color: red } 

/* Firefox only. 1+ */ 

#veinticuatro,  x:-moz-any-link  { color: red } 

/* Firefox 3.0+ */ 

#veinticinco,  x:-moz-any-link, x:default  { color: red  } 

/***** Attribute Hacks ******/ 

/* IE6 */ 

#once { _color: blue } 

/* IE6, IE7 */ 

#doce { *color: blue; /* or #color: blue */ } 

/* Everything but IE6 */ 

#diecisiete { color/**/: blue } 

/* IE6, IE7, IE8 */ 

#diecinueve { color: blue\9; } 

/* IE7, IE8 */ 

#veinte { color/*\**/: blue\9; } 

/* IE6, IE7 -- acts as an !important */ 

#veintesiete { color: blue !ie; } /* string after ! can be anything */
  • Share/Bookmark

一个比较好的清除浮动写法

个人觉得这是一个比较好的清除浮动写法,不用增加一些与语意不相关的标签。

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: “”;
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
  • Share/Bookmark

XAMPP 虚拟主机配置,实现多域名访问本地项目

有时候你需要一些顶级域名访问方式来访问你本地的项目文件而不是目录方式访问,这时候就需要配置虚拟主机,给你的目录绑定一个域名(本地的话可以通过修改 hosts 文件随便绑定什么域名比如 www.a.com 或者 localdemo)。
现在假定你有两个目录,一个存在于 /xampp/htdocs/a,另一个存在于 /xampp/htdocs/b 。
现在你想要在本地测试的时候访问 www.a.com 对应的目录是 /xampp/htdocs/a ,访问 www.b.com 对应的目录是 /xampp/htdocs/b 。
懂得 Apache配置的其实就可以绕开了,因为 XAMPP 无非就是集成了 APache 之类的环境集成包,实现多域名也就是通过配置 Apache 实现的。

当然网上搜索到的方法很多,但是网上的信息都是转载来转载去的,有的方法我怀疑是否验证过是否正确都不知道。以下的方法是我亲测的,如果你按照我的配置还是无法实现本地多域名调试的话,可能是因为你的 XAMPP 的版本和我的不一致造成的。你可以在下面评论告知我,我会给你一一解答。以下配置针对的是 XAMPP Windows 1.7.1 版本。

1、首先修改C盘WINDOWS\system32\drivers\etc目录下的 hosts 文件,用记事本打开,加入:
127.0.0.1 www.a.com
127.0.0.1 www.b.com

2、打开xampp\apache\conf\httpd.conf文件,搜索 “Include conf/extra/httpd-vhosts.conf”,确保前面没有 # 注释符,也就是确保引入了 vhosts 虚拟主机配置文件。

开启了httpd-vhosts.conf,默认的httpd.conf默认配置失效(确保 httpd-vhosts.conf 文件里也开启了虚拟主机配置,见第3条),访问此IP的域名将全部指向 vhosts.conf 中的第一个虚拟主机。

3、在虚拟主机设置文件xampp\apache\conf\extra\httpd-vhosts.conf里设置:
取消 NameVirtualHost *:80 前面的 ##,这样就启用了 vhosts.conf ,默认的httpd.conf默认配置失效。虚拟主机配置将只设置在 httpd-vhosts.conf 里。

DocumentRoot /xampp/htdocs/a
ServerName www.a.com
DocumentRoot /xampp/htdocs/b
ServerName www.b.com

4、设置完了第3条之后,你会发现访问 localhost直接指向到设置的 a 那个路径去了,这个问题在第2条有讲。也就是开启了 vhosts 后,默认的 httpd 的配置就会失效了,默认的访问就指向到 vhosts 里的第一条设置去了。这时候你要把 localhost 的目录配置给设置回来。

DocumentRoot /xampp/htdocs/
ServerName localhost

至此,XAMPP 的虚拟主机设置完毕,现在 访问 localhost 还是原来的 XAMPP 的帮助指南,访问 www.a.com 将指向到绑定的 a 目录,访问 www.b.com 将指向到绑定的 b 目录。

  • Share/Bookmark

数组的克隆

在JS中,对于对象类型的变量的引用是通过类似C之类的“指针”的方式来操作的,及如果多个变量引用同一个对象,则任意一个变量对对象的操作都会影响到其它的变量。因此如果要创建一个与已经存在的对象内容相同的对象,不能通过简单的赋值操作。这样说的可能还是不太明白。

看下面的例子:

  var a=[1,2,3,4];
  var b=a;c=b;
  a.pop();  //移除最后一个元素
  alert(b); //弹出1,2,3
  alert(c);  //弹出1,2,3

我们执行上面的代码发现,在a的内容做改变后,变量b和c的结果也改变了。

上面的情况也许不是我们所需要的,我们希望的是创建一个与原对象内容一样的“新”对象。这样我们就需要通过一些克隆的办法来实现。

JS里Array也是一种Object。这里可以总结一下Array的克隆方式,我们这里为Array原生对象扩展一个clone方法。

1、最简单的办法,就是创建一个新数组,并遍历数组逐项添加到新数组中。

Array.prototype.clone=function(){
     var a=[];
     for(var i=0,l=this.length;i < l;i++){
         a.push(this[i]);
     }
     return a;
 }

这种实现方式是最容易想到也是最容易理解的,但是代码有点复杂了,我们仔细研究Array的一些方法,其实还有一个很简单的办法。下面说一下其它的两种办法。

2、通过Array对象的slice方法。

slice方法是通过参数start和end的传入值来返回数组中的一段,该方法不对原数组进行操作。我们通过slice(0)可以使其返回所有项。

Array.prototype.clone=function(){
     return this.slice(0);
}

3、通过Array对象的concat方法。
concat方法是用来实现数组的合并的。通过和一个空函数的合并,即可实现我们的克隆功能。

Array.prototype.clone=function(){
     return [].concat(this);
 }
 //或者
Array.prototype.clone=function(){
     return this.concat();
 }
  • Share/Bookmark

用Javascript动态加载CSS和JS文件

一个动态加载javascript和css文件的javascript 方法

var dynamicLoading = {
    css: function(path){
		if(!path || path.length === 0){
			throw new Error('argument "path" is required !');
		}
		var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = path;
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
    },
    js: function(path){
		if(!path || path.length === 0){
			throw new Error('argument "path" is required !');
		}
		var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.src = path;
        script.type = 'text/javascript';
        head.appendChild(script);
    }
}

对象包含两个完全独立的方法,分别用来加载 CSS 文件和 JS 文件,参数均为欲加载的文件路径。原理非常的简单:对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到 head 标签里面。经测试,本方法兼容各浏览器,安全、无毒、环保,实乃 web 开发人员工作常备代码,请放心使用。
下面是调用代码,异常简单:

//动态加载 CSS 文件
dynamicLoading.css("test.css");

//动态加载 JS 文件
dynamicLoading.js("test.js");
  • Share/Bookmark