`

一些javascript代码的小细节

 
阅读更多
Javascript是一门非常灵活的语言,同一个功能可以有很多方法实现,有的时候我们实现了功能,却忘记了执行的效率。整理一下平时的小细节。
1.变量名、函数名、格式
命名规范就不说了。我想写代码的人都不是傻子,这个都是知道的。主要说下命名代表的意义,无论是函数名还是变量名,应该做到看名知意,这样自己看代码时也可以一样看出这段代码的意思,别人看代码时也容易理解,对于比较特别的地方应该加上注释,这个在团队合作中很重要,经常修改别人代码的人都知道当你修改别人代码的时候,首先要理解代码的作用,如果变量名和函数名乱写别人不得不花费很长时间理解你的意图。再说格式吧,一般javascript的框架有压缩版的,为什么没人喜欢看那个,因为那个变量名基本都是数字,你很难通过变量名函数名知道他的意图、再加上格式混乱、没有注释,你是不是头很大呢?既然有此感受,那你就不要自己写出来的代码和压缩过似的。看下面两种编码方式:

function a(b,c){   
this.d=b;   
this.e=c;   
}   
a.prototype={   
f:function(){   
alert(this.d);   
},   
g:function(){   
alert(this.e);   
}   
}  
上面的代码看了啥感觉。再看相同功能的下面的代码

/**  
 * User: Administrator  
 * Date: 13-04-02  
 * Time: 下午12:56  
 * Describe:创建一个人员函数  
 */  
function Person(name,age){   
    this.name=name;   
    this.age=age;   
}   
//添加方法   
Person.prototype={   
    sayName:function(){   
        alert(this.name);   
    },   
    sayAge:function(){   
        alert(this.age);   
    }   
}  
两个代码都是是同样的功能,但阅读效率却差很远。不是有个笑话么,一个编码很乱的程序员、看到自己以前写的代码、大喊一声这是哪个傻X写的代码。
2.比较布尔值
就是把bool类型的变量和true或false比较,直接上代码,如下:

if (isNot==true)   
{   
    //....执行代码   
    alert("是");   
}else  
{   
    //....执行代码   
    alert("否")   
}  
你还没看出问题么,那好,看下面的代码:

if (isNot)   
{   
    //....执行代码   
    alert("是");   
}else  
{   
    //....执行代码   
    alert("否")   
}  
看出来了吧,isNot已经是bool类型了,没必要再进行比较了。

3.bool的返回
函数中返回为bool类型时,多余的判断 ,如下代码:

function IsNotEmpty(strVlaue){   
    if(strVlaue.toString()=="")   
    {   
        return true;   
    }else  
    {   
        return false;   
    }   
}  
看不出问题的话,请往下看:

function IsNotEmpty(strVlaue){   
    return (strVlaue.toString()=="");   
}  
因为strVlaue.toString()==""已经是bool类型了,可以直接返回,没有必要用if判断后返回
4.不必要的DOM操作
多次操作DOM时,能免则免,例如如下代码:

for (var i = 0; i < 100; i++){   
    var li = $("<li>").html("This is list item #" + (i+1));   
    $("#oul").append(li);   
}  
这段代码对DOM进行了100次修改,并且创建了100个不必要的jQuery对象。正确的做法是使用一个文档片段,或者创建一个字符串,把100个元素赋给该字符串。然后附加到HTML中。这样就只需运行DOM一次

var liststring = "";   
for (var i = 100; i > 0; i--){   
    liststring += "<li>This is list item #" + (99- i)+"</li>";   
}   
document.getElementById("oul").innerHTML=liststring;  
或者如下:

var lis = [];   
for (var i = 100; i > 0; i--){   
    lis.push("<li>This is list item #" + (99- i)+"</li>");   
}   
var liststring= lis.join();   
document.getElementById("oul").innerHTML=liststring;  
在好多类库里面拼接HTML代码使用的就是数据拼接,怎么做不重要,重要的是思想,尽量最少的操作DOM
5.不必要的DOM访问
当代码中需要多次访问元素的状态信息,在状态不变的情况下我们可以将其暂存到变量中,这样可以避免多次访问dom带来内存的开销,典型的例子就是:

var lis = document.getElementByTagName("li");   
for(var i=1;i<lis.length;i++){   
    //***   
}   
//上述方式会在每一次循环都去访问dom元素,我们可以简单将代码优化如下   
var lis = document.getElementByTagName("li");   
for(var i=1,j=lis.length ;i<j;i++){   
    //***   
}  
6.对全局代码的访问
我们在编码过程中多多少少会使用到一些全局变量(window,document,自定义全局变量等等),了解javascript作用域链的人都知道,在局部作用域中访问全局变量需要一层一层遍历整个作用域链直至顶级作用域,而局部变量的访问效率则会更快更高,因此在局部作用域中高频率使用一些全局对象时可以将其导入到局部作用域中,例如:

//1、作为参数传入模块   
(function(window,$){   
      var _document = window.document;   
})(window,jQuery);   
  
//2、暂存到局部变量   
function a(){   
    var tempDocument = document;   
    var _window = window.global;   
}  
所谓新手和高手的区别就在于细节,所以想成为高手。我们就得总结积累一些细节的东西。

 

分享到:
评论

相关推荐

    Javascript Obfuscator代码混淆

    配合特定的小程序,可以自动化完成这些混淆过程,使得开发者无需深入理解混淆技术的细节,也能轻松地对JavaScript代码进行混淆处理。这无疑提高了工作效率,同时也为代码的安全性提供了保障。 在实际应用中,...

    Effective JavaScript 编写高质量JavaScript代码的68个有效方法1

    《Effective JavaScript:编写高质量JavaScript代码的68个有效方法》是David Herman撰写的一本JavaScript编程指南,该书基于作者在Ecma的JavaScript标准化委员会的工作经验,深入探讨了JavaScript的内部工作机制、...

    Java执行JavaScript代码.pdf

    根据提供的部分内容,上述知识点应该能够涵盖Java执行JavaScript代码这一主题的核心概念和技术细节。在实际应用中,开发者需要根据这些知识点来编写Java代码,以便在Java程序中集成和执行JavaScript代码。

    超酷超经典JavaScript代码

    以上仅是"超酷超经典JavaScript代码"中部分核心知识点的概述,实际资源包中每个实例可能涉及更多细节,如DOM遍历、事件委托、性能优化、错误处理等。通过深入研究这些实例,你不仅可以提升JavaScript技能,还能了解...

    JavaScript代码格式化工具

    JavaScript代码格式化工具...在压缩包中的“JavaScript代码格式化工具”可能包含了一些上述工具的安装包或教程,你可以根据自己的需求选择合适的工具进行安装和学习。记得定期更新工具,以获取最新的功能和修复的bug。

    【JavaScript源代码】JavaScript中分号的一些细节.docx

    ### JavaScript中的分号及其细节 #### 一、引言 在JavaScript编程中,关于是否使用分号的问题一直是程序员们讨论的焦点。分号在许多其他编程语言中是必须的,但在JavaScript中却并非如此。本篇文章旨在深入探讨...

    c++调用javascript代码

    本话题聚焦于"C++调用JavaScript代码",这是一个涉及多层技术栈的融合应用。C++是一种强大的系统级编程语言,而JavaScript则广泛应用于Web前端开发。通过将两者结合,我们可以构建混合式应用程序,利用C++的性能和...

    Javascript 一些需要注意的细节(必看篇)

    正确使用等值运算符、避免滥用“eval”、规范代码编写风格、合理放置脚本、优化for循环内部逻辑、减少全局变量的使用以及高效构建字符串,这些都是编写高质量JavaScript代码应该关注的要点。遵循这些最佳实践,可以...

    自用小程序反编译工具,可用于解密和还原被加密的小程序代码,以便进行修改或者了解其实现细节

    它可以将小程序中的JavaScript代码、WXML文件和WXSS样式表等资源还原成可读性较高的格式,方便开发者进行分析和修改。 适用人群包括小程序开发者、安全研究人员、黑客等。使用场景主要是在需要对已发布的小程序进行...

    ASP.NET AJAX深入浅出系列课程(19):VS 2008的JavaScript代码提示功能

    这一特性使得开发人员在编写JavaScript代码时,可以快速查找和使用各种函数、对象和属性,无需记忆大量的API细节。 首先,当开发者开始键入JavaScript代码时,VS 2008会自动提供函数名、变量名和对象属性的提示。只...

    如何组织你的javascript代码

    本文将深入探讨如何组织JavaScript代码,并提供一些实用的建议。 ### 直接使用函数 直接使用函数是一种简单的代码组织方式。这种方式适用于较小的项目或功能模块。通过直接编写函数并在适当的位置调用它们,可以...

    Iroh是JavaScript的动态代码分析工具

    标题中的"Iroh是JavaScript的动态代码分析工具"表明Iroh是一个专门用于帮助开发者在运行时理解和优化JavaScript代码的工具。动态代码分析意味着它可以在程序执行过程中收集数据,而不仅仅是静态地分析源代码。这种...

    网页javascript特效代码

    5. **点小图在本页弹出大图可关闭**:这是一个实用的功能,用户点击小图后,大图会在当前页面弹出,同时提供关闭按钮,方便用户查看细节后关闭。 6. **Flash+XML上下滚动图片代码**:Flash与XML结合,可以实现动态...

    javascript脚本代码

    根据提供的文件信息,我们可以深入探讨JavaScript中的全选、反选功能以及相关的实现细节。下面将对这段代码进行详细的解析,并解释其中涉及的关键概念和技术要点。 ### 标题:javascript脚本代码 #### 描述:完整...

    对下载驱动攻击和恶意代码JavaScript代码的监测与分析

    ### 对下载驱动攻击和恶意代码JavaScript代码的监测与分析 #### 摘要与背景 在当前复杂的网络环境中,下载驱动攻击(drive-by-download attacks)和恶意JavaScript代码日益成为网络安全领域的一大挑战。这类攻击...

    10款动感图片JavaScript代码

    "10款动感图片JavaScript代码"这个主题正是针对这一需求,提供了多种创新的图片展示方案。 这些JavaScript代码库可能包含以下几种常见的动态图片效果: 1. **轮播图**:一种常见的图片展示方式,可以自动或手动...

    JavaScript初学者应注意的七个细节小结

    标题中提到的知识点是"JavaScript初学者应注意的七个细节小结",这里说明了JavaScript初学者在学习这门语言时需要注意的一些关键细节,这些细节对于提高代码质量、优化代码结构、加深对JavaScript特性的理解至关重要...

    javascript代码,通俗易懂

    JavaScript 是一种广泛应用于 Web 开发的脚本语言,它提供了...总结,本文介绍了 JavaScript 中数组的定义、操作以及函数的定义、调用和使用细节。理解这些基础知识对于编写高效、可维护的 JavaScript 代码至关重要。

Global site tag (gtag.js) - Google Analytics