你需要知道的10个最佳javascript开发实践小结

尽管很多的开发人员都乐于颂扬javascript，但是仍旧有人看到它的阴暗面。

使用很多javascript代码的web页面会加载很慢，过多的使用javascript使得网页丑陋和拖沓。很快如何有效地使用javascript成为一个非常火热的话题。

这里让我们列出10个最佳javascript实践，帮助你有效地使用javascript。

1. 尽可能的保持代码简洁
可能大家都听到过了N遍这个代码简洁问题了。作为一个开发人员你可能在你的代码开发过程中使用了很多次，但千万不要在js开发中忘记这点。

尽量在开发模式中添加注释和空格，这样保持代码的可读性
在发布到产品环境前请将空格和注释都删除，并且尽量缩写变量和方法名
使用第三方工具帮助你实现压缩javascript。
2. 思考后再修改prototypes
添加新的属性到对象prototype中是导致脚本出错的常见原因。


代码如下:

yourObject.prototype.anotherFunction = ‘Hello';
yourObject.prototype.anotherMethod = function () { … };

在上面代码中，所有的变量都会被影响，因为他们都继承于"yourObject"。这样的使用会导致意想不到的行为。所以建议在使用完后删除类似的修改。


代码如下:

yourObject.prototype.anotherFunction = ‘Hello';
yourObject.prototype.anotherMethod = function () { … };
test.anotherMethod();
delete yourObject.prototype.anotherFunction = ‘Hello';
delete yourObject.prototype.anotherMethod = function () { … };

3. Debug Javascript代码
即使最好的开发人员都会犯错。为了最大化的减少类似错误，请在你的debugger中运行你的代码，确认你没有遇到任何细微的错误

4. 避免Eval
你的JS在没有"eval"方法的时候也可以很好的工作。“eval”允许访问javascript编译器。如果一个字符串作为参数传递到"eval"，那么它的结果可以被执行。

这会很大的降低代码的性能。尽量避免在产品环境中使用"eval"。

5. 最小化DOM访问
DOM是最复杂的API，会使得代码执行过程变慢。有时候web页面可能没有加载或者加载不完整。最好避免DOM。

6. 在使用javascript类库之前先学习javascript
互联网充斥着很多的javascript类库，很多程序员都往往使用js类库而不理解负面影响。强烈建议你在使用第三方类库之前学习基本的JS代码，否则，你就准备着倒霉吧。

7. 不要用"SetTimeOut"和"Setinterval"方法来作为"Eval"的备选
setTimeOut( "document.getID('value')", 3000);
在以上代码中 document.getID('value') 在"setTimeOut"方法中被作为字符串来处理。这类似于'eval'方法，在每个代码执行中来执行一个字符串，因此会降低性能，因此，建议在这些方法中传递一个方法。

setTimeOut(yourFunction, 3000);
8. []比"new Array();"更好
一个常犯的错误在于使用当需要数组的时候使用一个对象或者该使用对象的时候使用一个数组。但是使用原则很简单：

“当属性名称是小的连续整数，你应该使用数组。否则，使用一个对象” - Douglas Crockford, JavaScript: Good Parts的作者.

建议：
var a = ['1A','2B'];
避免：

var a = new Array();
a[0] = "1A";
a[1] = "2B";
9. 尽量不要多次使用var
在初始每一个变量的时候，程序员都习惯使用"var"关键字。相反，建议你使用逗号来避免多余的关键字，并且减少代码体积。 如下：

var variableOne = ‘string 1',
variableTwo = ‘string 2',
variableThree = ‘string 3';
10. 不要忽略分号 ";"
这往往是大家花费数个小时进行debug的原因之一。

我很确信你肯定也在其它的文章中阅读过以上相关的内容，但是大家可能往往都忽略了很多基本的规则。你是不是也曾经忽略过分号。是不是也遇到过eval关键字问题导致性能问题？希望大家能够喜欢，谢谢！

赞 (0)

相关推荐

  • 项目实践之javascript技巧

    JS设置控件enabled为可交互document.getElementById("控件ID").disabled ="";JS设置控件enabled为不可交互document.getElementById("控件ID").disabled ="none";js给dropdownlist赋值document.getElementById("控件ID").options.add(new Option(&quo

  • JavaScript 面向对象代码实践

    因此很有必要在这里为同学们举一个例子: JavaScript面向对象代码示例 //创建一个站点的构造函数,name与url是其参数 function Site(name, url) { this.url = url; this.name = name; } //为Site增加一个方法,用于显示网址 Site.prototype.show = function() { return this.name+"的网址为:"+this.url; }; //创建一个站点集合构造函数,sites是其

  • 15条JavaScript最佳实践小结

    本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深).条目顺序按重要级粗略的从高到低排列. 把外部JavaScript文件放在HTML底部 我们的目标是相同的:为用户尽可能快地显示内容.当载入一个脚本文件的时候,HTML会停止解析,直到脚本载入完毕.因此,用户可能会长时间对着一个空白的屏幕,看上去什么都没有发生.如果你的JavaScript代码只是增加

  • 加载 Javascript 最佳实践

    加载 Javascript 最佳实践

    相信很多与页面打过交道的同学都对 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生.而这 35 条最佳实践中,对 Javascript 的加载顺序的要求是:Put Scripts at the Bottom.因为根据 HTTP/1.1 specification 看来,在同一时间加载两个文件是最理想的,而 Javascript 脚本会阻碍平行下载.Steve 说那是 2008 – 2009 那个时代用的.现在,加载 Javascri

  • 你需要知道的10个最佳javascript开发实践小结

    尽管很多的开发人员都乐于颂扬javascript,但是仍旧有人看到它的阴暗面. 使用很多javascript代码的web页面会加载很慢,过多的使用javascript使得网页丑陋和拖沓.很快如何有效地使用javascript成为一个非常火热的话题. 这里让我们列出10个最佳javascript实践,帮助你有效地使用javascript. 1. 尽可能的保持代码简洁 可能大家都听到过了N遍这个代码简洁问题了.作为一个开发人员你可能在你的代码开发过程中使用了很多次,但千万不要在js开发中忘记这点.

  • 你有必要知道的10个JavaScript难点

    能够读懂这篇博客的JavaScript开发者,运气不会太差- 1. 立即执行函数 立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行.它没有绑定任何事件,也无需等待任何异步操作: (function() { // 代码 // ... })(); function(){-}是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数.立即执行函数也可以理解为立即调用一个匿名

  • 分享Java程序员应该知道的10个调试技巧

    分享Java程序员应该知道的10个调试技巧

    可以帮助识别和解决应用程序缺陷,在本文中,作者将使用大家常用的的开发工具Eclipse来调试Java应用程序.但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运行时上面. 在开始之前,推荐大家去看看Eclipse shortcuts这篇文章,它将会给你带来很多方便.在本文中使用的是Eclipse Juno版(Eclipse 4.2),在开始前给大家提3点建议! 不要使用System.out.println作为调试工具 把所有涉及到的组件日志级别激活并使用 使

  • 10个在JavaScript开发中常遇到的BUG

    就算最牛的JavaScript开发者也会犯错.有时候导致程序的执行结果和预期不一样,有时候根本无法运行.这里我总结了10个常见的错误,我相信不管是初级还是资深开发者都可能遇到. 相等混淆 x是否和y相等?x是否为真?在JavaScript中,如何正确地做相等判断很重要,但似乎很多人搞不清楚.简单概括一下,主要是下面三种情况:条件判断(if, &&, etc.),相等操作符(==),和严格相等操作符(===). 甚至,有的时候会不小心把赋值(=)当做相等操作符使用,千万不要搞错了! 避免使用

  • 10款最佳Python开发工具推荐,每一款都是神器

    在人工智能开启的时代,Python作为人工智能的首选语言,前景可以预见.因此学习Python的人越来越多.不过,很多初学Python的小白都一定有过这样的体验,因为没有好用的Python开发工具而吃了很多苦头.工欲善其事必先利其器,这道理只有在实践中才会深有体会.那么初Python用什么工具好?各个开发工具又有哪些特点?本文我就以上的问题,为初学者们介绍一下比较受欢迎且好用的工具. 一.最强终端:Upterm 本来想推荐fish或者zsh,但其实这两个我也主要是贪图自动补全这个特性.最近在用的这

  • div+css布局必须要知道的css条件注释理论及实践第1/2页

    浏览器的条件注释理论,用下面一段例子来解释这个问题 (X)HTML 下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果 复制代码 代码如下: <!--[if IE]>  <h1>您正在使用IE浏览器</h1>  <![endif]-->  <!--[if IE 5]>  <h1>版本 5</h1>  <![endif]-->  <!--[if IE 5.0]>  <h1>版本 5

  • 学习JavaScript一定要知道的3个小技巧

    目录 一.神奇的扩展运算符 1.拷贝数组 2.合并数组 3.展开对象 二.进行空检查的最佳方法 1.可选链操作符 2.空值合并运算符 三.使用 .map()..reduce() 和 .filter() 前言: 通常在 Angular 或 React 项目中,code review 时看到一些老式的 JavaScript 代码,就会将开发人员归类为初学者.但是,如果您知道以下 3 个技巧,您将被视为现代 JavaScript 的尤达大师.那么,让我们开始我们的旅程吧! 一.神奇的扩展运算符 扩展运

  • 你有必要知道的25个JavaScript面试题

    你有必要知道的25个JavaScript面试题

    1.使用 typeof bar === "object" 判断 bar 是不是一个对象有神马潜在的弊端?如何避免这种弊端? 使用 typeof 的弊端是显而易见的(这种弊端同使用 instanceof): let obj = {}; let arr = []; console.log(typeof obj === 'object'); //true console.log(typeof arr === 'object'); //true console.log(typeof null

  • 分享下网站开发人员应该知道的61件事

    不出意料地,他得到了一大堆回答. 通常情况下,你需要把所有人的发言从头到尾读一遍.但是,Stack Overflow有一个很贴心的设计,它允许在问题下方开设一个wiki区,让所有人共同编辑一个最佳答案.于是,就有了下面这篇文章,一共总结出六个方面共计61条"网站开发须知". 我发现,这种概述性的问题,最适合这种集合群智.头脑风暴式的回答方式了.这也是我第一次觉得,Stack Overflow做到了Wikipedia做不到的事.(难怪它最近挤进了全美前400大网站.) 在我的印象中,关于

  • 一定要知道的 25 个 Vue 技巧

    一定要知道的 25 个 Vue 技巧

    目录 1. 将 prop 限制为类型列表 2. 默认内容和扩展点 3. 使用引号观察嵌套值 4. 知道何时使用 v-if(以及何时避免使用) 5. 单作用域 slot 的简写(不需要模板标签!) 6. 有条件地渲染slot 6.1 为什么我们希望能够有条件地渲染slot呢? 7. 如何观察slot的变化 8. 将本地和全局风格混合在一起 9. 覆盖子组件的样式--正确的方法 10. 用上下文感知组件创造魔法 10.1 状态共享 10.2 配置 10.3 造型 11. 如何使在 Vue 之外创建的

随机推荐