`

10 个你需要了解的最佳 javascript 开发实践

阅读更多

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 关键字问题导致性能问题?

希望大家能够喜欢,谢谢!

相关阅读

  1. JavaScript中,{}+{}等于多少?

  2. JavaScript:将所有值都转换成对象

  3. 为什么 ++[[]][+[]]+[+[]] = 10?

相关书籍

53
5
分享到:
评论

相关推荐

    javascript 面向对象编程.pdf javascript 设计模式与开发实践.pdf

    这两本书——"JavaScript 面向对象编程.pdf"和"JavaScript 设计模式与开发实践.pdf"将深入探讨这些主题。 面向对象编程在JavaScript中主要体现在三个方面:封装、继承和多态。封装是指将数据和操作数据的方法捆绑在...

    一系列JavaScript项目的最佳实践

    在JavaScript开发领域,最佳实践是确保代码质量、可维护性和团队协作效率的关键。"一系列JavaScript项目的最佳实践"这个主题涵盖了从项目结构、编码规范到测试和部署等多个方面。以下是一些核心的知识点: 1. **...

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

    下面将详细说明标题中提到的10个最佳JavaScript开发实践。 1. 保持代码简洁性 保持代码简洁是编程中的一个重要原则。在JavaScript开发中,这意味着在开发阶段,开发者应该添加必要的注释和空格以提升代码的可读性。...

    JavaScript 最佳实践:帮你提升代码质量

     在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们。准备好去升级你的代码吧!  1. 避免对全局作用域的污染  声明变量是一件很有趣的事情。有时候即使你不想...

    SuperMap iClient for JavaScript开发教程_javascript_SuperMap开发教程_supe

    综上所述,"SuperMap iClient for JavaScript开发教程"涵盖了从基础到高级的GIS开发知识,旨在帮助开发者快速掌握WebGIS应用的开发技巧,实现高效、功能丰富的地图应用。通过深入学习并实践,你将能够利用SuperMap ...

    Javascript开发技术大全源代码

    本资源“Javascript开发技术大全源代码”提供了一个全面的JavaScript学习和实践平台,涵盖了从基础到高级的各种技术。 在JavaScript的世界里,了解基本语法是至关重要的。这包括变量、数据类型(如字符串、数字、...

    javaScript开发工具

    除了工具本身,了解和掌握最佳实践也至关重要,如模块化(CommonJS、ES6模块)、异步编程(Promise、async/await)、测试驱动开发(TDD)以及持续集成/持续部署(CI/CD)。这些都可以通过开发工具进行辅助实现,提高...

    JavaScript典型应用与最佳实践

    本主题深入探讨JavaScript的典型应用与最佳实践,旨在帮助开发者提升技能,优化代码,实现高效且健壮的Web解决方案。 一、变量与数据类型 在JavaScript中,变量的声明可以使用var、let或const关键字。var是函数作用...

    JavaScript凌厉开发——Ext JS3详解与实践

    10. **最佳实践**:掌握如何编写可维护、可扩展的代码,遵循最佳实践,如模块化、代码组织、文档注释等,对于团队协作和项目维护至关重要。 通过以上知识的学习和实践,开发者可以充分利用Ext JS3的强大功能,构建...

    JavaScript典型应用与最佳实践-源代码

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的交互功能,增强用户界面。在深入探讨JavaScript的典型应用与最佳...不断学习和实践这些知识点,将有助于提升你的JavaScript开发技能。

    现代Web开发的最佳实践

    3. **JavaScript开发**:JavaScript是Web开发的核心,用于实现交互性和动态功能。现代JavaScript使用ES6及以上版本的语法,如箭头函数、模板字符串和类。学习模块系统(如CommonJS或ES modules)和框架(如React、...

    SuperMap for JavaScript开发教程

    通过《SuperMap for JavaScript开发教程》,开发者不仅能够掌握SuperMap iClient for JavaScript的基本用法,还能深入理解GIS开发的原理和实践,从而在Web GIS领域中游刃有余。无论你是GIS新手还是经验丰富的开发者...

    JavaScript设计与开发新思维(英文原版)

    本书聚焦于JavaScript在现代网页开发中的应用与设计思维,深入探讨了如何利用JavaScript来构建高效、可维护的代码,并介绍了最新的JavaScript特性和最佳实践。 ### 一、现代JavaScript的演进 现代JavaScript不再...

    JavaScript最佳入门教程(中文版)

    你需要理解构造函数、原型链、继承、封装和多态等概念。其中,构造函数用于创建具有相似属性和方法的对象,原型链则解释了如何在对象间共享属性和方法,而继承是实现代码重用的一种方式。封装意味着隐藏实现细节,...

    ArcGIS API for JavaScript 开发教程

    在开始开发之前,你需要准备一个支持JavaScript的开发环境,如Visual Studio Code、Sublime Text或Atom。同时,为了运行示例和项目,你需要在本地安装并配置Web服务器,如Apache或Node.js的Express框架。 ### 3. ...

    《JavaScript网页开发-体验式学习》源代码

    通过阅读《JavaScript网页开发-体验式学习》的源代码,读者不仅能学习到JavaScript的基本用法,还能了解实际开发中的最佳实践和常见问题解决方案。书中每个例子都是一个精心设计的学习点,通过动手实践,将理论知识...

    Web GIS从基础到开发实践

    通过学习本书,读者不仅可以了解Web GIS的基本原理,还能具备使用ArcGIS API for JavaScript开发Web GIS应用的能力。对于希望从事地理信息系统开发或提升现有技能的人来说,这是一份极具价值的参考资料。

    javascript作业题答案

    通过仔细研究这些作业题和解答,你不仅可以巩固已学的JavaScript知识,还能发现一些实际开发中的最佳实践。同时,解决实际问题的经验将有助于提高你的编程技巧,让你在面对复杂的JavaScript项目时更加游刃有余。所以...

Global site tag (gtag.js) - Google Analytics