时代前端

jquery准确判断ie6浏览器

admin — Thu, 26 Apr 2012 08:50:00 +0800

jquery提供的$.brower方法只能判断浏览器的种类，而不能具体到版本。日常工作中我们最为头疼的就是IE6，有时候要专门为ie6写hack。
以前我的判断方法一直是版本+版本号。 if($.browser.msie&&($.browser.version==6.0))。、
但最近发现一个惊天bug。
jquery是根据userAgent的version值正则判断的，但是如果在windows2008k中，会把windows NT 6.0误认为是ie6.0，导致将ie8误认成ie6。
$.browser方法jquery官方已经不赞成使用了。建议的方法是$.support,但我把所有的属性值都测试完毕后发现没有一个能只检测出IE6的，最后发现$.support.style在IE6和IE7中返回值为false。
那么取他们属性的交集便可以准确判断IE6了。
所以 if($.brower.msie&&($.browser.version==6.0)&&!$.support.style)
虽然很长，但效果还是不错的。

您可能感兴趣的文章

百度搜索引擎对中文URL收录情况

admin — Wed, 25 Apr 2012 09:49:00 +0800

还是说说中文url对于百度的收录是否有影响吧。
        此酒店团购网的SEO优化最近刚由我接手，在查看网站的目的地时候，发现这些城市的URL全都是带中文的URL。另外有想建立品牌网站必须要知道的.
        由于之前看到过网上讨论中文URL对于收录是否有影响的话题，特意就关注了下，我特意查看了这些带中文的URL是否被百度收录，经过查询，都没有被百度收录。遂找来程序员，让他帮忙把url改成英文形式。
        第二天查看了下这些改成英文的url，经过在百度查询，发现当天改完英文后，百度就直接把这些个城市页面给收录了。通过上面这个CASE，我了解到一个SEO情况就是。
       百度对于带中文的URL并不是很喜欢，并不是说百度不收录带中文的URL，事实证明带中文的URL是被百度收录的，因为大家已经拿出了相关的证据。但是对于百度是否喜欢带中文URL这个情况，没有SEO人员提到过。
       那么通过此CASE让我明白了，百度对于带中文的URL并不是很喜欢，相对于中文URL，英文URL更容易被百度收录！ SEO优化人员以后可千万得注意，中文URL尽量不要出现，因为中文URL不利于百度的收录！
源于:http://www.eistudy.com

您可能感兴趣的文章

让wordpress时间显示为xx秒、分、天前

admin — Thu, 19 Apr 2012 08:52:32 +0800

这个相当有用，希望自己的文章时间显示格式像微博时间格式一样，它就可以；如果你发文频率很高，这个时间格式很是友好！刚刚发布的文章，时间显示为“1分钟前”，还有“1天前”、“1分钟前”、“1秒前”等等！

添加方法很简单，把以下代码贴入主题的functions.php，调用方法是wp默认的“the_time()”，不用修改。

//时间显示xx前 add_filter('the_time', 'past_date'); function past_date(){ $suffix='前'; $endtime='2419200'; $day = '天'; $hour = '小时'; $minute = '分钟'; $second = '秒'; if ($_SERVER['REQUEST_TIME']) $now_time = $_SERVER['REQUEST_TIME']; else $now_time = time(); $m = 60; // 一分钟 $h = 3600; //一小时有3600秒 $d = 86400; // 一天有86400秒 $endtime = (int)$endtime; // 结束时间 $post_time = get_post_time('U', true); $past_time = $now_time - $post_time; // 文章发表至今经过多少秒 if($past_time < $m){ //小于1分钟 $past_date = $past_time . $second; }else if ($past_time < $h){ //小于1小时 $past_date = $past_time / $m; $past_date = floor($past_date); $past_date .= $minute; }else if ($past_time < $d){ //小于1天 $past_date = $past_time / $h; $past_date = floor($past_date); $past_date .= $hour; }else if ($past_time < $d*10){ $past_date = $past_time / $d; $past_date = floor($past_date); $past_date .= $day; }else{ echo get_post_time('m-d'); return; } echo $past_date . $suffix; }

您可能感兴趣的文章

JavaScript编程语言的编码规范

admin — Thu, 19 Apr 2012 08:26:17 +0800

对于熟悉 C/C++ 或 Java 语言的工程师来说，JavaScript 显得灵活，简单易懂，对代码的格式的要求也相对松散。很容易学习，并运用到自己的代码中。也正因为这样，JavaScript 的编码规范也往往被轻视，开发过程中修修补补，最终也就演变成为后续维护人员的恶梦。软件存在的长期价值直接与编码的质量成比例。编码规范能帮助我们降低编程中不必要的麻烦。而 JavaScript 代码是直接发送给客户浏览器的，直接与客户见面，编码的质量更应该受到关注。

本文浅谈 JavaScript 编程中关于编码规范的问题，分析其中缘由。希望引起更多 Web 开发人员对 JavaScript 编码规范问题的关注和对软件产品质量问题的重视。

前言

提及 C/C++ 和 Java 编码规范，相信许多工程师并不生疏。但说到 JavaScript 语言的编码规范，也许您会忍俊不禁。JavaScript 不是语法很灵活吗？变量随时用随时可以声明；语句结束符可以不要；字符串和数字也可以相加；参数多一个少一个也不会报错。没错，当您从 C/C++ 和 Java 严格的语法规定之下，转向 JavaScript 语言，会觉得自由了很多，轻松了很多。语法松散是 JavaScript 重要的特征。它灵活易懂，给开发人员带来了很多方便，但如果编写过程中不注意，代码的调试成本和维护成本则会无形地增加。

JavaScript 编码会随应被直接发送到客户端的浏览器，代码规范不只是代码质量的保证，也影响到产品的长期信誉。希望 JavaScript 编程语言的规范问题也能同样引起更多朋友的关注。

JavaScript 编码规范建议

本文就 JavaScript 编码过程中涉及的排版、命名、声明、作用域、及一些特殊符号的使用等方面，根据个人在学习工作中的总结，给出自己的一些建议，并分析其中缘由，以供参考。

JavaScript 文件引用

JavaScript 程序应该尽量放在 .js 的文件中，需要调用的时候在 HTML 中以 <script src=”filename.js”> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的，则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小，无益于代码的压缩和缓存的使用。

另外，<script src=”filename.js”> 标签应尽量放在文件的后面。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。

代码排版

行长度

每行代码应小于 80 个字符。如果代码较长，应尽量选择换行，下一行代码应缩进 8 个空格。这样可以使代码排版整齐，减轻阅读代码的疲劳感。换行缩进 8 个空格可以和代码段的缩进 4 个空格区分开，以增强代码的可阅读性。

行结束

JavaScript 语句应该以分号结束。但大多数浏览器允许不写分号，只要在本应是分号的地方有一个换行符就行。但是如果代码行较长需要换行的时候，有哪些注意事项呢？换行应选择在操作符和标点符号之后，最好是在逗号’,'之后，而不要在变量名、字符串、数字、或’)’ ‘]’ ‘++’ ‘–’等符号之后换行。

这样可以有效的防止拷贝、粘贴而引起的错误，并可有效地增强代码的可阅读性。请见清单 1，代码的输出符合我们的期望。但就写法而言，对 valueB 的赋值语句是在变量 valueA 之后进行的换行，这很容易被误解为 valueB=ValueA，给阅读造成障碍。而对 valueC 的复制语句是在’+'之后进行的换行，就容易理解的多。这也是本文所提倡的换行方式。

清单 1. 行结束的位置

缩进

关于缩进的问题，不只是 JavaScript，几乎所有的语言编写的时候，都会提及缩进的问题。缩进几乎是代码编写规范的第一课，是代码可阅读性判断的直接因素。

代码缩进的好处是不言而喻的，但是对于如何缩进，则没有标准而言。最受欢迎的是方便使用 TAB 键缩进，也有些喜欢用 2 个、4 个、8 个空格进行缩进。这样缩进风格不一，也同样给代码的阅读带来障碍。

本文提倡用 4 个空格来进行缩进，并在同一产品中采用同一种缩进标准。不支持用 TAB 键进行缩进。这是因为直到现在还没有统一的标准来定义 TAB 键所代替的空白大小，有些编辑器解析为 4 个空格大小，有些则解析为 8 个。因而用不同的编辑器查看代码，可能造成格式混乱。

当然 TAB 简单易用，为解决这个问题，建议在设置开发环境时，将编辑器里的 TAB 快捷键重新设置为 4 个空格。据了解 Eclipse, Vi, Nodepad++，Editplus, UltraEdit 等流行的编辑器，均提供了此功能。

注释

代码中的注释很重要，自然也是毋庸置疑的。通常我们会强调代码中注释数量的多少，而轻视了对注释质量的提高。编码是及时添加注释，会给后续代码的维护人员带来很大的便利。但是如果注释不注意更新，或者由于拷贝、粘贴引起的错误的注释，则会误导阅读人员，反而给阅读带来障碍。

除了注释要及时更新外，我们还应对注释的内容要特别关注。注释要尽量简单、清晰明了，避免使用含混晦涩的语言，同时着重注释的意义，对不太直观的部分进行注解。请见清单 2。

清单 2. 有意义的注释

这样的注释方式在 JavaScript 代码中经常见到。”initialize valueA to be sero” 这样的注释有什么用呢？难道阅读程序的工程师从”var valueA = 0;”复制语句中看不出来么？”set timeout to be 20s”这条注释，不只是因拷贝、粘贴引起的时间大小的错误，同时也误导了程序员对这条语句的理解。setTimeout() 函数的作用并非是设置函数执行的超时时间，而是等待一定时间后执行所调用的函数，害人匪浅呀。这样的注释内容宁可删掉。

此外，JavaScript 的注释有两种”//” 和”/* …. */”，建议”//”用作代码行注释，”/* …. */”形式用作对整个代码段的注销，或较正式的声明中，如函数参数、功能、文件功能等的描述中。

标识符命名

JavaScript 中的标识符的命名规则：

以字母、下划线’_'或美元符号’$'开头
允许名称中包含字母，数字，下划线’_'和美元符号’$’
区分大小写

变量、参数、成员变量、函数等名称均以小写字母开头，构造器的名称以大写字母开头。下划线’_'开头的变量一般习惯于标识私有 / 局部成员。而美元符号’$'开头的变量习惯于标识系统相关，比如系统进程等。应避免用下划线’_'或美元符号’$'来命名标识符。尽可能地降低代码的阅读负担。

声明

变量的声明

尽管 JavaScript 语言并不要求在变量使用前先对变量进行声明。但我们还是应该养成这个好习惯。这样可以比较容易的检测出那些未经声明的变量，避免其变为隐藏的全局变量，造成隐患。

在函数的开始应先用 var 关键字声明函数中要使用的局部变量，注释变量的功能及代表的含义，且应以字母顺序排序。每个变量单独占一行，以便添加注释。这是因为 JavaScript 中只有函数的 {} 表明作用域，用 var 关键字声明的局部变量只在函数内有效，而未经 var 声明的变量则被视为全局变量。我们来看下清单 3。

清单 3. 局部变量声明

从上例的输出惊奇地发现，用 var 声明过的变量 valueA 和没有声明的变量 valueB 是有区别的。特别需要注意的是，在函数内部用 var 声明的变量为局部变量，这样可以有效地避免因局部变量和全局变量同名而产生的错误。

函数的声明

函数也应在调用前进行声明，内部函数应在 var 声明内部变量的语句之后声明，可以清晰地表明内部变量和内部函数的作用域。

此外，函数名紧接左括号’(‘之间，而右括号’)'和后面的’{‘之间要有个空格，以清楚地显示函数名以其参数部分，和函数体的开始。若函数为匿名 / 无名函数，则 function 关键字和左括号’(‘之间要留空格，否则可能误认为该函数的函数名为 function。

清单 4. 内部函数声明

从清单 4 的输出可以看出，inF() 函数仅在 outF() 函数的内部生效，局部变量 innerA 对内部函数的作用域生效。这样的编码方式使得变量和函数的作用域变得清晰。

语句

对于简单语句而言，需要提及的仍然是分号必要性，同时，一行最多有一个语句。如果一个赋值语句是用函数和对象来赋值，可能需要跨多行，一定切记要在赋值语句末加上分号。

这是因为 JavaScript 中，所有表达式都可以当语句，遇换行符时会解析为表达式的结束，此时不规范的换行和分号的丢失，可能引入新的错误。

对于复合语句，if, for, while, do, switch, try … catch 等代码体，函数定义的函数体，对象的定义等都需要放在花括号’{}’里面。

‘{‘ 应在行末，标志代码块的开始。
‘}’ 应在一行开头，标志代码块的结束，同时需要和’{‘所在行的开始对齐，以表明一个完整的复合语句段。这样可以极大地提高代码的可阅读性，控制逻辑能清晰地表现出来。
被包含的代码段应该再缩进 4 个空格。
即使被包含的代码段只有一句，也应该用花括号’{}’包含。尽管不用花括号代码也不会错，但如若需要增加语句的话，则较容易因花括号遗漏而引起的编译错误或逻辑错误。

return语句在使用时也需慎重，如果用表达式的执行作为返回值，请把表达式和 return 放在同一行中，以免换行符被误解析为语句的结束而引起返回错误。return 关键字后若没有返回表达式，则返回 undefined。构造器的默认返回值为 this。

清单 5. return 表达式

在清单 5 中显示了因返回表达式没有和 return 关键字放在同一行而引起的返回错误，需重视。

特殊符号

空白符

适当的空白行可以大大提高代码的可阅读性，可以使代码逻辑更清晰易懂。同时，在表达式中适当的留空白，也会给代码的阅读带来方便。

关键字的后面如有括号，则最好在关键字和左括号’(‘之间留空白，如 for, if, while 等。而函数名和括号之间则不宜留空白，但若是匿名函数，则必须在 function 和左括号’(‘之间留空白，否则，编辑器会误认为函数名为 function。

在表达式中，二元运算符 ( 除左括号’(‘，左方括号’['，作用域点'.') 和两个操作数之间最好留空白。一元运算符（若不是词 typeof 等）和其操作数之间不宜留空白。

逗号','的后面需要留空白，以显示明确的参数间隔，变量间隔等。

分号';'之后通常表明表达语句的结束，而应空行。在 for 的条件语句中，分号之后则应该留空白。

{ } 和 [ ]

在 JavaScript 中，如需定义空对象和空数组，通常很自然地想到用 new Object() 和 new Array() 的方法。其实花括号’{}’和方括号’[]‘可以直接用来定义一个空对象和一个空数组。这种书写方法可以使代码看起来简单易懂。

== 和 ===

判断”逻辑等”在代码里太平常的不过事情了，但 JavaScript 与其他熟知的编程语言不同的是，除了可以使用两个等号’==’来作判断以为，还可以使用三个等号’===’来进行逻辑等判断。两者的不同是’==’作逻辑等判断时，会先进行类型转换后再进行比较。’===’则不会。因而，’==’进行的判断结果可能产生偏差。’!=’与’!==’的区别亦是如此。本文提倡尽量使用’===’来进行逻辑等的判断，用’!==’进行逻辑不等的判断。

清单 6. === 的使用

清单 6 中，valueA 和 valueB 两个变量的值显然是不相等的，起码 valueA 是个字符串，而 valueB 是一个数字。但用’==’进行判断是，程序却输出相等的字样。这是因为编译器对两个变量进行比较时，因为他们的类型不同，而自动地将 valueB 转换成字符串，而后再和 valueA 进行比较的。用’===’得到的判断结果正和预期的结果相符。

加号’+'也同样是程序员所熟知的操作符之一。JavaScript 和其他编程语言不同的是，在 JavaScript 中，’+'除了表示数字值相加，字符串相连接以外，还可以作一元运算符用，把字符串转换为数字。因而如果使用不当，则可能与自增符’++’混淆而引起计算错误。这一点，在清单 7 中可以清楚地看出。

清单 7. 巧用 + 号

总结

本文就 JavaScript 代码的排版、命名、声明、语句、和一些特殊字符的使用等方面，谈了自己对 JavaScript 编程规范的建议。此外，还有许多方面需要深入了解研究，如 with, eval 语句和 this 对象的使用等等。我们在认识其普遍性的同时也需要注意其特殊性，在编写代码时多用心留意，以创造更多更优质的程序代码。

随机日志推荐

解决Firefox下input button内文字垂直居中

admin — Wed, 18 Apr 2012 22:59:35 +0800

众所周知，在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己比较二，弄了个私有属性，导致以下问题的出现：

按钮左右本身有2px的间距（FF私有属性写了padding:0 2px所致）；
按钮文字居中是不行的（此时设置padding-bottom是没用的）；
等等…

那我们就用其人之道还治其人之心，看下面代码：
input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner{ border:none;padding:0; }

您可能感兴趣的文章

微软最新的服务器版操作系统叫Windows Server 2012

admin — Wed, 18 Apr 2012 14:39:28 +0800

在拉斯维加斯举行的2012微软管理峰会（MMS）上，微软官员透露了其最新的服务器软件的名字为Windows Server 2012，这个跟预期的“Windows Server 8”这个名字有出入，该操作系统将于今年推出。

不过微软并未透露确切的发布日期。根据预测，微软有可能效仿Windows 7发布时的做法，把时间定在假日销售季的10月。

微软还推出了System Center 2012，这是一组客户端与服务器端的管理套件，微软称该工具对于企业管理包括有物理和虚拟服务器的私有云至关重要。可在微软网站处下载。

会上微软还透露了其他产品的名字。IntelPC桌面版操作系统叫“Windows 8”，正式销售只有两个版本，普通版和专业版。企业版仅提供给加入了软件保证计划的客户。此前面向平板电脑的“Windows on ARM（WOA）”改名为“Windows RT”。

随机日志推荐

苹果让不懂编程的人也可以做APP开发

admin — Mon, 16 Apr 2012 12:59:51 +0800

据外媒报道，苹果本周向美国专利商标具提交了一份专利申请，该专利将使得苹果的iOS应用开发变得更加简单，大大降低开发者的准入门槛，即使你不懂编程你也可以自己开发出一些应用。

该专利的名称叫做<Content Configuration for Device Platforms>(《设备平台上的内容配置》),这是苹果即将推出的一种新编写工具，用户可以直接创建App而不需要理解或编写繁杂的程序代码。

60万的应用已经使得苹果应用生态系统足够庞大了，那么可想而知当苹果这项专利技术正式通过之后，很难想象苹果的应用数量将会成长到多么恐怖的程度。目前还无法得知苹果是否会将该项专利整合到即将出现的苹果操作平台中，该项专利中指出计算机编程语言是阻止用户进行DIY创造的主要因素，并不是每个人都具备专业技术背景，更别说复杂的计算机编程了。

苹果这项即将带来的专利技术使得用户创建应用的过程会更加简单，用户只需要简单的选择一个模板并在模板中加入相应的功能就可以创建自己的iOS应用、网页或者广告乃至更多的iOS内容。

在有些需要创作的领域 “所见即所得”软件既可以解决一些创作问题，比如说网页开发设计中的Dreamweaver，这是一种可以开发设计网页的图形用户界面工具。苹果表示，尽管这些工具可以帮助用户进行内容创作，但是它们的功能毕竟有限，有时候还需要用户亲自动手编写类似于CSS这样的代码。

除此之外苹果还在这个专利申请中指出目前业界现有的一些编写工具对于没有编程基础的用户而言也非常困难，他们编写出来的内容往往很难在不同分辨率的屏幕上完美展现。虽然大多数iOS应用可以在iPhone或iPad上运行或者同时兼容两种设备，但是苹果此次的专利申请中还谈到了在不同分辨率的屏幕（比如说电视和电脑）上呈现这些内容的可能性，这也意味着将来用户甚至可以自己开发Mac乃至Apple TV的应用供大家使用。

苹果表示目前业界针对这一问题只是采用一种所谓“最小公分母”的办法，通过对内容进行相应的转换来使之适用于所有移动设备。尽管依靠这种方法，移动设备上内容的呈现效果得到了一定的增强，但是远远没有达到最理想的效果。

鉴于iOS应用的已经拥有庞大的DIY开发者基础，苹果该项技术的推出将会在更大程度上加剧了用户DIY应用的热潮，为当前同谷歌、亚马逊等在应用市场特别是免费应用上的竞争添加了一个重要的筹码。

针对苹果的这项即将推出的新专利技术，目前我们好奇的就是苹果将会给新研发的或者也已存在的iOS设备提供一种怎样的全新用户界面，苹果会不会为这项新技术单独开发新的iOS平台还是直接整合到现有的iOS平台中，种种一切就让我们拭目以待吧。苹果在2011年底之前已经售出了3.16亿部移动设备，因此苹果的移动设备产品的应用需求量也是在不断增长的，这项新专利的推出应该会缓解这高速增长的需求。

随机日志推荐

div中用css让图片垂直居中

admin — Fri, 13 Apr 2012 12:58:40 +0800

不像table那么容易，直接就可以让内容上线居中，在div中怎么简单实现了，当然实现起来有很多方法，目前先看一下我认为很简单的写法。

难点在于两点：

垂直居中；
图片是个置换元素，有些特殊的特性。

至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

css部分

.box {
        /*非IE的主流浏览器识别的垂直居中的方法*/
        display: table-cell;
        vertical-align:middle;

        /*设置水平居中*/
        text-align:center;

        /* 针对IE的Hack */
        *display: block;
        *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
        *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

        width:200px;
        height:200px;
        border: 1px solid #eee;
}
.box img {
        /*设置图片垂直居中*/
        vertical-align:middle;
}

HTML结构

<div>
 <img src="taoscars_180x95_071112_sr.jpg" />
</div>

利用浏览器本身属性加上hack，简单的搞定。

随机日志推荐

web前端工程师入门及发展方向

admin — Thu, 12 Apr 2012 22:55:55 +0800

本文是写给那些想要入门web前端工程的初学者，高手请路过，也欢迎高手们拍砖。

先说下web前端工程师的价值，目前web产品交互越来越复杂，用户使用体验和网站前端性能优化这些都得靠web前端工程师去做web前端工程师是设计加开发的综合体，web前端工程师是在开发人员中最直接面向产品，面向用户的设计人员，一个开发团队的成果是要靠web前端工程师去展现，因为用户不会去关心后台的处理有多么强大；在设计人员中web前端工程师是直接面向开发人员的设计人员，向开发人员以一种计算机语言的方式传递其设计理念，web前端工程师在整个团队中是很关键的。

在我眼中一名合格的web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一个或两个还不行，你必须对这三门语言都很熟悉。也不是说必须对这三门语言都非常精通，但你至少要能够运用它们完成大多数任务，而无需地频繁地寻求别人的帮助。

下面说下我眼中web前端工程师要掌握的基础知识和技能：

1 网页的基本结构（HTML + CSS）

HTML是一种标记语言，而不是编程语言，最基本是标签是<html>和<body>，CSS是用来定义如何显示HTML元素的。对HTML+CSS很容易入门，但很多人不够深入，举几个例子：<meta> 标签是作什么用的？margin-left与left有什么区别，应该在什么情况下使用？再出个DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度。如果这些问题你目前还不知道，对那个布局问题几分钟内不能解决，说明你对HTML+CSS还不够深入。

2 浏览器是怎么展现网页的

不同内核的浏览器对网页的渲染是不一样的，目前浏览器都有客户端调试工具，

在做web性能优化时，对浏览器渲染及细节要进一步了解。说个比较有用的知识点：目前浏览器并行加载的上限是6，老版本的浏览器会有所不同。

3 网页的生命周期

不同的web框架下，页面的生命周期会有所不同，大体还是一样：客户端发送GET请求，服务器返回相应页面，客户端完成操作及数据，然后POST给服务器。一定要对数据的传递(前台与后台,页面之间)的细节了然于心。

4 DHTML DOM BOM Javascript AJAX

这是Web前端开发的重中之中，大多数时候我们都在和他们打交道。说几个注意点：javascript是单线程编程，所谓的javascript异步编程只不过是计划在未来的某个时间上执行相应事件而已；详细了解DOM事件机制；客户端存储（HTML5中增加了localStorage和sessionStorage）；javascript不像服务器端语言那样严谨，调试不是很方便，所以一开始要养成严谨的javascript编辑习惯；javascript很强大很灵活，不要幻想短时间内熟练（更别说精通）它，并写些框架、类库，初始阶段还是先用熟练已成熟的框架（比如jquery）当入门；一定要熟练使用客户端调试工具。

6 服务器端语言开发经验，PS切图技术

Web前端开发介于设计与开发中间，所以两端的东西都得懂点。编辑语言是相通的，之前编写过服务器语言，对学习javascript是十分有益的，从图片转成静态HTML页面，少不了PS切图技术。

5 浏览器的兼容性

由于历史原因，浏览器的兼容性一直都折磨web前端工程师的地方，虽然有W3组织，并制定了一些规范，虽然浏览器产商都正在努力改进并接近其规范，但现实网络环境中各种内核、各种版本的浏览器都有一席之地。解决浏览器兼容性靠经验积累，可喜的事这方面资料网上有很多。http://www.w3help.org/zh-cn/这是个很好的参考网站。

6 快速学习能力和主动学习意愿

web前端的发展很快，从事这一行业一定要有快速学习能力和主动学习意愿，这样才能适应web产品的要求。在web前端领域没有绝对的是与非,解决一个问题的方法有很多，但我们要找到一个更合适的方法，找到一个更合适的方法需要经验作积累，总之web前端入门容易，想熟练很难，需要更多的主动学习意愿。

7 良好的沟通能力

优秀的前端工程师需要具备良好的沟通能力，因为你的工作与很多人的工作息息相关，比如项目经理、设计师、最终用户、开发工程师，前端工程师位于这几类人的交汇点上，这些角色的要求你都得照顾好，平衡这四类人的需求，拿出一个比较合适的方案。由此可见沟通能力对前端工程师要求更高。大家可以看看下面这篇博文：http://www.cnblogs.com/trance/archive/2011/08/31/2160617.html。

最后提供一些好的学习资料：

1. W3C学习网站（http://www.w3school.com.cn/），上面的资料很全，很实用，是最好的入门资料。

2. 《javascript权威指南》

3. 《javascript+DOM编程艺术》

4. 《javascript高级程序设计》

您可能感兴趣的文章

前端工程师前途的路该怎么走

前端工程师必备的前端开发手册

admin — Thu, 12 Apr 2012 13:10:47 +0800

快捷导航：

另外还搞了个Firefox插件《前端开发工具集》，把资源整合到一个菜单下，方便查询。数据放在线上(Google AppEngine)，速度应该会有保证，更新也会比较方便。

在线工具集

书籍类：
- Book Shelf 2.0 beta —— 荐，分类很清晰，下载很方便
- Book Go!
- 原版图书免费下载链接收集站
- 51CNNET.NET
JavaScript类：
- Beautify JavaScript —— JavaScript格式化工具，效果很理想
- AJAX Libraries API
- Regex Tester
- Compressor Packer —— 以前一直用这个压JS，自从有了TBCompressor，就放弃他了
CSS类：
- CSS选择器性能测试
- CSSTidy —— CSS格式化工具
- CSS Compressor —— CSS压缩
其他：
- GUID 生成器 —— 做某些东西(Firefox插件)时需要唯一资源标志符时用
- W3Counter
- WebWait – Benchmark Your Website

常用Firefox插件

支付宝安全控件和旺旺协议 —— 网购专用，Firefox+浦发网银，无敌了
Firebug —— 这个不用介绍了吧，附空帏的外部编辑器乱码修正版
- Firecooike —— 支持Cookie的查看和编辑
- Jiffy —— 调试性能的，用起来比较麻烦，没试过
- YSlow —— Why Slow? YUI出品
- Pixel Perfect —— 把设计稿直接拖到Firefox里进行对比
- Rainbow for Firebug —— JS高亮，性能不是很理想
Fiddler 开关 —— 简化在Firefox里切换Fiddler的操作，感谢Taobao UED的空帏同学
Web Developer
DevBoi —— 把Html, Dom, JavaScript等手册放在侧栏里，可以自定义增加，快捷键Ctrl+F9。可以在这里找到更多的Package。
RefControl —— 针对每个站点发送想要的HTTP Referer
GreaseMonkey —— 看某个网站不爽，写个小脚本来优化下还是不错的
HttpFox —— 查看当前Http链接状态，类似IE下的HttpWatch
User Agent Switcher —— 切换User-Agent，同时开发iphone和web版本的时候很方便
FoxyProxy —— 穿墙工具，配合专业代理公布器使用很和谐

IE下的调试工具

Fiddle2 —— 非常强悍的一款http流查看工具，默认支持IE，其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述”Fiddler 开关”进行快速切换。支持插件。
IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能，IE8自带了一个加强版的。
Microsoft Script Debugger + Companion.JS —— 调试JS用，虽然报错还是有误差，但是我已经满足了。安装顺序是：Microsoft Script Debugger，Companion.JS，在”IE选项-高级”里取消禁用脚本调试。
多版本IE共存两种方案：
- IE7/8 + IE Tester —— 大众型配置，可以基本满足日常需要。
- IE6 + Internet Explorer Collection —— 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代，我还是推荐这种方案，因为只有神奇的原装IE 6，才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话，建议再装个IE 8 + IE Tester，因为IE 8下的Developer Toolbar还是有很大改进的，调试起来会方便一些。
以下三个软件相对不重要些：
- HttpWatch —— http流查看
- Instant Source —— 可查看JS生成的源码
- NetLimiterPro —— 网速限制

参考手册

XHTML、CSS & DOM W3C 手册 —— 玉伯整理的版本，包含了W3C手册以及其他有用的资料。
苏昱的CSS中文手册和Dom中文手册
JScript语言参考
XML指南
XMLHTTP参考手册
jQuery 1.2.6 API和jQuery and jQuery UI Reference 1.2
Apache 2.2 中文版参考手册在线版
MySQL 5.1 参考手册 (在线版)
PHP手册
YUI Cheatsheet
Cheat Sheet Roundup – Over 30 Cheatsheets for developers
23个Cheatsheet打包下载

批处理工具

TBCompressor —— 淘宝UED的JS/CSS压缩工具，详见玉伯的介绍
pngOptimizer —— png优化工具
jpegTran —— jpeg去冗余meta工具

IDE及其他工具

Editplus v301 汉化版
Tortoise SVN
移动版本的 Apache + PHP —— 灰常灰常好用，灰常灰常移动，见明城的说明
…

Bookmarklet(右键另存)

Firebug Lite —— 官方介绍
Xray —— 官方介绍
MRI —— 官方介绍
‘+ window.document.documentElement.outerHTML+ ””>查看生成的源码，‘+ window.document.documentElement.outerHTML+ ”);})()”>打开新窗口查看生成的源码—— for IE

开发者社区及权威网站

您可能感兴趣的文章

前端开发的一些必备工具信息

您可能也喜欢：
IE6、IE7、IE8与FireFox最全的CSS浏览器兼容问题整理	不要滥用jQuery的$(this)	判断IE浏览器的简单快速方法	Lazy Load 延迟加载图片的 jQuery 插件	jquery技巧总结大放送
无觅

您可能也喜欢：
百度收录减少的问题怎么解决	你知道百度和谷歌搜索引擎收录网页的细微差别吗？	百度不收录、收录减少、排名降低的原因和解决方法	百度对部分SEO问题有了官方回答	利用百度自身产品增加博客外链的办法
无觅

您可能也喜欢：
WordPress显示相对日期时间的代码	JS 显示当前日期与时间的代码	WordPress 3.0 beta 1版本发布	wordpress后台和登录页面报错	开启wordpress 3.0多用户的方法
无觅

您可能也喜欢：
31个Javascript的实用工具	JavaScript trim函数的十二种实现	javascript中的107个基础知识收集整理	JavaScript操作iframe里的dom	javascript 正则表达式-替换
无觅

您可能也喜欢：
div中用css让图片垂直居中	12个用jQuery插件改变Button按钮的漂亮特效	简单实现圆角不固定长度的button样式	Firefox 9正式版可下载，提升JavaScript性能20-30%	用JavaScript 控制input的值
无觅

您可能也喜欢：
2012年14个HTML5的大胆预言	Web 前端优化最佳实践之 Server 篇	不是必须资深站长才能写好软文的	基于Nginx的Web服务器引擎淘宝Tengine正式开源	微软必应挑战谷歌搜索引擎
无觅

您可能也喜欢：
HTML5将推动Web App发展	前端工程师必备的前端开发手册	前端开发的一些必备工具信息	不写代码也能开发HTML5游戏-可视化开发工具	前端开发经验小结
无觅

您可能也喜欢：
解决Firefox下input button内文字垂直居中	兼容性很好的div、图片上下居中的css写法	封装好的javascript图片滑动效果	javascript 实现的完全兼容鼠标滚轴缩放图片的代码	javascript图片预加载技术
无觅

时代前端

jquery准确判断ie6浏览器

您可能感兴趣的文章

百度搜索引擎对中文URL收录情况

您可能感兴趣的文章

让wordpress时间显示为xx秒、分、天前

您可能感兴趣的文章

JavaScript编程语言的编码规范

随机日志推荐

解决Firefox下input button内文字垂直居中

您可能感兴趣的文章

微软最新的服务器版操作系统叫Windows Server 2012

随机日志推荐

苹果让不懂编程的人也可以做APP开发

随机日志推荐

div中用css让图片垂直居中

随机日志推荐

web前端工程师入门及发展方向

您可能感兴趣的文章

前端工程师必备的前端开发手册

在线工具集

常用Firefox插件

IE下的调试工具

参考手册

批处理工具

IDE及其他工具

Bookmarklet(右键另存)

开发者社区及权威网站

推荐订阅的博客和网站(排名不分先后)

您可能感兴趣的文章