[关闭]
@mynameiszhangxu 2015-04-13T06:18:07.000000Z 字数 2420 阅读 2283

JS代码风格

笔记


基本格式

变量和函数

均遵循小驼峰大小写命名法
对于变量的命名,前缀应当是名词
对于函数的命名,第一个词为动词,常用动词如下

动词 含义
can 函数返回布尔值
has 函数返回布尔值
is 函数返回布尔值
get 函数返回非布尔值
set 函数用来保存一个值

常量

大写字母和下划线来命名

构造函数

使用大驼峰命名法

字符串

单引号和双引号都可以,但是在自己的代码中,需要从头到尾保持同一种风格
考虑到 Java是使用双引号,所以为了确保能在 js和 Java间切换,建议使用双引号

null

对于理解 null,最好的方式是将它当作对象的占位符(placeolder)

  1. var person = null;
  2. console.log(typeof person); //object

undefined

值得注意 一个变量有没有被声明,typeof 的返回值都是 undefined
值得注意 null == undefined 结果为 true

  1. var person;
  2. console.log(typeof person); //undefined
  3. console.log(typeof foo); //undefined

对象直接量

在直接量中写出写出所有属性。

  1. //不好的写法
  2. var book = new Object;
  3. book.title = "Maintainable JavaScript";
  4. book.author = "Nicholas C. Zakas";
  1. //好的写法
  2. var book{
  3. title:"Maintainable JavaScript",
  4. book.author = "Nicholas C. Zakas";
  5. };

数组直接量

和对象直接量类似

  1. //不好的写法
  2. var colors = new Array("red", "green","blue");
  3. var number = new Array(1, 2, 3, 4);
  1. //好的写法
  2. var colors = ["red","green","blue"];
  3. var numbers = [1, 2, 3, 4];

语句和表达式

for-in循环

  1. var prop
  2. for(prop in object){
  3. if(object.hasOwnProperty(prop)){
  4. console.log("property name is " + prop);
  5. console.log("property vaule is " + object[prop]);
  6. }
  7. }

变量、函数和运算符

变量声明

所有的 var 语句,都提前到包含这段逻辑的函数的顶部执行

var 语句:
将所有的 var 语句合并成一个语句,没有初始化的变量出现在var 语句的尾部,是一种不错的风格

  1. function dosomethingWithItems(items) {
  2. var value = 10,
  3. result = value + 10,
  4. i
  5. len
  6. for (i=0, len=items.length; i < len; i++){
  7. dosomething(items[i]);
  8. }
  9. }

立即调用函数

JavaScript允许声明匿名函数,并允许将其赋值给变量或属性。

  1. var dosomething = function() {
  2. // 函数体
  3. };

这种匿名函数同样可以同过在最后加上一堆圆括号来立即执行并返回一个值,然后将这个值赋值给变量。

  1. //不好的写法
  2. var value = function() {
  3. // 函数体
  4. return {
  5. message:"Hi"
  6. }
  7. }();

为了让直行的函数能够有被一眼看出来,可以将函数用以队员括号包裹起来:

  1. //好的写法
  2. var value = (function() {
  3. // 函数体
  4. return {
  5. message:"Hi"
  6. }
  7. }());

相等

所有的编程风格中都建议用===!==来代替=!=

注意

  1. console.log(null == undefined); // true

eval()

eavl()会将传入的字符串当做代码来执行。

  1. eval("alert('Hi')");

在 JavaScript 中 eval()并不是唯一可执行JavaScript字符串函数,使用Function 构造函数也能做到这一点,setTimeout()setInterval()也可以。

  1. var myfunc = new Function("alert('Hi!')");
  1. setTimeout ("document.body.style.background='red'", 50);
  1. setInterval("docunment.title = 'It is now'" + (new Date()), 1000);

但是一个通用的原则是,严禁使用Function,并且只在别无他法的时候使用eval()
setTimeout()setInterval()也是可以的,但不要使用字符串形式,要用函数。

  1. setTimeout(function() {
  2. document.body.style.background='red';
  3. }, 50);
  1. setInterval(function() {
  2. docunment.title = 'It is now' + (new Date());
  3. }, 1000);

原始包装类型

有三种: String、Boolean、Number.
有这样的特殊用法:

  1. var name = "NIcholas";
  2. console.log(name.toupperCase());

原始包装类型作用是让原始值具有对象般的行为

编程实践

将HTML从javaScript中抽离

简单客户端模板

  1. <li><a href="%s">%s</a></li>

这段模板中包含的%s占位符,这个未知的文本会被程序替换掉。JavaScript程序会将这些占位符替换成真的数据,然后将其注入DOM

  1. function sprintf(text) {
  2. }
  3. // 用法
  4. var result =
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注