前端代码标准最佳实践:javascript篇

前言

最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,JavaScript代码更符合标准,有更好的性能,更好的可维护性,尝到了重构后的甜头,也萌生了写这个系列博客的念头。前端代码有其固有的灵活性,这就导致了目前前端代码非常混乱的局面,本系列文章希望能起到抛砖引玉的作用,让更多的人重视前端代码的质量,编写更标准的前端代码。

本系列文章共有三篇,分别讨论HTML,CSS,Javascript,本篇将讨论Javascript。

目前,Javascript已广泛运用于前端应用的实现中,其中值得一提的是SpreadJS纯前端表格控件,SpreadJS是基于HTML5的JavaScript电子表格和网格功能控件,能将电子表格、数据可视化及计算功能集成在JavaScript Web应用程序中。

javascript是灵活性非常高的一种脚本语言,使得用其实现的同样功能有多种多样的写法,那么在项目中如果没有统一的规范,就会造成javascript代码难以维护,随着项目的深入,性能j也越来越差,文件也越来越大。所以尽早制定统一的编码规范是非常必要的,下面是整理的一些javascript规范供大家参考。

(1)编码格式

好的编码格式,不同人有不同的看法,但是在同一个项目中一定要有统一的格式。下面是常用的编码格式:

1,缩进: 不使用tab(\0x09)缩进,以4个空格作为逻辑的缩进。

2,左花括号应该在行的结束,而不应该单独一行。应该一直使用花括号括起逻辑块,即使逻辑只有一行,应该也用花括号括起来,这样提高了代码的可读性。例如:

for (var i=0; i<100; i++) {
     doSomething(i);
}
if (statement) {
    doSomeThing;
} else {
    doSomeThing;
}

3,用单引号定义字符串。javascript中可以用单引号或者双引号定义字符串,但是因为习惯于在html中elements的属性值的定义使用双引号,而javascript中又经常包含html代码,所以字符串定义使用单引号也是方便于在字符串内部包含含有双引号的html代码。

var content = '<span id="spanid">…';

4,注释:如果注释不是占有多行,建议使用//,不推荐使用/**/,注释应该单独占用一行,而不是写在和代码相同一行的右边。

5,空格:空格的作用是提高代码的可读性,在函数参数的逗号后面使用一个空格,在操作符前后使用一个空格,

doSomething(myChar, 0, 1);
while (x === y)

6,分号:语句结束一定要使用分号,使用分号是为了在压缩js代码时不至于出现js的编译错误,因为压缩的时候是删除了所有的空格和回车符的。

(2)命名规则

遵循规范的命名规则,提高了代码的可读性,好的命名本身就是好的注释。

1,大小写:现在较流行javascript的面向对象编程,那么就会有公有或私有的概念,原则是公有接口的命名首字母大写,私有接口的命名首字母小写。

2,命名:禁止使用各种缩写,命名应该描述其意义,而不是描述其类型,禁止使用标识类型的前缀

不推荐

getWin
function doSomething(str,  integer) {
     ... ...
}
function doSomething(strMessage,  intLength) {
    ...  ...
}

正确命名

getWindow
function doSomething(message, length) {
    ...  ...
}

(3)编程规范

javascript的编程规范关乎代码的性能,代码的简洁。

1,变量定义

变量定义使用关键字var。非必需,不要使用全局变量,这样可以减少不必要的变量定义查询。变量应该有个初始化的值,或者设置为null。避免使用关键字with,with的性能差。集中定义变量,减少代码量。

var counter = 0, empty = null;

2,函数定义

函数定义应该在其使用之前。函数内部的函数应该定义在变量之后。减少定义全局函数。函数定义为立即执行,应该用括号包含函数定义体,这样可读性好。

var statement.
function outer(c, d) {
    var e = c * d;

    function inner(a, b) {
        return (e * a) + b;
    }

    return inner(0, 1);
}

var collection = (function () {
    var keys = [], values = [];

    return {
        get: function () {
            ......
        }
    };
}());

3,函数多次调用,应该使用函数别名。比如在循环中多次调用某个函数,应该定义一个函数别名,减少调用范围链的跳转,提高性能。

function doSomething() {
    var get = getDataByIndex;

     for (var counter = 0; counter < 10000; counter++) {
        var current = get(counter);

        // ...
    }
}

4,值比较尽量使用严格比较操作符,减少类型的转换操作。

if (x === 5 && y !== 4)

5,循环与递归:尽量把性能差的操作放在循环外部。预先计算在循环中要使用的值。在上下文中有多个循环时,定义一个统一的循环变量,避免变量无意义的多次定义。

错误编码

// example 1
for (var counter = 0; counter < 10000; counter++) {
    try {
       doSomething();
    } catch (e) {
    alert('Failure: ' + e);
        break;
    }
}

// example 2
for (var counter = 0;
counter < document.getElementsByTagName('div').length;
counter++) {
    doSomething();
}

// example 3
for (var counter = 0; counter < 10; counter++) {
    doSomething1();
};

for (var counter = 0; counter < 10; counter++) {
    doSomething2();
};

正确编码

// example 1
 try {
    for (var counter = 0; counter < 10000; counter++) {
         doSomething();
     }
} catch (e) {
    alert('Failure: ' + e);
}

// example 2
var target = document.getElementsByTagName('div').length;
for (var counter = 0;counter < target ;counter++) {
    doSomething();
}

// example 3
var counter = 0;
for (counter = 0; counter < 10; counter++) {
    doSomething1();
};
for (counter = 0; counter < 10; counter++) {
    doSomething2();
};

6,Dom操作:减少Dom树的更新次数,尽量合并Dom树的更新操作,提高性能。减少赋值给innerHTML的次数。避免给Dom objects上的expando属性赋值,减少可能的内存泄漏。

7,使用全局的变量和方法:避免使用eval,eval非常耗性能。如果要使用全局的变量或方法,应该加上window,减少上下文的定义查找。

时间: 2024-09-11 07:28:35

前端代码标准最佳实践:javascript篇的相关文章

前端代码标准最佳实践:HTML篇

Web前端代码中,HTML是根本,CSS和JavaScript也是围绕着既有的HTML结构来构建,所以良好的HTML代码结构,除了提高了HTML代码的可读性,可维护性和执行性能之外,也可以让相对应的CSS和JavaScript代码更好的构建.距前面两篇探讨JavaScript(前端代码标准最佳实践:JavaScript篇)和CSS(前端代码标准最佳实践:CSS篇)之后,我们今天来探讨Web前端HTML的一些最佳实践. (1)HTML代码的基本规范 1. HTML的命名和格式 任何代码的混乱都是从

前端代码标准最佳实践:CSS篇

上一篇<前端代码标准最佳实践:javascript>发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来谈谈CSS代码的一些标准实践. 1,命名 和其他语言规范一样,css的命名也讲究命名要有意义,命名要尽可能短但是要足够表达含义:命名的词用连字符连接. 不规范的命名: #navigation{ } .dem

基于AngularJS前端云组件最佳实践_AngularJS

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发.AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此AngularJS快速的成为了javascript的主流框架. 一.Amazing的Angular AnguarJS的特性 方便的REST: RESTful逐渐成为了一种标准的服务器和客户端沟通的方式.你只需使用一行javascript代码,就可以快速的从服务器端得到数据.AugularJS将这些变成了JS

jQuery最佳实践完整篇_jquery

上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT<提高jQuery性能的诀窍>(jQuery Proven Performance Tips And Tricks).他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值. ============

断篇-金融大数据最佳实践总结篇

一.数据挖掘的价值体现 任何数据分析或者挖掘的项目都不会直接产生经济价值和意义,分析出的数据结果既不能给企业直接带来一个客户,也不能帮助企业卖出一件产品.数据分析的价值体现在于业务部门根据分析结果制定相关的经营策略并贯彻执行. 二.大数据之困-通道 大数据之困-如何打通底层数据存储到上层数据服务的通道问题,讲成为制约大数据发展的关键因素.当越来越多的人意识到大数据的未来在应用的时候,这个问题也就越来越紧迫. 三.大数据金融-行业化运作 大数据金融行业化营销模式才是王道,单独的通过打项目的方式做项

《Web前端开发最佳实践》——第2章 高效Web前端开发2.1 前端代码的结构组织和文件的命名

第2章 高效Web前端开发 本章首先将概述Web前端开发中的相关最佳实践,如前端代码文件组织.前端代码重构.前端框架的选择,以及前端开发过程中实用的开发辅助工具等,帮助读者提高前端开发的效率.好的开发方式在项目中会起到事半功倍的效果,并且可确保开发过程中的代码结构清晰,易维护.本章然后会介绍前端代码的基本命名规范和格式规范,良好的命名规范和规整的格式让代码看起来干净整洁,也体现了开发者良好的职业素养,应该说命名规范.整齐的格式不仅是开发过程中的一种约定,而且是程序员之间良好沟通的桥梁. 2.1

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

每天学一些新东西可以让一个理性之人走上不凡之路.而作为开发人员,不断的学习新东西则是我们工作的一部分, 不论这些新东西是不是来源于积极的学习经验. 在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们.准备好去升级你的代码吧! 1. 避免对全局作用域的污染 声明变量是一件很有趣的事情.有时候即使你不想这样做,但也有可能会定义出全局变量.在如今的浏览器中,全局变量都被存储在 window 对象中.而因为有许多的东西都在那个里面,所以你有可能把一

最佳的JavaScript错误处理实践_javascript技巧

不管你的技术水平如何,错误或异常是应用程序开发者生活的一部分.Web开发的不连贯性留下了许多错误能够发生并确实已经发生的地方.解决的关键在于处理任何不可预见的(或可预见的错误),来控制用户的体验.利用JavaScript,就有多种技术和语言特色可以用来正确地解决任何问题. 在 JavaScript 中处理错误很危险.如果你相信墨菲定律,会出错的终究会出错!在这篇文章中,我会深入研究 JavaScript 中的错误处理.我会涉及到一些陷阱和好的实践.最后我们会讨论异步代码处理和 Ajax. 我认为

《Web前端开发最佳实践》——导读

前 言 Web前端开发入门难度并不高,但是初学者如果没有一个很好的学习和编码习惯,则开发水平的提高速度会变得很慢.下面几点是影响Web前端开发者技术提高的主要因素. 其一是开发者缺乏良好的实践指导.Web前端兴起的时间不长,很多大学都还没有来得及开一门专门讲解Web前端的课程,因此,大部分的Web前端开发者都是通过自学的方式来了解Web前端相关的技术.开发者学习前端技术的渠道很多,其中很大一部分是通过查找网络资源的方式,而网络上充斥着大量的错误或者过时的实践方法,这些实践方法很容易误导初学者,使