【新】关于前端开发工程师的地域、薪水、工龄、技能的调查

时间:2009年03月26日作者:愚人码头查看次数:111,286 views评论次数:79

2011-04-27 增加了部分调查内容,增加了部分选项。注:该调查引用google文档,在某些时段可能无法正常访问,你懂的… ================分割线================== 关于前端开发工程师的地域、薪水、工龄、技能的调查 为了给他人和您自己做为求职和跳槽的参考,提...

[转载]JavaScript严格模式

时间:2013年06月15日作者:天涯孤雁查看次数:716 views评论次数:0

转载声明,转载自:http://ishouldbeageek.me/2013/06/09/strict-mode/

本文是我对《Strict mode》的翻译,文中的描述含我个人的理解,有可能和原文有所出入,望理解。

使用ECMAScript 5的严格模式(“strict mode”)会进入受限制的JavaScript模式。严格模式下的JavaScript并不是标准模式的一个子集,而是直接使用了不同语意的代码。JavaScript在支持和不支持严格模式的浏览器之间会有着不同的表现,所以功能开发时不要依赖于严格模式。严格模式的代码和非严格模式的代码是可以共存的,在严格模式下,非严格模式代码会递增地想严格模式代码转化。

严格模式下的JavaScript有很多处改变。首先要说说的是,严格模式下的JavaScript会表现得没那么多陷阱,该报错的时候就报错。另外,严格模式修复了JavaScript中的一些错误,使得JavaScript解释器更好地进行代码优化,也就是说严格模式下的代码运行地会快一些。同时,严格模式还阻止开发者使用一些可能会用于以后ECMAScript中的语法。

如何使用严格模式

严格模式可以使用于全局所有脚本代码,也可以单独使用到一个方法中。它可以使用在eval中的代码、Function中的代码、事件处理属性和在setTimeout方法中传入的字符串和全局脚本中。如果在一个以{}括号包裹住的代码块中使用严格模式是没有作用的。

全局脚本中使用严格模式

在全局脚本中使用严格模式其实很简单,只用在所有代码之前加入"use strict;"就可以了。

继续阅读:[转载]JavaScript严格模式»

标签:,分类:JS

Javascript 严格模式 strict mode

时间:2013年06月14日作者:愚人码头查看次数:769 views评论次数:0

声明:本文主要内容来自:http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 内容中做了少许修改,加了自己的一些认识。

“严格模式”(strict mode)是ECMA-262 Edition 5定义的新语法,表示要用严格的Javascript语法来执行,有一些过去惯用的写法就会抛出SyntaxError异常,例如:

  • 变量前没有用var宣告
  • 使用八进制语法:var n = 023和var s = "\047"
  • 使用with语句
  • 使用delete删除一个变量名(而不是属性名):delete myVariable
  • 使用evalarguments作为变量名或函数名
  • 使用未来保留字(也许会在ECMAScript 6中使用):implementsinterfaceletpackageprivateprotectedpublicstatic,和yield作为变量名或函数名
  • 在语句块中使用函数声明:if(a<b){ function f(){} }
  • 其他错误
    • 对象子面量中使用两个相同的属性名:{a: 1, b: 3, a: 7}
    • 函数形参中使用两个相同的参数名:function f(a, b, b){}
这些下面具体说明。

一、为什么使用”严格模式”(strict mode)

设立”严格模式”的目的,主要有以下几个:

  • 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
  • 消除代码运行的一些不安全之处,保证代码运行的安全;
  • 提高编译器效率,增加运行速度;
  • 为未来新版本的Javascript做好铺垫。

“严格模式”体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。

另一方面,同样的代码,在”严格模式”中,可能会有不一样的运行结果;一些在”正常模式”下可以运行的语句,在”严格模式”下将不能运行。掌握这些内容,有助于更细致深入地理解Javascript,让你变成一个更好的程序员。
本文将对”严格模式”做详细介绍。 继续阅读:Javascript 严格模式 strict mode»

标签:,分类:JS

Javascript中的delete操作符

时间:2013年05月26日作者:愚人码头查看次数:2,365 views评论次数:0

变量

说到javascript中的delete操作符,还是首先要搞清楚javascript中的变量和属性之间的关系。

javascript中,变量和对象属性关系非常微妙,甚至可以很多时候会被等同起来,因为 javascript 在执行脚本之前会创建一个Global对象,在浏览器中就是window对象,所有的全局变量都是这个Global对象的属性,执行函数时也会创建一个Activation对象,所有的局部变量都是这个Activation对象的属性。这些可以大家可以去了解一下javascript作用域和闭包。


var global = 1;
this.global; // 1, 可以通过this来访问Global对象
this.global2 = 2;
global2; // 12
function foo() {
var local = 36;
// 不过无法直接访问Activation,
// 因此无法通过 foo.local 的方式来访问local变量
}

似乎变量就等同于对象属性,其实不然,至少对于delete操作符来说还是不一样的。我的理解是变量声明是必须通过 var 语句来完成的,未通过var 语句声明的全局变量都是都是window对象的属性。这样就很容易的理解变量和对象属性的关系了。

delete操作符

delete操作符是用来删除对象属性的。对于引用类型的值,它也是删除对象属性的本身,不会删除属性指向的对象。如果有疑问可以看看基本类型和引用类型的值,或者测试下面的代码:


var o = {};
var a = { x: 10 };
o.a = a;
delete o.a; // o.a属性被删除
console.log(o.a); // undefined
console.log(a.x); // 10, 因为{ x: 10 } 对象依然被 a 引用,所以不会被回收

 

变量是不能删除的

通过var声明的变量和通过function声明的函数拥有DontDelete特性,是不能被删除。未通过var声明的全局变量(全局对象的属性)


var global = {
a: 123,
b: {
c: 1345
}
};
delete global; //无效
console.log(global)

obj = {
a: 123
};
delete obj; // 删除obj全局变量,window对象的obj属性
console.log(obj);//obj is not defined

继续阅读:Javascript中的delete操作符»

标签:,,分类:JS

说说弹窗和新窗口打开拦截

时间:2013年05月25日作者:愚人码头查看次数:2,224 views评论次数:0

一个想当老的话题,一般不是用户主动触发的弹窗和新窗口打开页面,现代浏览器就会将他们拦截。

但是在我们产品设计和开发的时候总是会碰到这些状况,比如和第三方网站合作的时候,需要新窗口打开页面,传递一些相关的数据,用户数据还要在这里验证,用户在第三方网站任务完成后,还要在我们的产品上继续用户的任务流程,所有似乎弹窗和新窗口打开第三方网站似乎是一个很好的选择,但是在我们产品,用户流程和程序设计不合理的时候,弹窗被拦截了。

在没有更好的方案实现上面说的那些情况的时候,我们只能通过程序设计和技术手段实现(关于产品的用户操作流程和产品的设计我们不讨论);

一种比较好的方案是:以新开窗口的方式(form标签上target属性设置为”_blank”)提交表单,将对应的数据提交(GET或POST方式都无所谓)到新开的处理页面(是本站的页面),新开的页面处理这些数据后,再跳转到对应的第三方页面,进行相应的操作。

这里建议在表单页面同时出现相应的操作提示,比如遮罩浮层或其他提示,以便用户在第三方网站操作完成的时候,在本站做相应的操作,或继续整个任务流程,比如最常见的完成充值后做相应的购买操作等等。

如果在当前表单页面ajax提交数据,后端处理后做相应的操作后返回对应的数据,有一个好处就是可以验证用户数据,如果数据错误可以直接在页面上提示用户修改,而不用在处理页面提示错误,再要用户来表单页面修改数据,再提交。以前新开窗口的方式打开页面可以使用模拟表单提交的方式打开新页面,但是现在不行了,至少在chrome下,模拟表单提交的方式打开新页面会被浏览器拦截。

上次在不断尝试中,发现了一个新方法:

继续阅读:说说弹窗和新窗口打开拦截»

修复OS X的Finder中文档 打开方式中重复程序的问题(转)

时间:2013年05月21日作者:愚人码头查看次数:1,850 views评论次数:0


如上图,OS X在使用一段时间后,有些软件就会重复注册打开方式,对于有洁癖的人,这是难以接受的事。

不过有个命令可以很简单的把重复项给去掉。

/System/Library/Frameworks/CoreServices.framework/Versions/A/
Frameworks/LaunchServices.framework/Versions/A/Support/lsregister -kill -r -domain local -domain system -domain user && killall Finder

OS X 10.8 以后以后的同学用这个

/System/Library/Frameworks/CoreServices.framework/Frameworks/LaunchServices.framework/Support/lsregister -kill -r -domain local -domain system -domain user

标签:,分类:前端工具

jQuery 1.9升级指南

时间:2013年02月18日作者:愚人码头查看次数:10,714 views评论次数:1

原文地址:http://jquery.com/upgrade-guide/1.9/ 翻译的不对或者不通顺的地方欢迎拍砖留言。

概述

jQuery 1.9删除或修改了几个过去行为不一致或效率低下的几个API。他们在以前的jQuery版本中已经标注过过时(deprecated)的API,特别是1.7和1.8。

在做这些变化中,团队的目标是修复jQuery的行为不一致或比较难使用的地方,在这个过程中提高整体性能,减小了文件的体积。

此列表是看似给你一些不祥的预感。因为jQuery 1.9删除和修改一些以前做特殊需求的API,比如jQuery.browser。如何升级?首先,看看你的代码,最好的方法是尝试用jQuery 1.9和Migrate(迁移)插件(如下文所述)。

本指南作为标准的jQuery API文档的附录,作为快速上手jQuery 1.9的引导。

jQuery Migrate(迁移)插件

我们认识到,现有的网站和插件可能会受到这些变化的影响,所以提供一个过渡性的升级路径—— jQuery Migrate(迁移)插件。下面的说明中,在1.9中变化或删除的API,大部分可以使用jQuery Migrate(迁移)插件恢复。请注意,jQuery 1.9中所有的变化也将应用到jQuery 2.0中,jQuery Migrate(迁移)插件在jQuery2.0中也是可用的。

未压缩,开发版本的jQuery Migrate(迁移)插件使用时会在控制台中显示警告信息,详细的指出不兼容或删除等信息及解决方法。这使得它在现有的jQuery代码和插件上查找和修复问题时非常有用。jQuery Migrate(迁移)插件包含了1.6.4以来存在但1.9已不支持所有API。

压缩版本的的jQuery Migrate(迁移)插件,不会在浏览器控制台中产生任何不兼容或删除等信息,并且可以在jQuery 1.9或更高版本,或者旧的不兼容的jQuery代码或插件中使用。

理想情况下,这将只能作为一个短期的解决方案,但是这要你自己做出决定。

更多的信息请参见: jQuery Migrate plugin

译者注:哥过一句嘴,尽早的修改原来不兼容的代码,毕竟使用jQuery Migrate(迁移)插件不是一个长久之计啊。

jQuery1.9中改变的地方

下面列表中说的并不代表jQuery 1.9中所有改变,只是我们预期的改变。完整的,详细的更改列表,请参阅jQuery的博客或访问bugs.jquery.com中发布的公告。

.toggle(function, function, … ) 方法删除

这个方法绑定两个或多个处理程序到匹配的元素,用来执行交替的点击事件。它不应该被混同于显示或隐藏匹配元素.toggle( )方法,因为它没有过时。前者被删除,以减少混乱和提高模块化程度。jQuery Migrate(迁移)插件可以恢复此功能。 继续阅读:jQuery 1.9升级指南»

标签:分类:jQuery

jQuery 1.9,jQuery2.0 beta, Migrate插件的一些注意事項

时间:2013年02月03日作者:愚人码头查看次数:8,732 views评论次数:2

本文主要内容来自:http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/
没有具体翻译,罗列了一些重要的注意点:

jQuery 1.9以前预告过是最后一个支持IE6/7/8的版本(oldIE),如今看来这已经是木已成舟的事情了,jQuery 2.0起(注: 现Beta版本),将只支持IE 9+及其他HTML5浏览器。在IE6/7/8占有绝对比例的国度,虽然有点失落,但是好在高级浏览器的占有率在逐渐上升。

jQuery 1.9 增加了一些新东西比如css3选择器等(后面再说),更加值得注意的是她删除了一些以前标记过时的API或变动了不少原来API,升级后可能导致现有代码无法兼容,还好jQuery团队也提供了Migrate(迁移)插件,用来检测弃用和已删除的API,或恢复原有的功能,对大部分API做了兼容,这样原来的程序大部分都可继续正常工作。不过如果你确实要升级还是早点改原来的代码吧!

jQuery的1.9和2.0的定位:

jQuery 1.9和2.0 API基本相同,所以我的中文文档也无耻的打上了“适用jQuery 1.9 – jQuery 2.0”,主要的差别在于jQuery 1.9仍支持IE 6/7/8。

jQuery 2.0不支持IE 6/7/8,只支持IE 9+及其他HTML5浏览器,不不支持IE 6/7/8后jQuery体积小了、执行速度更快了。

由于jQuery 1.9正式移掉不少了过去标注为过时(deprecated)的API,如果你目前程式已经避用过时API,升级到1.9不会有什么大问题,估计大部分苦逼程序员写的代码肯定或多或少使用了旧的API,无论你用哪个版本的jQuery,建议您总是首先把Migrate(迁移)插件引用进来。它搜罗了1.6.4以来存在但1.9已不支持老的API,打开浏览器的控制台,你可以看到有什么警告或错误的(通过console.log)产生,插件的警告以“JQMIGRATE”开始。可以做为原来代码的修改的参考。(注:使用jQuery Migrate压缩版(jquery-migrate-1.0.0.min.js)只提供兼容性功能而不产生警告信息,要使用开发版未压缩的jquery-migrate-1.0.0.js ,才会在控制台中显示警告信息,详细的不兼容信息及解决方法可以查看官方文档)。

1.9中的新功能:

简化的API:以前版本标记过过时的许多功能已被删除,可以查看jQuery 1.9升级指南
新的多个CSS属性获取器:现在,您可以通过传递给.css()方法一个CSS属性名称的数组并且它会返回一个相应所以CSS属性当前值的普通对象:

具体可以查看jQuery 1.9 API中文文档中的http://www.css88.com/jqapi-1.9/css/


var dims = $("#box").css([ "width", "height", "backgroundColor" ]);
// 返回的对象:{ width: "10px", height: "20px", backgroundColor: "#D00DAD" }

增强跨浏览器CSS3支持:现在jQuery1.9在所有的浏览器中支持下面的CSS3选择器,同样能在IE6下工作:
nth-last-child, :nth-of_type, :nth-last-of-type, :first-of-type, :last-of-type, :o nly-of-type , :target, :root及:lang;

具体可以查看jQuery 1.9 API中文文档中的http://www.css88.com/jqapi-1.9/category/version/1.9/

新增.finish()方法:停止当前正在运行的动画,删除所有排队的动画,并匹配元素完成所有的动画。更多的信息和示例见:jQuery 1.9 RC1 blog post;或者查看jQuery 1.9 API中文文档中的http://www.css88.com/jqapi-1.9/finish/

支持Source Map:现在,您可以引用运行压缩后的jQuery版本,但使用Source Map进行源码调试,但目前只有Chrome支持。Source Map原理可参考阮一峰的文章

修复了很多的bug:具体列表查看这篇文章的最后面http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

jQuery 2.0入门

jQuery 1.9升级指南也适用于jQuery 2.0, 在Android, iOS, 或者 Windows 8 应用, 或  Chrome/Firefox 插件上使用 jQuery 2.0是一个明智的选择。如果你想在你的网站上使用2.0,那么建议你在ie下这样引用脚本:


<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
< ![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"></script>
<!--[endif]-->

后记:
欢迎大家对jQuery 1.9 API中文文档(新版)jQuery 1.9 API中文文档(旧版)提出意见和建议,新浪微博@愚人码头
过年前准备在写jQuery 1.9升级指南,敬请期待!

标签:分类:jQuery

jQuery 1.9 中文API

时间:2013年02月01日作者:愚人码头查看次数:11,316 views评论次数:0

jQuery 1.9 中文 API:http://www.css88.com/jqapi-1.9/
改进:

  1. 套用了api.jquery.com的api文档UI;
  2. 重新做了翻译和补全;

后续改进:

  1. 准备改进搜索及美化界面;

如果你用的是chrome或chromium浏览器也可以去chrome网上应用商店下载jQuery 1.9 中文API:https://chrome.google.com/webstore/detail/jquery-19-%E4%B8%AD%E6%96%87api/akgcdalfjglabfljlcnklbdndmogiebg

 

鄙人初次翻译,翻译不对的地方请多多包含,如果发现翻译错误或者有更好的建议欢迎联系我,我会改正,万分感谢!联系方式:

新浪微博:@愚人码头

腾讯微薄:@feiwen8772

Email:admin[a]css88.com

或者在 http://www.css88.com/jqueryapi上留言

 

[投稿]CSS技巧荟萃:了解CSS页面布局和加载流程

时间:2013年01月24日作者:gbin1查看次数:5,214 views评论次数:0

日期:2013-1-28  来源:GBin1.com

CSS技巧荟萃:了解CSS页面布局和加载流程

如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局。

介绍

在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式。这里我们主要重点介绍两个类型的元素:

  • block
  • inline

如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型。

inline类型的元素包括: img,span,a等,用来定义文字或者数据,通常显示方式是“同一行显示”。更具体的说就是,如果很多的inline类型的元素在同一行的时候,它们会显示在同一行,直到宽度不够显示了,再转到下一行。例如,如下代码:

继续阅读:[投稿]CSS技巧荟萃:了解CSS页面布局和加载流程»

分类:html+css

【投稿】HTML5基本标签使用header,nav和footer

时间:2013年01月15日作者:gbin1查看次数:3,316 views评论次数:0

日期:2013-1-15  来源:GBin1.com

HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

在线演示

大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分,如下:

定义完之后呢,我们使用div标签来组织页面结构,如下:

这样的代码让我们创建了很多的非样式的CSS定义,是的代码结构复杂并且不直观易懂。 继续阅读:【投稿】HTML5基本标签使用header,nav和footer»

分类:html5+css3
Page 1 of 7712345678910Last »