http://www.html-js.com/my-js/version0.0.1/tool/

请在此地址随时关注我要发布的前端工具.

第一个工具是html结构转换成用+相连的js换行字符串工具

作用就是把输进去的html结构变成js中可用的字符串形式,同时保留格式.

第二个工具是css属性排序工具

作用是把输入的css样式的属性按照首字母排序,生成的css可能会方便查询.

开发工具

yahoo · 前端优化 · 性能

设计师的悲哀

设计师很威风，不要被骗，其实他们很可怜的……

遇到搞设计的人就嫁了吧~

这样的设计师，你们伤害不起~

搞设计的人，会在阳光下，站成一棵树~

原谅我就是这样的设计师~

请别爱上搞设计的人

每个搞设计的上辈子都是折翼的天使……

(全文…)

No tags

如果你现在用的浏览器是firefox,那么请查看一下它的版本,如果是3.5.11版本的,那么恭喜你,可以亲眼看见一个bug.现在打开这个页面:

http://www.html-js.com/wp-content/uploads/2010/08/firefox-input-bug.html

如果用的是其他浏览器,ie所有版本,chrome, opera,  那么你看到的大致都是相同的景象,那就是六个输入框.

如果你用其他版本的firefox,你看到的应该也是六个输入框,这个我没有测试,但是如果你的firefox是3.5.11版本的,你看到的就不是六个输入框了,而是很多输入框,他们有大有小,各式各样,让人很摸不着头脑,下面就做个分析.

之所以出现这个问题,是因为firefox(下面的firefox都是指3.5.11版本的,至于这个bug维持到哪个版本,我也不清楚,但是3.5.11的确是这样的)在解释type=”hidden”的input的时候,如果设置了特定的css属性,type=”hidden”的input会显示出来,如果设置的属性不同,显示的样式也会千奇百怪.具体代码可以看刚才的demo的源代码,下面看一个分析图:

从上面的分析来看,这种现象真是摸不着头绪,但是如何让hidden的input显示出来还是比较明显的,那就是设置display:inline或者display:block,同时设置border,这时候type=”hidden”的input就会显示出来,至于让它显示成什么样子,可以参照上图.

所以在平常设置css的时候一定要注意,不要统一给input设置各种属性,要针对某个input单独设置,如果不小心给所有input都设置了border和display,firefox就会把hidden的input也显示出来,造成样式混乱,虽然听起来挺平常的,但是这个bug的确被我们遇到了.就应该多注意一下.

哎,如果世界上只有chrome一个浏览器多好啊.

firefox · hidden · input

css的匹配性能

关于CSS的匹配性能的思考!(部分内容来自网络,大部分内容自己整理)

其实网上关于浏览器如何匹配css的原理也只是源于一篇MDC上的Mozilla的ui渲染原理的文章,原文地址:https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS (英文版的,中文版可以去google搜索).

文中有一段话:

样式系统从最右边的选择符开始向左侧移动来匹配一条规则。样式系统会一直向左匹配选择符直到规则匹配完毕或者由于出错停止匹配.

还有一段话:

样式系统把规则分为四大类。理解这些类是很重要的，因为对于规则的匹配来说他们是首先要考虑的。之后的段落中会使用“主选择符”这个说法。主选择符是指选择符最右边的部分(最终要匹配的那个元素，而不是它的祖先元素).

关于浏览器的css匹配的要旨,基本就在这两句话里面了(至少Firefox里是这样的).不过匹配的时候从右到左的顺序,也许和很多人预想的是不一样的,例如我这种人,在我的理解中,匹配是从左至右的,可能是用yui用多了,yui里面获取class的时候,先是获取父节点,然后再再里面筛选class,从左至右,所以我理解中浏览器的匹配也会是从左至右的.可是事实却是从右至左的,如果你的理解也是从左至右的,那么就要好好考虑清楚为什么浏览器会从右至左匹配,只有搞清楚了这个,以后写css的时候才会容易考虑清楚如何写才会节省性能,否则可能会按照自己的习惯想法来理所当然写css,最后在匹配性能上出问题.

其实从右至左的顺序也是可以很容易理解的,不论是从左至右还是从右至左都是在逐步筛选元素,之所以选用从右至左也许有其他原因,但是既然以最后一个选择符作为主选择符,那么从主选择符开始匹配就在情理之中了.

因为上面这两句话的原因,可以总结出下面这些css的性能提升点,我对每个提升点都做了详细的解释,理解了他们,以后就会觉得自然而然,在写css的时候自然可以写出高性能的css来.

首先介绍css中四种匹配规则:(注意他们的特性,这对于后面的理解很重要)

ID规则

ID 选择符作为主选择符的规则.

例如:#backButton { }

CLASS规则

如果一条规则有一个指定的 class 作为主选择符，就被归入此类.
(全文…)

css · 优化 · 匹配 · 性能 · 最佳实践

abtest · 分流 · 前端 · 呈现

require 'win32ole'
$col_map =["","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
class Excel_Info
  attr_accessor :file_name
  attr_accessor :range
  def initialize(file_name)
    @file_name = file_name
    @range = {}
  end
end
 (全文...)

No tags

这次活动是我们淘宝网校园招聘百年大学培训第五期的全班同学共同发起的公益活动，我们在贫困地区为贫困儿童建立了一座图书馆，然后我们组织淘宝网卖家和社会的力量来为贫困儿童捐书，公益，其实每个人都可以付出自己的一份力量，对你来说只是几本书，但是对那些孩子来说，他们得到的是希望和未来。

具体可以联系我，留言给我，也可以联系下面的人的联系方式，谢谢，请帮忙转载和分享。

1个乡村图书馆

1个乡村的梦想

实现它需要

1个人捐5000本书

10个人每人捐500本书

100个人每人捐50本书

1000个人每人捐5本书

还犹豫什么，让我们成为这1000分之一

所需书籍： 适合青少年，山村教师，村民阅读的书籍

书籍去向：四川省合江县茅山小学茅山乡村图书馆

邮寄地址：四川省泸州市纳溪区东门口西南化工研究院34幢802室 熊启华收

邮编：646300 手机：13937510823

(全文…)

No tags

昨天远图哥说是有这么个小需求,于是我就顺手做了一个,很简单的时钟,呵呵.
用到了这么一个图片:

这是最终效果,右击可以查看源代码

下面是一个用flash实现的同样的时钟：

js · 时钟

中国8亿的手机用户最想做什么事？

2010年淘宝8341计划中，一个最为神秘的部门你知道是哪个部门？

马总认为在中国唯一有机会在电子商务领域超越淘宝的机会，你知道在哪里？

来看这里吧！答案马上揭晓！
(全文…)

招聘 · 无线

在两瓶可乐中，我结束了百淘校招四期的旅程。然后回到西湖国际开始敲我的代码。代码对我来说是生活的很重要的部分，以前我每天把除了睡觉之外的所有时间都贡献给它。但是我现在想法有些不同了。

百淘是个什么东西？很多人说它是一个用来洗脑的工具。还是那句话：如果洗脑可以让你认识到自己的价值和提升你的人生观，洗一下又何乐而不为呢？

人生总是变化的，难道我们面对着这些变化不应该想到要做一些改变么？

我很喜欢淘宝的文化，喜欢百淘的文化。有些人抱怨说淘宝会加班。好吧，如果你认为不加班可以实现自己的价值，没有人逼你加班，人年轻的时候总共才多长的日子，拼了去搏一把又会如何呢？

——————————————————————————————

其实我真的曾经是个诗人，只是是意识流的，所以到现在我写的东西还是读着很别扭

——————————————————————————————

其实对于价值观，我不敢说我理解了哪个，只是通过百淘，我真的觉得自己改变了很多，我现在很想参加公司的各种活动，很想在内部组会上做分享，虽然我分享的东西都是又啰嗦又讲不清楚，但是我明白，敢于分享才是最重要的，分享的多了，思路自然会清晰起来。

在百淘的前几天，我很沉默。这是我的一贯作风，我认为百淘最多就是个小班级，不必出风头，也没有什么值得我去尖叫或者关注的。可是很快我就意识到我错了，慢慢地，我发现百淘是我有生以来呆过的最让人难以忘怀的地方，是一段最让我难以自控的时间。难以自控，用这个词来形容不知道合不合适。我无法控制自己了，我要爆发，哦，应该就是这种感觉。

(全文…)

No tags

本文地址:http://www.html-js.com/?p=594转载请注明出处,不要删除此信息

今天在看JavaScript中的分号处理的时候，发现一个现象，以前没有注意过。

主要是ECMASCRIPT规范中的一句话引起的：

当程序解析器从左至右解析程序的时候，如果遇到了输入文档流的结尾，而解析器无法正常解析文档流的时候，一个分号会被自动插入到输入流的结尾。

这句话看起来道理很简单，但是由于之前对JavaScript的错误没有仔细想过，所以看过之后不得要领，随后仔细想了想，试了试，算是有点小心得了。

下面是我的片面之词，希望有不对的地方大家提出自己的看法。

首先从一个小例子开始：

<script>
alert("第一次弹窗");
  (function(){
      return ee
  })()
alert("第二次弹窗")
</script>

上面这段代码放在html里运行后的结果是什么呢？

结果只会弹出一次窗口，因为在执行闭包里的return ee的时候发现变量ee是没有定义的，程序将停止执行。

然后，我们换一段代码：

<script>
alert("第一次弹窗");
  function(){
      return ee}
  }
alert("第二次弹窗")
</script>

这次的结果是什么呢？

第二段代码不会有任何反应，因为这是另一种错误。

这两段代码正是说明了两种js错误类型，第一种是运行时错误，第二种是解析期错误。

解析时错误是由于语法错误引起的，而运行时错误则是程序员在书写的时候逻辑错误引起的。

通过上面的例子来看，解析时错误比运行时错误更致命，因为它会直接导致程序不运行，任何语句都不会执行。而运行时错误只有发生后才会导致程序中断。

解析时错误是很容易避免的，根据上面的特点，在调试程序错误的时候，我们可以先查看是否程序的语法有错误。在文档头部书写一个alert语句，如果此语句无法运行就说明程序的语法有错误，这种错误基本都很容易发现，而且这两种错误在浏览器调试工具中显示的地方不同，运行时错误通常通过动态捕捉，例如：firebug和chrome的script选项卡里的错误捕捉功能，而解析时错误则显示在控制台中，chrome里的console选项卡里。

上面说到的情况只是脚本直接嵌入在页面里的时候的情况。还有种情况是主页面引用了多个js文档，在这些文档里发生了上述错误会引起什么现象呢？

看例子：

<script src="a1.js"></script>
<script src="a2.js"></script>

a1.js中的代码如下：

alert("第一次弹窗");
  (function(){
      return ee}
  })()
alert("第二次弹窗")

a2.js中的代码如下：

alert("dd")

大家想想这次的结果是什么呢？

上面的代码会弹出一个“dd”的对话框。也就是说a1中的语法错误并没有影响a2的解析。可见对多个文档的解析是分离的，a1中的语法错误只会阻断a1这个文档的解析，而不会影响a2的解析和执行，如果a1解析错误，解析器跳过这个文档。

这也是为什么文章开头我提到那句话的原因，本来料想如果解析到文档流末尾的时候发现本文档无法解析应该跳出解析，而文档却在此说明这种情况仍然需要加一个分号，然后继续往下解析下一个文档流。也就是说某个文档解析错误的时候并不影响接下来的文档的解析。

之后，我们来看看这种情况下a1.js中如果发生的是运行时错误会怎么样？

将a1.js的代码改为如下：

alert("第一次弹窗");
  (function(){
      return ee
  })()
alert("第二次弹窗")

希望如你所想，结果是首先弹出“第一次弹窗”，然后弹出“dd”。

可见运行时的错误也不会阻断其他文档流的执行，而只是阻断当前文档的执行。

总之，这两种错误还是有些区别的，了解清楚这些区别对于程序的调试还是有一定好处的。

No tags