JavaScript基础JavaScript的常用编码惯例(007)

采用一定的编码惯例,可以使得项目中的代码提到较高的一致性,可读性和可预测性。

1.缩进

进可以提高代码的可读性。不过错误的缩进也可能导致代码的误读。有人认为缩进应该使用tab,另外的一些人主张采用4个空格。4个空格的缩进目前是主流的
做法。简单地说,对于所有花括号中的代码(包括do, while, for, for-in, if, switch,
以及对象声明中的对象属性)都应该缩进4个空格。下面是一个缩进的例子:

function outer(a, b) {    var c = 1,
        d = 2,
        inner;
    if (a > b) {
        inner = function () {
            return {
                r: c - d
            };
        };
    } else {
        inner = function () {
            return {
                r: c + d
            };
        };
    }
    return inner;
}

2. 花括号
  对于循环体和if语句的内容只有一行的时候,花括号是可以省略的,但一个好的习惯应该总是加上花括号:

  // bad practice
 for (var i = 0; i < 10; i += 1)
    alert(i);
    alert(i + " is " + (i % 2 ? "odd" : "even"));

所以我们建议总是加上花括号:

for (var i = 0; i < 10; i += 1) {
    alert(i);
}

对于if语句来说也是这样的:

 // bad
if (true)
    alert(1);
else
    alert(2);

// better
if (true) {
    alert(1);
} else {
    alert(2);
}

3. 左边花括号的位置
有人喜欢把左边花括号放在与上一行,有人喜欢另开一行:

if (true) {
    alert("It‘s TRUE!");
}
//or:
if (true)
{
    alert("It‘s TRUE!");
}

上面的代码都没有任何问题,两种形式可以按个人喜好任先一种。但如果函数的返回值是一个对象,就要小心了:// warning: unexpected return value

function func() {
    return
    {
        name: "Batman"
    };
}

如果你期望上面的代码能返回一个对象,那结果可能会出乎意料。因为上面的函数返回的是undefined。因为那个没有加分号的return对于JavaScript的解释器来说看起来是这样的:// warning: unexpected return value

function func() {
      return undefined;
      // unreachable code follows...
      {
          name: "Batman"
      };
}

所以,我们应该总是把第一个花括号放到上一行的结束处:

function func() {
    return {
        name: "Batman"
    };
}

4. 空格
空格应该让代码更易读,所以应该放置空格的地方有很多:
   在for循环语句中里的分号后面: for (var i = 0; i < 10; i += 1) {...}
   for语句要初始化多个变量时也是如此:for (var i = 0, max = 10;i < max; i += 1) {...}
   数组定义时的逗号后面:var a = [1, 2, 3];
   定义对象属性的冒号后面和逗号后面:var o = {a: 1, b: 2};
   函数参数列表中的逗号后面: myFunc(a, b, c)
   函数声名中的花括号前面: function myFunc() {}
   当声名匿名函数时,function关键字后面:var myFunc = function () {};

总之,空格应该让代码能呼吸:

// generous and consistent spacing
// makes the code easier to read
// allowing it to "breathe"
var d = 0,
    a = b + 1;
if (a && b && c) {
    d = a % c;
    a += d;
}

// antipattern
// missing or inconsistent spaces
// make the code confusing
var d= 0,
    a =b+1;
if (a&& b&&c) {
d=a %c;
    a+= d;
}

5. 构造函数的函数名要大写首字母
JavaScript没有“类”的概念,但可以声名能用new调用的构造函数:

var adam = new Person();

这种构造函数不象Java或C,要放在类的定义中,因此它和其它的函数看起来是一样的。要区分构造函数,可以把函数名的首字母大写:function MyConstructor() {...}

function myFunction() {...}

后面我们还会介绍如何让一个函数用起来时表现得象个构造函数(而不是一般函数)。但通过首字母大定,可以有效区别它们。

6. 区分标识符中的单词

对于函数名中的单词,应该用驼峰式(camel case)的大小写。如:myFunction(),calculateArea() 以及 getFirstName()。
对于变量,或是对象的属性,则应该用下划线的形式:如:first_name, favorite_bands, old_company_name。
对于常量,应该用全大写的形式:

// precious constants, please don‘t touch
var PI = 3.14,
    MAX_WIDTH = 800;

对于对象中的私有属性和方法,则在它们前面加上下划线:

var person = {
    getName: function () {
        return this._getFirst() + ‘ ‘ + this._getLast();
    },
    _getFirst: function () {
        // ...
    },
    _getLast: function () {
        // ...
    }

在上面的代码中,getName没有加下划线,意思是public的方法,而加了下划线的_getFirst和_getLast则是私有的方法。

时间: 2024-08-07 16:58:22

JavaScript基础JavaScript的常用编码惯例(007)的相关文章

JavaScript基础Javascript中的循环

1.普通循环JavaScript中一般的循环写法是这样的: // sub-optimal loop for (var i = 0; i < myarray.length; i++) { // do something with myarray[i] } 这种写法的问题是,每循环一次,都需要从myarray对象中读取length属性,这对于JavaScript来说,可能会导致较大的性能问题.如果myarray是一些大型的对象,或是DOM对象更犹是如此,因为DOM对象的这些方法都是在执行时才进行查询

JavaScript基础——JavaScript入门

JavaScript入门 JavaScript是一种轻量级.解释型的Web开发语言,该语言系统不是很庞杂,简单易学.由于所有现代浏览器都已嵌入JavaScript引擎,JavaScript源代码可以在浏览器中直接被解释执行,用户不用担心支持问题. 一.在网页中插入JavaScript代码 使用<script>标签,可以把JavaScript源代码直接放到网页文档中. [示例1]新建HTML文档并保存为test.html,然后在<head> 标签内插入<script>标签

【JavaScript基础】------有待完善

最近开始学习JavaScript,整理了一些相关的基础知识,日后继续完善~~~ JS注释方式:// 单行注释(Ctrl+/ )/* 段落注释(Ctrl+shift+/ )*/ JavaScript基础JavaScript:基于浏览器 .基于(面向)对象.事件驱动.脚本语言JavaScript的作用:表单验证,减轻服务的压力,添加页面动画效果,动态更改页面内容,Ajax网络请求(Ajax:可以实现页面局部刷新)JavaScript组成部分:ECMAScript(5.1/6).DOM.BOMECMA

基础JavaScript练习(二)总结

任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过60个时,添加元素时alert出提示 队列展现方式变化如图,直接用高度表示数字大小 实现一个简单的排序功能,如冒泡排序(不限制具体算法),用可视化的方法表达出来,参考见下方参考资料 任务注意事项 实现简单功能的同时,请仔细学习JavaScript基本语法.事件.DOM相关的知识 请注意代码风格的整齐

零基础JavaScript编码(二)

任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM中的内容 任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上 <!DOCTYPE html> <html> <head> <meta charset=&

零基础JavaScript编码(一)

任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以下示例代码,补充其中的JavaScript功能,完成一个JavaScript代码的编写 本任务完成的功能为:用户可以在输入框中输入任何内容,点击"确认填写"按钮后,用户输入的内容会显示在"您输入的值是"文字的右边 <!DOCTYPE html> <ht

Javascript基础篇小结

Javascript基础篇小结 字数9973 阅读3975 评论7 喜欢28 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变 目的:就是用来操作内存中的DOM节点 修改D

JavaScript基础细讲

JavaScript基础细讲 JavaScript语言的前身叫作Livescript.自从Sun公司推出著名的Java语言之后,Netscape公司引进了Sun公司有关Java的程序概念,将自己原有的Livescript 重新进行设计,并改名为JavaScript. JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,有了JavaScript,可使网页变得生动.使用它的目的是与HTML超文本标识语言.Java 脚本语言一起实现在一个网页中链接多个对象,与网络客户交互作用,从而可

JavaScript基础---AJAX

内容提纲: 1.XMLHttpRequest 2.GET与POST 3.封装Ajax  发文不易,转载请注明链接出处,谢谢! 2005年Jesse James Garrett发表了一篇文章,标题为:"Ajax:A new Approach to Web Applications".他在这篇文章里介绍了一种技术,用他的话说,就叫:Ajax,是Asynchronous JavaScript + XML的简写.这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新),会带来更好的用户体验.