转:为什么你的Javascript技术很烂?

2011年7月11日 1 条评论

Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言。它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让人嘲笑的东西是动态语言的概念是偏偏使用了高标准的静态数据类型。其实,你和Javascript都站错了立场,而现在,你让Javascript很生气。这里有五个原因能说明你的Javascript技术很烂。

1. 你没有使用命名空间。

是否还记得在大学里老师告诉你不要在家庭作业里使用全局变量?Javascript里的全局变量的使用方法也不例外。Web网页稍不留神就会变的混乱不堪、到处都是从互联网上各个角落里找来的乱糟糟的相互侵犯的脚本和脚本库。如果你把一个变量命名成loader(),那你是成心自找麻烦。如果你在无意识的情况下重载了一个函数,Javascript根本不会提醒你。你还把它叫做一种学前教育编程语言,还记得吧?我要说的是,你需要知道在做了这些后发生什么情况。

1 function derp() { alert(“one”); }

2 function derp() { alert(“two”); }

3 derp();

“two”,答案是“two”。并不是一定会这样,它也可能是“one”。所以,把你所有的代码都放在自己的命名空间里,这很容易。下面是定义自己的命名空间的一个简单做法。

4 var foospace={};

5 foospace.derp=function() { alert(“one”); }

6 function derp() { alert(“two”); }

7 foospace.derp();

2. 你在变戏法,你把变量定义的东一个西一个。

你使用莫名其妙的数字字母组合作为变量名是一个双输的结局。在40行的代码块了中寻找一个不带任何表意的字符变量,对于维护工作来说简直是场噩梦。把对变量的第一次声明混合到一个40行的代码块里同样也是一场噩梦。即使你自己遇到这样的变量时,你也要不由的问自己:“这是在哪里定义的?”,然后迅速的使用Ctrl+F组合在源代码里寻找这个变量最初定义的位置。不,不要这样,相反,这是对Javascript的滥用,是一种愚蠢的做法。你应该始终把变量定义在它的使用范围的顶部。并不能说因为这不是必须的,你就可以不这样做。

8 function() {

9 var a, //description

10 b; //description

11 //process…

12 }

3. 你没有理解Javascript的变量范围。

你是个天才的程序员,你吃的是C++、拉的是List。你知道什么是变量范围,你对你的变量有完全的控制,你就像太上皇似的的注视着它们。然而,Javascript却在你的咖啡里拉了一泡屎,并且大笑不止。

13 var herp=”one”;

14 {

15 var herp=”two”;

16 }

17 alert(herp);

在这种情况下你得到的herp不是“one”,而是“two”。Javascript的变量有效范围并不是跟其它语言一样依赖于代码块。Javascript的变量范围是以函数为基础的。每个函数都有它自己的变量范围,Javascript这一点上表现的很酷,根本不理睬这毫无意义的花括弧包起来的范围。事实上,Javascript是如此的酷,以至于你甚至可以将变量范围像命名空间或变量那样进行传递。

4. 你以为Javascript的面向对象特征只是嫁接而来的。

Javascript,自从呱呱落地起,它就是一个面向对象的语言。所有的东西在Javascript里都是对象,所有的!甚至数字和字符这样的文字符号都可以通过它自身固有的构造器转化成对象。跟其它面向对象的语言比起来,Javascript的不同之处在于,它没有类(class)。Javascript对象像函数那样定义,甚至函数自己也是对象。Javascript有个属性叫做prototype,所有对象里都内置了这个属性,你可以通过它来改变对象的构造,修改对象、添加更多的变量、更多的功能。

18 var derp; // will hold a Herp instance

19 var Herp= function() {

20 this.opinion=”Javascript is cooler than BASIC.”;

21 }

22 Herp.prototype.speak=function() { alert(this.opinion); }

23 var derp= new Herp();

24 derp.speak();

如果这个看起来跟你毫不相干,我愿意介绍我的好朋友Google给你,Google擅长于帮助人们学习知识。面向对象对于我这篇简短的、低姿态的文章来说实在是个太大的话题。

5. 你使用“new”关键字时就像是盲人瞎马。

Javascript肯定是你的初恋女友,因为你显得无所适从。如果你想像真人那样取悦Javascript,你需要去了解对象符号。除了在需要实例化一个对象,或罕见的需要延时加载数据的情况外,你基本上不需要使用new关键字。在Javascript里分配大量的new变量地址是一项很慢的操作,为了效率起见,你应该始终使用对象符号。

25 var rightway= [1, 2, 3];

26 var wrongway= new Array(1, 2, 3);

是否还记得我说过Javascript的变量范围是以函数为基础的?是否还记得有人说Javascript的对象像函数那样定义?如果你不使用new关键字来声明一个对象,你将会使这个对象成为全局范围内的对象。所以,永远使用new关键字来声明对象是一个好习惯。

27 var derp=”one”;

28 var Herp=function() {

29 this.derp=”two”;

30 }

31 var foo=Herp();

32 alert(derp);

如果你这样写,Javascript并不会在意,而你真正弹出的答案是“two”!有很多方法可以防止对象做出这样的行为,可以以使用instanceOf,但更好的方法是正确的使用new关键字,这样显得更专业。

现在你知道你的Javascript代码写的很烂了吧,如果你记住了上面所说的东西,你的代码就会有所改善。我喜欢用3个tab键来缩进代码,我喜欢用下划线来连接单词,我喜欢把函数名首字母大写来表示它是对象。当然,这个是另外一场讨论了。有很多原因会导致你的Javascript代码写的很烂,就像我有很多技术很烂一样,所以,尽情的在评论里表达你的意见,支持,反对,不吝赐教。

分类: 技术分享, 杂七杂八 标签:

15个编程好习惯

2011年3月23日 评论已被关闭

转载:这是国外程序员Al katib总结的一些编程习惯。
1. 动手编码之前,你需要对要编码实现的解决方案有一个正式的或粗略的设计。永远不要在没有任何设计的前提下就开始编码,除非所编代码不重要。
2. 优秀的代码文档跟编程语言知识一样重要。在代码源文件中,为每个主要的代码段添加注释,解释代码的基本逻辑。最好注明程序的构建和修改日期,以及修改的原因也是非常有必要的。

  3. 维护程序的各个版本同样重要。当前有些编程工具都自带一个版本管理工具。无论你什么时候改变自己的程序,它们都会将其保存为.bak文件。

  我的方法是为每个程序维护三个不同的版本。比如说,我有一个名为program.c的文件,这个文件同时也被其他项目组成员使用。我把这个文件复制为 program.c.old作为备份文件,并且当我修改时,我会备份另一个名为program.c.wrk的副本文件。当成功完成修改时替换 program.c.wrk文件。

  你还可以给自己的程序版本添加一个日期或一些注释,像program260505.c或programReadFnWrking.c。

  4. 如果工程包含多个源文件,则声称一个README文件,注明每个源文件、数据文件、临时文件以及日志文件(如果有的话)的作用。你还可以注明编译和运行步骤。

  5. 有时候,你一定想知道为什么IF语句没有得到预想的结果。可能你使用的是等号,也就是“=”,而不是条件判定符号“==”。一个比较好的办法是用相反的顺序写条件语句。因此,你的条件语句应该如下:

  if(10==i)…因此,如果你错误地写成了单个等于号,在编译的时候也能检查出来并报错。

  6.使用循环和条件语句时,先把左右括号对应起来,然后再在里面写其他语句。也就是:

代码: 1 for(int i=0;i<10;i++)2 {4 printf(“i=%dn”,i);3 }   注:每一行开头的数字表明写循环代码的顺序。

  7. 避免使用幻数(magic numbers)。例如,不要写

代码: circleArea = 3.14 * pow(radius,2); 而要使用如下代码:

代码: #define PI 3.14 circleArea = PI * pow(radius,2);   
  8. 使用有意义的变量和函数名称。例如,使用‘radius’来代替圆的半径,而不是用‘r’来表示。同样,函数名‘calculateArea’要比其他任何隐晦的缩写要好得多。匆忙之下,我们也许会使用缩写的变量名,但一开始节省时间的话,之后会浪费更多的时间,去猜测缩写变量名代表什么。(编注:)

  9. 为后面的调试使用打印语句,这是个好习惯。但是,当完成最后代码后,去掉这些语句,有时也是一项危险的任务。添加一个方法,用于输出调试信息。当最终版本生成时,只要把这个方法注释掉就行。因此,只在一个地方做修改就可以了。

  10. 代码编写完之后,开始优化代码。之前声明的一些变量,现在可能没用了。同样,并不依赖循环的一些声明可以移到循环模块之外去。扎实的编译知识同样会对以后的代码优化有所帮助。

  11. 对自己的操作系统和硬件要有足够的了解,你可以从资源占用等方面提升程序的性能。

  12. 编写代码时要合理使用缩进,以使代码清晰可读。

  13. 把项目文件放到SOURCE、HEADERS、MAKE、EXES等不同的文件夹中。

  14. 研究别人编写的代码。这可以让你学习到新的编程技术,以及他们解决和你相同的任务时所使用的方法。

  15. 最后一条(但不是最不重要的一条),备份源代码文件,这样当硬盘出错或相同的问题发生时,不至于前功尽弃。

  译文:伯乐在线
  原文作者:Al katib

网站开发人员应该知道的62件事

2010年11月27日 3 条评论

转载一篇不错的文章

有人在Stack Overflow上发问,动手开发网站之前,需要知道哪些事情? 不出意料地,他得到了一大堆回答。通常情况下,你需要把所有人的发言从头到尾读一遍。但是,Stack Overflow有一个很贴心的设计,它允许在问题下方开设一个wiki区,让所有人共同编辑一个最佳答案。于是,就有了下面这篇文章,一共总结出六个方面共计62条”网站开发须知”。

我发现,这种概述性的问题,最适合这种集合群智、头脑风暴式的回答方式了。这也是我第一次觉得,Stack Overflow做到了Wikipedia做不到的事。(难怪它最近挤进了全美前400大网站。)

在我的印象中,关于网站开发,这样全面的概述性文章非常少见,因此也就非常有用。大家不妨看看,62件事情中你做到了多少?

一、界面和用户体验(Interface and User Experience)

1.1

知道各大浏览器执行Web标准的情况,保证你的站点在主要浏览器上都能正常运行。你至少要测试以下引擎:Gecko(用于Firefox)、Webkit(用于SafariChrome和一些手机浏览器)、IE(你可以利用微软发布的Application Compatibility VPC Images进行测试)和Opera。同时,不同的操作系统,可能也会影响浏览器如何呈现你的网站。

1.2

除了浏览器,网站还有其他使用方式:手机、屏幕朗读器、搜索引擎等等。你应该知道在这些情况下,你的网站的运行状况。MobiForge提供了手机网站开发的一些相关知识。

1.3

知道如何在基本不影响用户使用的情况下升级网站。通常来说,你必须有版本控制系统(CVS、Subversion、Git等等)和数据备份机制(backup)。

1.4

不要让用户看到那些不友好的出错提示。

1.5

不要直接显示用户的Email地址,至少不要用纯文本显示。

1.6

为你的网站设置一些合理的使用限制,一旦超过门槛值,就自动停止服务。(这也与网站安全相关。)

1.7

知道如何实现网页的渐进式增强(progressive enhancement)。

1.8

用户发出POST请求后,总是将其重导向(redirect)至另外一个网页。

1.9

不要忘记网站的可访问性(accessibility,即残疾人如何使用网站)。对于美国网站来说,有时这是法定要求WAI-ARIA有一些这方面很好的参考资料。

二、安全性(Security

2.1

阅读《OWASP开发指南》,它提供了全面的网站安全指导。

2.2

了解SQL注入(SQL injection)及其预防方法。

2.3

永远不要信任用户提交的数据(cookie也是用户端提交的!)。

2.4

不要明文(plain-text)储存用户的密码,要hash处理后再储存。

2.5

不要对你的用户认证系统太自信,它可能很容易就被攻破,而你事先根本没意识到存在相关漏洞。

2.6

了解如何处理信用卡

2.7

在登录页面及其他处理敏感信息的页面,使用SSL/HTTPS

2.8

知道如何对付session劫持(session hijacking)。

2.9

避免”跨站点执行“(cross site scripting,XSS)。

2.10

避免”跨域伪造请求“(cross site request forgeries,XSRF)。

2.11

及时打上补丁,让你的系统始终跟上最新版本。

2.12

确认你的数据库连接信息的安全性。

2.13

跟踪攻击技术的最新发展,以及你使用的平台的最新安全漏洞。

2.14

阅读Google的《浏览器安全手册》(Browser Security Handbook)。

2.15

阅读《网络软件的黑客手册》(The Web Application Hackers Handbook)。

三、性能(Performance)

3.1

只要有可能,就使用缓存(caching)。正确理解和使用HTTP cachingHTML5离线储存

3.2

优化图片。不要把一个20KB的图片文件,作为重复出现的网页背景图案。

3.3

学习如何用gzip/deflate压缩内容(deflate方式更可取)。

3.4

将多个样式表文件或脚本文件,合为一个文件,这样可以减少浏览器的http请求数,以及减小gzip压缩后的文件总体积。

3.5

浏览Yahoo的Exceptional Performance网站,里面有大量提升前端性能的优秀建议,还有他们的YSlow工具。Google的page speed则是另一个用来分析网页性能的工具。两者都要求安装Firebug

3.6

如果你的网页用到大量的小体积图片(比如工具栏),就应该使用CSS Image Sprite,目的是减少http请求数。

3.7

大流量的网站应该考虑将网页对象分散在多个域名(split components across domains)。

3.8

静态内容(比如图片、CSS、JavaScript、以及其他cookie无关的网页内容)都应该放在一个不需要使用cookie的独立域名之上。因为域名之下如果有cookie,那么客户端向该域名发出的每次http请求,都会附上cookie内容。这里的一个好方法就是使用”内容分发网络”(Content Delivery Network,CDN)。

3.9

将浏览器完成网页渲染所需要的http请求数最小化。

3.10

使用Google的Closure Compiler压缩JavaScript文件,YUI Compressor亦可。

3.11

确保网站根目录下有favicon.ico文件,因为即使网页中根本不包括这个文件,浏览器也会自动发出对它的请求。所以如果这个文件不存在,就会产生大量的404错误,消耗光你的服务器的带宽。

四、搜索引擎优化(Search Engine Optimization,SEO)

4.1

使用”搜索引擎友好”的URL形式,比如example.com/pages/45-article-title,而不是example.com/index.php?page=45。

4.2

不要使用”点击这里”之类的超级链接,因为这样等于浪费了一个SEO机会,而且降低了”屏幕朗读器”(screen reader)的使用效果。

4.3

创建一个XML sitemap文件,它的缺省位置一般是/sitemap.xml(即放在网站根目录下)。

4.4

当你有多个URL指向同一个内容时,在网页代码中使用<link rel=”canonical” … />

4.5

使用Google的Webmaster Tools和Yahoo的Site Explorer

4.6

从一开始就使用Google Analytics(或者开源的访问量分析工具Piwik)。

4.7

知道robots.txt的作用,以及搜索引擎蜘蛛的工作原理。

4.8

将www.example.com的访问请求导向example.com(使用301 Moved Permanently重定向),或者采用相反的做法,目的是防止Google把它们当做两个网站,分开计算排名。

4.9

知道存在着恶意或行为不正当的网络蜘蛛。

4.10

如果你的网站有非文本的内容(比如视频、音频等等),你应该参考Google的sitemap扩展协议

五、技术(Technology)

5.1

理解HTTP协议,以及诸如GET、POST、sessions、cookies之类的概念,包括”无状态”(stateless)是什么意思。

5.2

确保你的XHTML/HTMLCSS符合W3C标准,使得它们能够通过检验。这可以使你的网页避免触发浏览器的古怪行为(quirk),而且使它在”屏幕朗读器”和手机上也能正常工作。

5.3

理解浏览器如何处理JavaScript脚本。

5.4

理解网页上的JavaScript文件、样式表文件和其他资源是如何装载及运行的,考虑它们对页面性能有何影响。在某些情况下,可能应该将脚本文件放置在网页的尾部

5.5

理解JavaScript沙箱(Javascript sandbox)的工作原理,尤其是如果你打算使用iframe。

5.6

知道JavaScript可能无法使用或被禁用,以及Ajax并不是一定会运行。记住,”不允许脚本运行”(NoScript)正在某些用户中变得流行,手机浏览器对脚本的支持千差万别,而Google索引网页时不运行大部分的脚本文件。

5.7

了解301重定向和302重定向之间的区别(这也是一个SEO相关问题)。

5.8

尽可能多得了解你的部署平台(deployment platform)。

5.9

考虑使用样式表重置(Reset Style Sheet)。

5.10

考虑使用JavaScript框架(比如jQueryMooToolsPrototype),它们可以使你不用考虑浏览器之间的差异。

六、解决bug

6.1

理解程序员20%的时间用于编码,80%的时间用于维护,根据这一点相应安排时间。

6.2

建立一个有效的错误报告机制。

6.3

建立某些途径或系统,让用户可以与你接触,向你提出建议和批评。

6.4

为将来的维护和客服人员撰写文档,解释清楚系统是怎么运行的。

6.5

经常备份!(并且确保这些备份是有效的。)除了备份机制,你还必须有一个恢复机制。

6.6

使用某种版本控制系统储存你的文件,比如SubversionGit

6.7

不要忘记做单元测试(Unit Testing),Selenium之类的框架会对你有用。
(完)

原文网址:http://stackoverflow.com/questions/72394
译者:阮一峰

.htaccess文件操作

2010年11月25日 没有评论

Htaccess 文件是Apache HTTP web服务器的纯文本配置文件。无需访问httpd.conf 文件,用户就可以设置目录选项。因此,要求你的服务器使用Apache,并且主机也支持htaccess文件(大多数主机都支持)。

防止盗链

盗链 也叫内嵌链接,是指一个网站的链接直接导向另一个网站上的对象。这会给另一个网站造成带宽和流量的损失。对于提供大量图片的站点来说,这个问题就比较严重。 使用htaccess可以解决这个问题。

  我们将按下面的步骤一步步操作

  首先得打开Apache里的mod_rewrite,用于实现重新定向用户的请求。

  下一步,用RewriteCond设置条件。这需要运用到两个参数TestString 和CondPattern.TestString是用来验证CondPattern的字符串(使用常规的表达)。.${HTTP_REFERER}是Apache提供的域名请求变量。为了保护代理服务器用户提交空白请求,这里允许用户发送空白HTTP请求。

  接着,用同样的句法设置允许链接图片的URL.命令最后的[NC]标记,只是让重写引擎忽视它。你可以用相同的句法添加更多的域名。为了方便举例,我添加了我的个人域名。

  最后,最后一行是重写规则,上面所有的条件都不满足的情况下使用。也要用到两个变量Pattern和Substitution,pattern用的是常规的表达匹配,substitution 是替换任何匹配用的。此时,申请需以jpg、png、 gif结尾。找到申请后,用空白来替代。通过标签来进一步说明要干什么, NC代表无符合的情况,F发送403禁止错误页面给用户,L告知重写引擎停止重写,因此其它规则都不再适用。

  这种方法相当简单,我们的目的也就是告诉用户我们不想他们盗用我们的图片,那么干脆不发送403错误禁止页面直接把盗链请求转到一个图片。把最后一行的代码用下面的代码替换就可以。

  #show an alternate image

  RewriteRule \.(jpg|png|gif)$ http://demo.collegeaintcheap.com/envato/htaccess/hotlink/images/hotlink.jpeg [NC,R,L]

  你可以把域名URL地址改为图像路径,不过需要以jpg、png、gif 结尾。要不然会重新运用规则给服务器造成死循环。我建议使用.jpeg来解决这个问题。这里R标记取代F代表发送一个转向。

通过IP地址阻止用户

  如果网站上出现大量的垃圾邮件,就可以通过IP地址来阻止用户。你可以在日志文件里找到他们的IP,只要把IP地址添加到htaccess文件就可以。

  Order Deny,Allow

  Deny from 24.121.202.23

  # Deny from 0.0.0.0

  在mod_access模块里用Order指令可以拒绝或允许指定IP访问。只要使用句法Deny from IP ADDRESS就可以禁止这些用户访问我们的目录。

禁止列出文件目录

  • Options +Indexes:显示目录下所有文件
  • Options -Indexes:隐藏目录下所有文件
  • IndexOptions +FancyIndexing:显示目录下所有文件,文件前面包含文件类型的小图标
  • IndexOptions -FancyIndexing :显示目录下所有文件,但不包含文件类型的小图标
  • IndexIgnore *.php *.exe:隐藏指定格式的文件, 其余文件正常显示(隐藏所有的php和exe文件)

错误页面

400 (语法错误)
401 (未通过验证)
403 (拒绝请求)
404 (找不到请求的页面)
500 (服务器内部错误)

.htaccess设置其它错误页面的代码参考:

ErrorDocument 403 /errordocs/error403.html
ErrorDocument 404 /errordocs/error404.html
ErrorDocument 500 /errordocs/error500.html

升级时转向

  如果你的网站正在升级,你需要转向到另一个页面通知用户,以防止用户看到损坏页面或者加载过程出现的潜在安全漏洞问题。在页面对所有用户开放前,我们需要先允许指定IP访问来测试。所有这些都可以在htaccess 文件上实现。

  我们还是使用mod_rewrite 不过是一种逆向思维。首先我们需要设定条件来排除升级的文档,否则服务器陷入循环。接着,测试用的IP不执行转向。最后用重写规则给用户发回一个升级页面。标签还是跟之前的一样,只不过定向到302状态,告诉浏览器该页面暂时迁移了并做相应的缓存。同样地在Smashing Magazine,里也有很多的网站维护页面。

分类: 技术分享 标签:

简单HTML看出IE的容错性

2010年11月4日 没有评论

<html><head>
<style type=”text/css”>
#a {
margin:0 10px 10px;
}

#b {
width:100%;
}

</style>
<title>IE Crasher</title>
</head>
<body>
<table><tr><td>
<div id=”a”>
<form id=”b”>
<input type=”text” name=”test”/>
</div>
</td><td width=”1″></td></tr></table>
</body></html>

分类: 业界活动 标签: