写代码的人

Posts tagged ‘javascript’

能说明你的Javascript技术很烂的五个原因

本文是从 5 Reasons Your Javascript Stinks 这篇文章翻译而来。


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

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

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

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

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

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

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

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

function() {
var a, //description
b; //description
//process…
}

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

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

var herp=”one”;
{
var herp=”two”;
}
alert(herp);

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

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

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

var derp; // will hold a Herp instance
var Herp= function() {
this.opinion=”Javascript is cooler than BASIC.”;
}
Herp.prototype.speak=function() { alert(this.opinion); }
var derp= new Herp();
derp.speak();

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

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

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

var rightway= [1, 2, 3];
var wrongway= new Array(1, 2, 3);

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

var derp=”one”;
var Herp=function() {
this.derp=”two”;
}
var foo=Herp();
alert(derp);

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

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

非常感谢rogeliorv 和 Jared Wein指出第五点中存在的错误。你们很强。

本文转载自: 外刊IT评论 http://www.aqee.net/

 

Advertisements

8个令人印象深刻的JavaScript效果的网站

这篇文章很有意思,我发现了8个具有共同特征的站点-他们都使用JavaScript脚本语言。是什么使HTML/CSS站点很漂亮、过目难忘?我们需要JavaScript的魔力,使网站更具交互性和动画特征。 下面我们就看看这8个站点。 Momento App

Momento app是个丰富的iPhone应用站点。它有2个以上的不错的图片gallery组成,值得一看。 We are fixel

干净,漂亮的站点。口号吸引我们的眼球,你可以刷新显示不同的文字组合。 Factoria

非常动画的一个站点,右侧位置的滑动效果不错。 Tom Pain

吸引人的内容幻灯,当页面加载时,好似一个Flash网站。 Pixillion

滚动条与jQuery Masonry的完美组合。 Moovents

大规模的视差效果。 Allan Yu

第一眼,你会被布局所迷惑。慢慢你会发现一些有趣的… Gauged2

出色的滑动效果… parallax插件延迟滑动。

原文:http://www.queness.com/post/7133/8-websites-with-impressive-and-original-javascript-effects

来自:http://www.oschina.net/news/16415/8-websites-with-impressive-and-original-javascript-effects

JavaScript的写类方式

从这篇起,会由浅到深的分析JS OO之写类方式,大概会有5-8篇。后面陆续会分析流行库(框架)的写类方式。一些写类工具函数或框架的写类方式本质上都是 构造函数+原型。只有理解这一点才能真正明白如何用JavaScript写出面向对象的代码。或者说组织代码的方式使用面向对象方式。当然用JS也可写出函数式的代码,它是多泛型的。

为了讨论的单一性,暂不考虑类的继承,(私有,受保护)属性或方法。EMCAScript中实际没有类(class)的概念,但可以把它理解为更广义的概念。

 

1、构造函数方式

01 /**
02 * Person类:定义一个人,有个属性name,和一个getName方法
03 * @param {String} name
04 */
05 function Person(name) {
06 this.name = name;
07 this.getName = function() {
08 return this.name;
09 }
10 }

这种风格让写过Java的有点亲切在于构造一个对象需要配置一些参数,参数要赋值给类里面this。但与Java的区别是JS用function来代替class,参数也无需定义类型。

类写好了,我们造几个对象:

1 var p1 = new Person("Jack");
2 var p2 = new Person("Tom");
3 console.log(p1 instanceof Person);//true
4 console.log(p2 instanceof Person);//true

控制台输出也证明了p1,p2的确是类Person的对象实例。

这种方式的优点是:可以根据参数来构造不同的对象实例 ,缺点是构造时每个实例对象都会生成getName方法版本,造成了内存的浪费 。

经验丰富的程序员用一个外部函数来代替类方法,达到了每个对象共享同一个方法。改写后的类如下:

1 //外部函数
2 function getName() {
3 return this.name;
4 }
5 function Person(name) {
6 this.name = name;
7 this.getName = getName;//注意这里
8 }

有人可能觉得代码风格有点差强人意,怎么看也没有Java那么紧凑。但的确可以减少内存的消耗。

2、原型方式

1 /**
2 * Person类:定义一个人,有个属性name,和一个getName方法
3 */
4 function Person(){}
5 Person.prototype.name = "jack";
6 Person.prototype.getName = function() { return this.name;}

把类的属性(字段),方法都挂在prototype上。
造几个对象测试下

1 var p1 = new Person();
2 var p2 = new Person();
3 console.log(p1.getName());//jack
4 console.log(p2.getName());//jack

可以看出输出的都是jack,原型方式的缺点就是不能通过参数来构造对象实例 (一般每个对象的属性是不相同的) ,优点是所有对象实例都共享getName方法(相对于构造函数方式),没有造成内存浪费 。

 

3、构造函数+原型

取前面两种的优点:
a、用构造函数来定义类属性(字段)。
b、用原型方式来定义类的方法。

01 /**
02 * Person类:定义一个人,有个属性name,和一个getName方法
03 * @param {String} name
04 */
05 function Person(name) {
06 this.name = name;
07 }
08 Person.prototype.getName = function() {
09 return this.name;
10 }

这样,即可通过构造函数构造不同name的人,对象实例也都共享getName方法,不会造成内存浪费。
但似乎这样的代码风格似乎仍然没有Java的类那么紧凑,把属性,构造方法(函数),方法都包在大括号内。

public class Person {
//属性(字段)
String name;
//构造方法(函数)
Person(String name) {
this.name = name;
}
//方法
String getName() {
return this.name;
}
}

为了让JS代码风格更紧凑,把挂在prototype的方法代码移到function Person的大括号内。

1 function Person(name) {
2 this.name = name;
3 Person.prototype.getName = function() {
4 return this.name;
5 }
6 }

似乎很神奇,还能这么写啊!验证一下

1 var p1 = new Person("Jack");
2 var p2 = new Person("Tom");
3 console.log(p1.getName());//Jack
4 console.log(p2.getName());//Tom

没有报错,控制台也正确输出了。说明可以这么写,似乎很完美。
a 、可以通过传参构造对象实例
b 、对象实例都共享同一份方法不造成内存浪费
c 、代码风格也比较紧凑

但每次new一个对象的时候都会执行

1 Person.prototype.getName = function() {
2 return this.name;
3 }

造成了不必要的重复的运算。因为getName方法挂在prototype上只需执行一次即可。只需稍微改造下

01 function Person(name) {
02 this.name = name;
03 if(Person._init==undefined) {
04 alert("我只执行一次!");
05 Person.prototype.getName = function() {
06 return this.name;
07 }
08 Person._init = 1;
09 }
10 }

new两个对象,

1 var p1 = new Person("Andy"); //第一次new会弹出'我只执行一次!'
2 var p2 = new Person("Lily"); //以后new的对象不会再执行了

来自:http://www.cnblogs.com/snandy/archive/2011/03/06/1971764.html

 

前端开发者应该关注的JavaScript学习资源

导语:lifesinger在他的博客中总结了JavaScript 相关的学习资源 ,不仅有相关领域内的优秀书籍,还包括很多值得关注的网站。他按照开发人员阶梯学习过程作了分类,供广大人员参考。此外,相信前端开发领域还有非常多优秀的书籍和网站,期待大家的挖掘和分享。

以下是相关内容:

最近 reddit 有讨论:References for JavaScript Mastery. 去年 Rey Bango 博客上也有一篇文章:What to Read to Get Up to Speed in JavaScript. 下面是我的整理,希望能对你有所帮助。

登堂入门

    (1)DOM Scripting: Web Design with JavaScript and the Document Object Model– 2005 年,这本书的第一版是我最喜爱的前端书籍之一。知识点的讲解轻松有趣,例子由浅入深,引人入胜。去年发现这本书有第二版了,增加了 HTML5 章节,原有内容也与时俱进。我相信无论新人还是老手,都会发现这是一本好书。

    (2)Eloquent JavaScript – 这是一本在线书籍,里面的例子都可调试。作者缓缓道来,内容翔实丰富。从 2007 年始,这本书历经四年,直到今年一月份才正式出版。建议国内有志人士翻译成中文,在保证翻译质量的基础上,造福国内前端。

    (3)jQuery Fundamentals – Rebecca Murphey 在 github 上维护的这本书,个人觉得是最好的 jQuery 入门教程,没有之一。

    (4)JavaScript: The Good Parts – Douglas Crockford 的这本书薄而精,在不同阶段阅读,会有不一样的收获。建议通读一遍,日常可随意翻翻。

    (5)我阅读过的还有几本:Professional JavaScript for Web Developersppk on JavaScript, 1/eObject-Oriented JavaScript. 都挺不错的,如果时间精力充沛,不妨读读。特别是 Stoyan Stefanov 的 Object-Oriented JavaScript, 个人觉得是非常好的一本教程式书籍,特别适合已有 OO 编程经验、同时想学习 JavaScript 的开发人员。

更上层楼

(1)JavaScript: The Definitive Guide – 学 JavaScript 的如果没读过这本犀牛书,就好像基督教徒没读过圣经一样。此书前面的章节很耐读,后面的语言参考,则方便查阅。这是 JavaScript 语言学习和参考查阅的首选书籍。该书第六版已完成,期待电子版和纸质书早日面世。

(2)Pro JavaScript Techniques – John Resig 的这本书,展现了 JavaScript 的专业开发技巧。如果想深入了解 jQuery 源码,这本书会非常有帮助。

(3)Secrets of the JavaScript Ninja – 这本书汇集了前端开发所需掌握的 JavaScript 知识的方方面面,是今年最值得期待的专业书籍之一。目前前 14 章已有电子版,最后 3 章 John Resig 还在编写中。中文版我和沉鱼已经在翻译,敬请期待。

(4)High Performance JavaScript – 如果你关注 JavaScript 的性能,那 Nicholas C.Zakas 的这本书是绝对值得一读的。

(5)JavaScript Patterns – 偷懒是程序员的优良品质,模式则是先人们总结的偷懒招式。Stoyan Stefanov 的这本书,从 JavaScript 的实际使用场景出发,提炼了不少可以让前端们偷懒的实用招式。模式的探索、创新,将永远是程序员自我提升的一条修炼之道。

(6)Douglas Crockford’s JavaScript – Crockford 大牛在 JavaScript 方面的总结,有不少经典文章,值得研读。

(7)JavaScript Garden – 这里汇集了 JavaScript 的一些经典话题,很值得花时间研读。

我阅读过的还有:High Performance Web Sites, Even Faster Web Sites, HTML5 Up and Running.

参考查阅

    Mozilla Developer Network – 这是 Web 开发人员的宝藏,遇到问题建议优先到这里查查,闲时没事也可以到这里逛逛。我相信,作为 Web 开发人员,你会喜欢这里的。

    MSDN Web Development – 遇到 IE 的兼容性问题时,如果 Google 不能解决,请马上到这里搜索。对前端来说,最经常查阅的是 HTML and CSS 与 Scripting 两部分。不要恨 IE, 一旦你了解了她,你会爱上这个敌人。

    ECMA-262 系列:ECMA-262 3rd Edition 和 ECMA-262 5th Edition, 这两个链接都是在线版本,查阅方便。此外非常推荐注释版:Annotated ECMAScript 5.1, 有阅读笔记和关联链接,适合研读。

    还有 W3C 等站点,就不细说了。

订阅关注

这个有很多,列举太耗时费力。可以 follow 我的推荐:

Google Reader 里,我的 Shared Items 很谨慎,读过且觉得值得一读或有查阅价值的文章我才会 share. Twitter, 最近用得比较少,有时会推荐一些资源,大家可酌情订阅。在我的 following 里,有一些国内外著名的前端开发人员,推荐大家根据兴趣,选择性 follow.

再推荐一个站点:JSMentors.com, 这里收集了不少全世界范围内有影响力的前端导师们,建议选择性订阅。

写在最后

这里只推荐了 JavaScript 相关的学习资源。作为一名前端工程师,还得具备 HTML, CSS, 基本的后台开发知识,以及交互设计等用户体验相关知识。这些方面的学习资源,是另一个话题,以后有机会再和大家讨论分享。

上面提到的书籍,是我读过的部分。提到的网站,是我经常光顾的。我相信还有非常多优秀的书籍和网站,期待大家的挖掘和分享了。

书籍版本的选择,我的排序是:英文纸质版 > 英文电子版 > 中文高质量翻译版。这只是我个人的一个 taste, 建议根据实际情况,选择合适自己的即可。

国内的原创前端书籍,我仔细看过的只有《悟透 JavaScript》和《JavaScript 语言精髓与编程实践》。翻译类书籍里,只抱着研究翻译的心态,看过部分译稿。如果有英语阅读能力,个人不是很推荐购买译本。目前国内前端译作,个人感觉质 量较烂,甚至离及格还有距离。高质量的翻译,需要我们所有前端共同努力了。

最后想提一点:要让自己有效消费信息,而不要让信息消费你。比如书籍,一个阶段,读一两本就好,贪多嚼不烂。学 习阶段容易产生焦虑,甚至自我否定,要调整好心态。要明白你花了一晚上可能都没弄明白的一篇博客,作者当初可能花了好几个月才研究整理出来。保持良好的心 态,不断挖掘自己的真正兴趣点和擅长点,在自知的基础上自我弥补、自我提升,在自我提升的螺旋中进一步自我认识、自我坚持。这是一种修行,有苦有乐,冷暖 自知。付出汗水,登上峰顶,才有可能见到满眼的精彩。

来自: http://sd.csdn.net/a/20110304/292973.html