您现在的位置是:首页 > 教程资讯 > 编程开发

针对JavaScript初学者的24条实用建议[TUTS]

2021-11-25 18:00:08【编程开发】人查看

简介 本文列出了24条能让你的代码编写过程更为轻松高效的建议。也许您还是JavaScript初学者,刚刚写完自己的Hello World,那这里有很多对您的工作将十分有用的小贴士;也许有些技巧您已经知道,那就试试快速浏览一下,看能不能发现一点新东西吧!

注意:Firebug控制台对象在本文中被多次使用。请参考Firebug控制台API。欲知更多关于萤火虫的详细介绍,请点击这里。1.将====替换为=====在==JavaScript中有两种不同的相等运算符:===|!==和==|!=。相比之下,前者更值得推荐。请尽量使用前者。00-1010 "如果两个比较对象具有相同的类型和值,===返回true!==返回false。JavaScript :好的部分但是,如果您使用==和!在操作不同的数据类型时,可能会遇到一些意想不到的问题。在判断是否相等之前,JavaScript会尝试将其转换为字符串、数字或布尔量。2.避免使用Eval函数Eval函数以字符串为参数,以JavaScript语句的形式执行字符串,并返回结果(引用)。这个函数不仅会降低你的脚本的执行效率,还会大大增加安全风险,因为它给了太多的权限作为文本的参数。不要用它!3.不要使用快速书写。从技术上讲,您可以省略句子末尾的大多数括号和分号,大多数浏览器可以正确执行以下语句:如果(somaveriableexists)x=false,则将内容复制到剪贴板

引用:
。但是,如果是这种情况:如果(somvariableexists)x=false,则将内容复制到剪贴板
代码:
。你可能认为它相当于下面的语句:如果(somaveriableexists){ x=false,则将内容复制到剪贴板
代码:
;另一个函数调用();不幸的是,事实并非如此。现实情况是,它相当于:如果(somaveriableexists){ x=false,则将内容复制到剪贴板
代码:
;}另一个函数调用();正如你所注意到的,无论缩进有多美,它都无法取代这个华丽的卷曲括号。在所有情况下,请在句末写清楚花括号和分号。偶尔只能省略一行语句,虽然极不建议这样做:将内容复制到剪贴板
代码:
如果(2 2==4)返回' nice done ';多想想未来,孩子假设在未来的发展过程中,你需要给这个if语句添加更多的命令吗?到时候,不用加括号吗?好好利用JS LintJSLint是道格拉斯克洛克福特写的一个调试器。你只需要粘贴你的代码,它就能快速为你扫描出任何明显的错误和问题。00-1010 "jslint扫描收到的代码。找到问题,描述它,并给出它在源代码中的大致位置。可以发现的问题包括但不限于语法错误,尽管语法错误确实是最常见的。JSLint还会用既定的习惯检查代码的格式样式和结构错误。扫描JSLint并不能保证你的程序是完全正确的。它只是给你多了一双发现错误的眼睛。”在JSlint文档完成代码之前,放入JSLint中进行检查,这样可以快速消除你的粗心错误。5.加载页面底部的脚本,如下图所示:

请记住——。我们必须尽一切可能确保客户端的页面加载速度尽可能快。在加载脚本之前,浏览器无法加载页面的其余部分。如果你的JS文件只增加了一些额外的函数——,比如点击链接的绑定事件——,可以等到页面加载基本完成。最好将JS文件放在页面的末尾和正文的结束标记之前。更好的方法是将内容复制到剪贴板。

代码:
p超哥是世界上最帅的人。Benhuoer.com是世界上最美的博客。/pscript type=' text/JavaScript ' src=' http : path/to/FIle . js '/script script type=' text/JavaScript ' src=' http : path/to/otherFIle . js '/script/body/html!- 0 - !-1-6.在For语句之外声明变量。当需要执行冗长的for语句时,不要让JavaScript引擎每次都重复不必要的操作。例如,很难将内容复制到剪贴板
引用:
for(var I=0;i someArray.lengthI){ var container=document . getelementbyid(' container ');container . innerhtml=' my number : ' I;console . log(I);}这段代码每次都重新定义数组长度,每次遍历DOM都要找容器元素——,太蠢了!这样更好。将内容复制到剪贴板
代码:
var container=document . getelementbyid(' container ');for(var i=0,len=someArray.length我透镜;I){ container . innerhtml=' my number : ' I;console . log(I);}我想给那些留言改进这段代码的人一个额外的惊喜!欢迎留言讨论!7.当你想在快速构建一个字符串的时候对一个数组或者对象做一个循环操作的时候,不要总是想着好看的for语句,去找一些思路吧!显然,有很多更快的方法:将内容复制到剪贴板
代码:
vararr=['item1 ',' item2 ',' item3 ',];var list=' ulli ' arr . join('/Lili ')'/Li/ul;00-1010“没有那么多繁文缛节来烦你;相信我一次就好(或者你可以自己试试)。——这真的是目前为止最快找到的方法了!用土的方法,不要在意背后发生了什么抽象的事情。通常,土的方法比那些优雅的方法快得多!”詹姆斯帕多西,詹姆斯。Padolsey.com 8。减少全局变量
代码:
。“把你在整个世界踩过的所有乱七八糟的脚印都放在一个名字下,可以显著降低与其他应用程序、小工具或JS库发生冲突的可能性。”道格拉斯克洛克福特将内容复制到剪贴板
代码:
变量名称=' Jeffreyvar lastName=' Way函数dosometing(){ 0.}console.log(名称);//Jeffrey-or indow . name将内容复制到剪贴板的更好方法
引用:
var dudenameespace={ name 3360 ' Jeffrey ',lastname3360' way ',做点什么3360 function(){ 0.} } console . log(dude namespace . name);//Jeffrey,注意我们如何戏剧化对象“DudeNameSpace”下的“凌乱脚印”。9.一开始你可能觉得没必要,但相信我,以后你会主动写尽可能多的评论。当你几个月后回顾一个项目时,却发现很难记住你写东西时在想什么。是不是很沮丧?或者,如果有同事想修改你的代码呢?请务必在代码的重要部分添加注释。将内容复制到剪贴板
引用:
//遍历数组并输出它们的名称(var i=0,len=array.length我透镜;I){ console . log(array);}10.尝试增量增强。当没有启用JavaScript时,一定要提供替代方法。人们可能会想,“我的大多数访问者都启用了JavaScript,所以我不用担心”。在这种情况下,你就大错特错了!你有没有试过在禁用JavaScript后,看到自己漂亮的滑块是什么样子的?(您可以下载Web Developer ToolBar来轻松完成此任务。)你的网站禁用后可能会完全失去可用性!体验:在开发初期,你总是在没有JavaScript的情况下设计网站,然后逐步增强其功能,小心翼翼地改变布局。

11.不要将字符串传递给“setInterval”或“setTimeout”。请看下面的代码:将内容复制到剪贴板

代码:
settinterval(' document . getelementbyid(' container ')。innerhtml='我的新数字3360' I ',3000);不仅执行效率低,而且与eval函数具有同样高的风险。不要将字符串传递给setInterval和setTimeout。正确的方法是传递一个函数名:将内容复制到剪贴板
代码:
setinterval(某函数,3000);12.不要使用with语句。乍一看,“with”语句似乎相当有用。它用于设置特定对象中的代码范围。它的基本用法是提供一种快速深入对象和过程元素的方法。示例:将内容复制到剪贴板
代码:
。person . man . body parts){ arms=true;腿=真;}-相当于-将内容复制到剪贴板
代码:
being . person . man . body parts . arms=true;being . person . man . body parts . legs=true;不幸的是,测试表明,如果您想在对象中插入新成员,则的性能非常差,并且执行速度非常慢。另一种方法是声明一个变量:将内容复制到剪贴板
代码:
var o=being。人。人。身体部位;o.arms=trueo.legs=true13.使用{}而不是New Object()在JavaScript中创建新对象的方法有很多。最传统的方法是new语句,如下:将内容复制到剪贴板
代码:
var o=new Object();o.name=' Benhuoero.lastName='杨';o . some function=function(){ console . log(this . name);}然而,这种方法读起来相当糟糕。我强烈建议您采用以下更健壮的写作风格:以更好的方式将内容复制到剪贴板
代码:
var o={ name : ' Jeffrey ',姓氏=' way ',some function 3360 function(){ console . log(this . name);}};请注意,如果要创建新的空对象,可以使用{}:将内容复制到剪贴板
代码:
var o={ };
代码:
“对象文字”帮助我们编写支持许多功能的代码,高度相关,简洁直接。没有必要直接调用新的语句,然后费心维护声明变量和传递变量的语句之间的正确顺序等等。"-dyn-web.com14 .使用[]而不是New Array()创建新数组时使用相同类型的应用程序。以可行的方式将内容复制到剪贴板
代码:
var a=new Array();a[0]=' Joe ';a[1]='水管工';以更好的方式将内容复制到剪贴板
代码:
var a=['Joe ',' plunger '];
引用:
“在JavaScript编程中遇到的一个常见错误是,当使用数组时,使用对象,但是当使用对象时,使用数组。规则很简单:当属性名是一个小的连续整数时,应该使用数组。在其他情况下,使用对象。“-道格拉斯克洛克福特15。一长串变量声明?不要写那么多var,把内容复制到剪贴板用逗号
代码:
var某项='某字符串';var anotherItem='另一个字符串';var oneMoreItem=“多一个字符串”;将内容复制到剪贴板的更好方法
代码:
var某项='某字符串',另一项='另一字符串',再多一项='再多一字符串';不言而喻。我不知道这是否能加快代码的执行速度,但它确实使您的代码更加干净。17.记得写分号。大多数浏览器都不允许你写结束分号:复制内容到剪贴板
引用:
var some item=' some string '函数do some(){ return ' some ' }。这样做会导致潜在的更大和更困难的问题:将内容复制到剪贴板的更好方法
代码:
var some item=' some string ';函数dosometing(){ return ' things ';} 18.当“for in”语句遍历对象时,您可能会发现仍然需要获取方法函数。因此,在这种情况下,请记住给代码一层if语句来过滤信息。

将内容复制到剪贴板

代码:
(键入对象){if(对象。hasownproperty(键){ 0.那就做点什么.}}引自道格拉斯克洛克福特制造的[/I][I]:[/I][I]。好的部分19。用Firebug的“定时器”功能优化你的代码。想快速简单的知道一次手术的时间吗?使用Firebug的计时器功能记录结果。将内容复制到剪贴板
代码:
函数time tracker(){ console . time(' my timer ');for(x=5000;x 0;x-){ } console . timeend(' my timer ');}20.读,读,读.读,读.虽然我是一个Web开发博客(像这样!),但似乎除了吃饭睡觉前看书别无选择~把一本好书放在床头柜上做Web开发!以下几本书是我的最爱:面向对象的JavaScript(中文版还没有)、JavaScript: The Good Parts(中文版)、学习jQuery 1.3(中文版还没有,不过可以看看旧的中文版)、学习JavaScript(中文版),看了很多遍!我还在看。21.与调用函数相比,当加载页面或调用父函数时,自动执行自定义函数非常简单方便。您所需要做的就是将您的函数包装在父函数中,然后添加一个额外的括号,这实际上触发了您定义的函数(了解更多信息)。将内容复制到剪贴板
代码:
(函数do something(){ return { name : ' Jeff ',姓氏3360 ' way ' };})();22.原生JavaScript总是比使用代码库(如jQuery和Mootools)更快,这可以在编写代码的过程中为您节省大量时间,尤其是在需要进行AJAX操作的时候。但是,您应该记住,只要您的代码写得正确,本机JavaScript将总是比使用代码库执行得更快。jQuery的“每个”方法对于循环操作来说非常方便,但是使用原来的for语句总是要快得多。23.Crockford的JSON。解析尽管JavaScript 2将内置一个JSON处理器,但在撰写本文时,我们仍然需要自己实现它。JSON的创造者道格拉斯克洛克福特创造了一个处理器,供我们直接使用。你可以在这里下载。导入这段代码,您就可以创建一个新的json全局对象,然后处理您的。JSON文件。将内容复制到剪贴板
代码:
var response=JSON . parse(xhr . response text);var container=document . getelementbyid(' container ');for(var i=0,len=response.length我透镜;I){ container . innerhtml=' Li ' response . name ' : ' response . email '/Li ';}查看更多关于JSON的信息。24.删除“语言”。很多年前,语言是每个脚本标签的基本属性:将内容复制到剪贴板
代码:
script type=' text/JavaScript ' language=' JavaScript './script。但是现在,这个属性已经很久没用了.所以,删除它!就这些,朋友们~就这些,这是我给JavaScript初学者的24个小技巧。亲爱的朋友们,你们怎么看?你有什么快速的提示吗?感谢您耐心阅读。