JavaScript2谁刚开始学习应该知道4最佳实践文章(翻译)

原版的:24 JavaScript Best Practices for Beginners

(注:阅读原文的时候没有注意公布日期,觉得不错就翻译了,翻译到JSON.parse那一节觉得有点不正确路才发现是2009年公布的文章,只是还是不错的啦。

另外,文章虽说24条最佳实践。其实仅仅有23条,不知道原作者怎么漏了一条。

1.优先使用===,而不是==

JavaScript使用两种相等性操作符:===|!==和==|!=。通常觉得做比較的最佳实践是使用前一组操作符。

“若两个操作数的类型和值同样,那么===比較的结果为真,!==比較的结果为假。” — JavaScript语言精粹(JavaScript: The Good Parts)

然而。假设使用==和!=,当比較不同类型的操作数时,你就会碰到问题啦。在这样的情况下,这组操作符会尝试对操作数的值做没用的强制转换。

2.Eval就是糟糕的代名词

对于那些不熟悉JavaScript的人来说,函数”evel”让我们可以訪问JavaScript编译器。我们可以通过给”eval”传递一个字符串參数来得到该字符串运行的结果。

这不仅会极大地降低你的脚本的性能。也会造成一个巨大的安全隐患,由于这赋予传递进来的纯文本太多的能力。要尽可能地避免eval函数的使用。

3.不要懒手

技术上来说,你确实可能侥幸地省略多数花括号和分号。

大多数浏览器都可以正确地解释例如以下代码片段:

if(someVariableExists)
    x = false

然而,再考虑一下这段代码:

if(someVariableExists)
    x = false
    anotherFunctionCall();

可能会有人觉得上一段代码等价于:

if(someVariableExists) {
    x = false;
    anotherFunctionCall();
}

非常不幸,他错了。其实。它的本意是:

if(someVariableExists)
    x = false;
anotherFunctionCall();

你应该也注意到了。代码中缩进模仿了花括号的功能。毋庸置疑,这是非常恐怖的做法,不管怎样都应该避免。唯一可以省略花括号的时候是在一行式的语句中。但即使这样的情况,也是非常有争议的。

if(2 + 2 === 4) return ‘nicely done‘;

始终要想着以后

假设以后的某个时候,你须要在这样的if语句中添加很多其它的命令,那该怎么办呢?没法子。你就仅仅能重写这块代码了。处理这个问题的底线是对于省略写法保持慎重。

4.使用JS Lint

JSLint是Douglas Crockford编写的一个调试器。

简单地将你的脚本拷贝进去,它就会高速地扫描你的代码中不论什么明显的问题和错误。

“JSLint获取一份JavaScript源代码,然后扫描代码。假设发现问题,就会返回一条信息描写叙述这个问题以及这个问题在源代码中的大致位置。

问题尽管常常是语法错误,却不一定是。JSLint也会查看一些风格习惯以及结构问题。它并不证明你的代码是否正确,仅仅是提供另外的一双眼睛来帮助发现问题。”—JSLint文档

在结束脚本代码的编写之前。对其运行一次JSLint。可以保证你不会犯一些愚蠢的错误。

5.将脚本置于页面的底部

这条技巧在本系列前面的文章中也推荐过。由于它在此处也非常合适(As it’s highly appropriate though),所有我将那段信息直接粘贴在这里。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFodXlvbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" />

记住—这条最佳实践的主要目标是尽可能高速地为用户载入页面。当载入一个脚本时。浏览器直到整个脚本文件所有载入完毕才干继续。因此,用户必须等上更长的时间才干注意到不论什么的进度。

假设JS文件的目的仅仅是添加功能—比如,在点击某个button后—那么就将那些文件放在底部,body结束标签之前吧。

这绝对是一个最佳实践。

更好的做法

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6.在For语句之外声明变量

当运行一个冗长的”for”语句之时。仅仅让解释引擎做必须干的活吧。比如:

糟糕的做法

for(var i = 0; i < someArray.length; i++) {
    var container = document.getElementById(‘container‘);
    container.innerHtml += ‘my number: ‘ + i;
    console.log(i);
}

注意上面代码片段中的每次迭代都须要检查数组的长度。并且每次都要遍历DOM树找到”container”元素—效率多低啊!

更好的做法

var container = document.getElementById(‘container‘);
for(var i = 0, len = someArray.length; i < len; i++) {
    container.innerHtml += ‘my number: ‘ + i;
    console.log(i);
}

感谢有位朋友留下评论展示怎样进一步优化上面的代码块。

7.构建字符串的最快方式

当须要遍历一个数组或者对象之时。不要总是使用你能信手粘来的”for”语句。创造性地找个可以完毕工作的最高速的方案。

var arr = [‘item 1‘, ‘item 2‘, ‘item 3‘, ...];
var list = ‘<ul><li>‘ + arr.join(‘</li><li>‘) + ‘</li></ul>‘;

“我不会以測试基准来烦你。你仅仅须相信我(或者自己去測试一下)—这是眼下为止最快的方式!

使用原生方法(比方join())。不用管抽象层面背后发生了什么。一般会比不论什么非原生方法快得多。 — James Padolsey, james.padolsey.com”

8.降低全局变量

“通过将全局的东西封装进单个命名空间。可以大大降低与其它应用、部件、代码库交互混乱的概率。”— Douglas Crockford

var name = ‘jeffrey‘;
var lastname = ‘Way‘;

function doSomething() {...}

console.log(name);      // Jeffrey -- or window.name

更好的做法

var DudeNameSpace = {
    name: ‘Jeffrey‘,
    lastname: ‘Way‘,
    doSometing: function() {...}
}
console.log(DudeNameSpace.name);    // Jeffrey

注意我们是怎样将全局性的“足迹”降低为一个命名可笑的”DudeNameSpace”对象的。

9.凝视你的代码

一開始看起来似乎没有必要。但请相信我。你将会想尽可能好地凝视你的代码。当你几个月后再次回到项目。会发生什么呢?发现你根本没法轻松地记起当初对每一行代码的想法。或者。假设你的某个同事须要改动你的代码。那又会怎么样呢?始终,一直记着凝视你代码的重要部分吧。

// Cycle through array and echo out each name
for(var i = 0, len = array.length; i < len; i++) {
    console.log(array[i]);
}

10.拥抱渐进增强

始终考虑到怎样处理JavaScript禁用的情况。或许你会想“大多数我网页的阅读器都是启用JavaScript的,因此我不操心这个问题。”然而。这会是一个巨大的错误。

你曾花时间去看过关闭JavaScript后你的美丽的滑动条是什么样么?(下载Web开发人员工具栏以方便干这事。)或许它会全然破坏你的网站。依照以往经验,设计你的网站时应假设将会禁用JavaScript。

那么,一旦你这样做了,那么開始渐进地增强你的网页布局吧!

11.不要传递字符串给”SetInterval”或”SetTimeOut”

考虑一下例如以下代码:

setInterval(
"document.getElementById(‘container‘).innerHTML += ‘my new number: ‘ + i", 3000
);

这段代码不仅低效,并且其行为与”eval”函数同样。永远不要传给字符串给SetInterval和SetTimeOut。相反,应传递一个函数名。

setInterval(someFunction, 3000);

12.不要使用”With”语句

乍一看。”With”语句似乎是个聪明的想法。基本概念是它们可以为訪问深度嵌套对象提供一种简写方式。比如…

with (being.person.man.bodyparts) {
    arms = true;
    legs = true;
}

代替例如以下写法

being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs = true;

非常不幸,经过一些測试,会发现这样的简写在设置新成员时表现非常糟糕。作为替代,你应该使用var。

var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;

13.使用{}而不是New Object()

JavaScript中有多种创建对象的方式。或许更传统的方式是使用”new”构造器,像这样:

var o = new Object();
o.name = ‘Jeffrey‘;
o.lastname = ‘Way‘;
o.someFuncion = function() {
    console.log(this.name);
}

然而,这样的方式因其行为并非我们所想的那样而被觉得是“糟糕的实践。

相反,我推荐你使用更健壮的对象字面方法。

更好的写法

var o = {
    name: ‘Jeffrey‘,
    lastName: ‘Way‘,
    someFunction: function() {
        console.log(this.name);
    }
};

注意假设你仅仅是想简单地创建个空对象。{}就派上用场了。

var o = {};

“对象字面量使我们可以编写支持非常多特性的代码,并对代码的实现者来说代码仍然相对直观。不须要直接调用构造器或维护传递给函数的參数的正确顺序,等等。” — dyn-web.com

14.使用[]而不是New Array()

这同样适用于创建一个新数组。

过得去的写法

var a = new Array();
a[0] = ‘Joe‘;
a[1] = ‘Plumber‘;

更好的写法

var a = [‘Joe‘, ‘Plumber‘];

“JavaScript中一个常见的错误是须要数组时使用对象或须要对象时使用数组。规则非常easy:当属性名是小的连续整数时,你应该使用数组。否则,使用对象”—Douglas Crockford

15.一长串变量?省略”var”keyword,使用逗号替代

var someItem = ‘some string‘;
var anotherItem = ‘another string‘;
var oneMoreItem = ‘one more string‘;

更好的写法

var someItem = ‘some string‘,
    anotherItem = ‘another string‘,
    oneMoreItem = ‘one more string‘;

相当的不言自明。

我不知道这里是否有不论什么真正的速度提升,可是它使你的代码更加简洁了。

16.始终,始终使用分号

技术上来说,大多数浏览器都同意你的省略一些分号。

var someItem = ‘some string‘
function doSomething() {
    return ‘something‘
}

话虽如此,但这是一种非常糟糕的做法。可能导致更大的问题。问题查找起来也更困难。

更好的写法

var someItem = ‘some string‘;
function doSomething() {
    return ‘something‘;
}

18.”For in”语句

遍历对象内的成员时。你也会得到方法函数。

为了解决问题,应始终将你的代码包装在一个if语句中来过滤信息。

for(key in object) {
    if(object.hasOwnProperty(key)) {
        ... then do something...
    }
}

引自JavaScript: 语言精粹, Douglas Crockford著

19.使用Firebug的”Timer”特性来优化代码

须要一种高速简单的方法来检測一个操作花费多长时间么?使用Firebug的”timer”特性记录结果。

function TimeTracker() {
    console.time("MyTimer");
    for(x=5000; x > 0; x--){}
    console.timeEnd("MyTimer");
}

20.阅读。阅读。再阅读

我是一个Web开发博客的超级粉丝(比方这个博客!

)。但吃午餐或者睡前,博客确实不是书籍的替代品。始终在你的床前桌上放一本wen开发书籍吧。

例如以下是一些我最喜欢的JavaScript书籍。

多阅读几遍。我仍旧在读。

21.自运行函数(Self-Executing Functions)

相比调用函数。当页面载入或调用父函数时,让函数自己主动运行会简单些。简单地将你的函数包装在圆括号内,并加入额外的一对圆括号。其本质上就调用了这个函数。

(function doSomething() {
    return {
        name: ‘jeff‘,
        lastName: ‘way‘
    };
 })();

22.原始(raw)JavaScript代码的运行速度始终快于使用代码库

JavaScript代码库,如jQuery和Mootools,可以为你节省大量的编码时间—特别是使用AJAX操作。话虽如此。始终谨记代码库的运行速度始终是比不上原始JavaScript代码的(假设了代码的正确性)。

jQuery的”each”方法用来做遍历非常赞,但使用原生”for”语句始终会快一些。

23.Crockford的JSON.Parse

尽管JavaScript 2应该有一个内置的JSON解析器,但写本文之时,我们仍旧须要自己实现。

Douglas Crockford。JSON的创造者,已经实现了一个解析器供你使用。可以从这里下载。

简单地导入该脚本。你就能获得一个新的JSON全局对象。用于解析你的.json文件。

var response = JSON.parse(xhr.responseText);

var container = document.getElementById(‘container‘);
for(var i = 0, len = response.length; i < len; i++) {
    container.innerHTML += ‘<li>‘ + response[i].name + ‘ : ‘ + response[i].email + ‘</li>‘;
}

24.删除”Language”

几年前,在script标签内常见有”language”属性。

<script type="text/javascript" language="javascript">
...
</script>

然而,这个属性非常早就被弃用了,所以就不要再使用了。

就这些了。同志们

如今你知道这JavaScript刚開始学习的人应该知道的24条基本技巧。

有机会,让我知道你现在的提示。感谢您的阅读。

时间: 2024-10-11 23:47:35

JavaScript2谁刚开始学习应该知道4最佳实践文章(翻译)的相关文章

[WebView学习之六]:Web Apps最佳实践规则

上一篇我们学习了([WebView学习之五]:调试Web Apps),今天我们来继续学习. (博客地址:http://blog.csdn.net/developer_jiangqq),转载请注明. Author:hmjiangqq Email:[email protected] 为移动设备开发Web页面以及Web应用程序(Application)和开发传统的桌面Web浏览器相比存在一些不同的地方以及难点.为了帮助你更好的开发以及为移动设备开发出更加有效的Web应用程序,以下讲到的开发实践规则将会

跟着刚哥学习Spring框架--AOP(五)

AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.OOP引入封装.继承.多态等概念来建立一种对象层次结构,用于模拟公共行为的一个集合.不过OOP允许开发者定义纵向的关系,但并不适合定义横向的关系,例如日志功能.日志代码往往横向地散布在所有对象层次中,而与它对应的对象的核心功能毫无关系对于其他类型的代码,如安全性.异常处理和透明的持续性也都是如此,这种散布在各

跟着刚哥学习Spring框架--通过XML方式配置Bean(三)

Spring配置Bean有两种形式(XML和注解) 今天我们学习通过XML方式配置Bean 1. Bean的配置方式 通过全类名(反射)的方式   √ id:标识容器中的bean.id唯一. √ class:bean的全类名,通过反射的方式在IOC容器中创建Bean,所以要求Bean中必须有无参的构造器 2.依赖注入的方式 1)属性注入:通过setter方法注入Bean的属性值或依赖的对象 属性注入使用<Property>元素,使用name指定Bean的属性名称,使用value指定Bean的属

跟着刚哥学习Spring框架--Spring容器(二)

Spring容器 启动Spring容器(实例化容器) -- IOC容器读取Bean配置创建Bean实例之前,必须对它进行实例化(加载启动),这样才可以从容器中获取Bean的实例并使用.  Bean是Spring管理的基本单位,任何的Java对象和组件都被当成Bean处理,容器还负责管理Bean与Bean之间的依赖关系.  两种类型的启动实现   1.BeanFactory:IOC容器的基本实现,是Spring框架的基础设施,面向Spring本身: -- Spring容器最基本的接口就是BeanF

跟着刚哥学习Spring框架--创建HelloWorld项目(一)

1.Spring框架简介 Spring是一个开源框架,Spring是在2003年兴起的一个轻量级的开源框架,由Rod johnson创建.主要对JavaBean的生命周期进行管理的轻量级框架,Spring给JavaEE带来了春天. 2.Spring框架特点 √ 轻量级:不是说他的文件大小很小,指的Spring是非侵入性. 知识点:轻量级框架和重量级框架的区别 轻量级和重量级的框架是以启动程序所需要的资源所决定,比如EJB在启动程序的时候需要消耗大量的资源,内存和CPU,所以是重量级.√ 依赖注入

JavaScript 刚開始学习的人应知的 24 条最佳实践

原文:24 JavaScript Best Practices for Beginners (注:阅读原文的时候没有注意公布日期,认为不错就翻译了,翻译到 JSON.parse 那一节认为有点不正确路才发现是 2009 年公布的文章,只是还是不错的啦. 另外,文章虽说 24 条最佳实践,事实上仅仅有 23 条.不知道原作者怎么漏了一条. ) 1. 优先使用 ===.而不是 == JavaScript 使用两种相等性操作符:===,!== 和 ==,!=. 通常觉得做比較的最佳实践是使用前一组操作

跟着刚哥学习Spring框架--通过注解方式配置Bean(四)

组件扫描:Spring能够从classpath下自动扫描,侦测和实例化具有特定注解的组件. 特定组件包括: 1.@Component:基本注解,识别一个受Spring管理的组件 2.@Respository:标识持久层组件 3.@Service:标识业务层组件 4.@Controller:标识表现层组件 Spring 有默认的命名策略: 使用非限定类名, 第一个字母小写. 也可以在注解中通过 value 属性值标识组件的名称 当在组件类上使用了特定的注解之后, 还需要在 Spring 的配置文件

刚开始学习java,麻烦大师求教

刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教刚开始学习java,麻烦大师求教poioc.com/vote/detail/2366

刚开始学习CAD应该选择使用哪一款看图软件呢?

刚开始学习CAD应该选择使用哪一款看图软件呢?相信很多刚开始从事CAD方面的朋友来说,选择一款好用的CAD看图软件无疑是一件大事,这样不仅可以提高你的工作效率还可以进行对图纸的精准查看,那么对于CAD初学者来说应该选择哪一款看图软件?今天小编就来给大家安利一款好用的CAD看图软件及操作步骤讲解,希望进行采纳! 第一步:首先打开您电脑上面的浏览器,输入"迅捷CAD看图"然后点击搜索,在下方出现的百度推荐中找到官网然后点击进入即可!第二步:点击进入之后选择"迅捷CAD看图软件&q