javascript 最佳实践 ( 24 章 )

代码约定

易于维护, 形成了一套 JavaScript 代码书写的约定：

跟别的语言差不多, 不过 javascript 中的大括号一定要放在 行尾, 例如:

function abc() {

  // 函数体

}

另外, 由于 javascript 变量是松散类型的, 很容易忘记变量所应包含的数据类型. 所以, 有以下3种方式可以缓解该问题.

1. 初始化：例如: ( 即 利用初值来提醒自己, 该变量的类型 )

var found = false;

var count = –1;

2. 使用类型注释

// 用于指定类型的类型注释

var found /* Boolean */ = false;

var count /* int */       = 10;

另外, 常量使用全部大写字母, 多个单词以下划线分割.

枚举类型, 同常量

不要封装基本类型

只在解析序列化串时使用 eval()

禁止 with

仅在函数内使用 this

禁止修改内置对象原型

使用 Array/Object 直接量, 避免使用 Array/Object 构造器

尽量少使用 == , 多使用 ===

变量声明, 尽量放在函数头部

所有函数都在使用之前定义

避免使用全局变量, 如果必须使用, 那么同常量书写规范

松散耦合

1. 解耦 HTML/JavaScript

理想情况下, HTML和 JavaScript 应该完全分离, 并通过外部文件和使用DOM附加来包含 JavaScript。

// 将HTML紧密耦合到 Javascript
function insertMessage(msg) {
  var container = document.getElementById("container");
  container.innerHTML = "<div class="msg"><p class="post">" + msg + "</p>";
}

一般来说, 你应该避免在 JavaScript 中创建大量 HTML, 再一次重申保持层次的分离, 这样可以很容易确定错误的来源

2. 解藕CSS/JavaScript

// css 对 Javascript 的紧密耦合

element.style.color = “red”;

element.style.backgroundColor = “blue”;

// css 对 JavaScript 的松散耦合

element.className = “edit”;

修改后, 就可以让大部分式样信息严格保留在 CSS 中.

3. 解藕 应用逻辑 / 事件处理程序 (启示就是讲逻辑写在一个函数里, 然后事件处理程序调用那个逻辑, 而不要写在一起)

编程实践

1. 尊重对象所有权

不要随意改变别人创建的对象, 不要为实例或原型添加属性, 不要为实例或原型添加方法, 不要重定义已存在的方法.

2. 避免全局量( 包含属性 和 方法 ), 如果非要创建, 最多创建一个全局量

// 两个全局量 - 不好, 避免
var name = "Nicholas";
function sayName() {
  alert(name);
}

// 一个全局量 - 还可以
var MyApplication = {
  name : "Nicholas",
  sayName: function() {
    alert(this.name);
  }
}

这种用一个全局对象作为容器, 其中又定义了其他对象, 这种方式将功能组合在一起的对象, 叫做 命名空间

命名空间很重要的一部分是确定每个人都统一使用的全局对象的名字, 并且尽可能唯一,  让其他人不太可能也使用这个名字.

3. 避免与 null 进行比较

由于 javascript 不做任何自动类型检查,

引用类型, 使用 instanceof 进行比较, 例如: if (values instanceof Array)

基本类型, 使用 typeof 进行检查, 例如: if (typeof(values) == “boolean”)

4. 使用常量

尽管 javascript 没有常量的正式概念, 但是可以通过如下方法来定义常量: 常量在比较时, 容易避免错误.

另外, 常量的好处是, 不能修改这个内容, 要真的想修改, 可以一改全改

var Constants = {
  INVALID_VALUE_MSG: "Invalid value!",
  INVALID_VALIE_URL: "/errors/invalid.php"
};

function validate(value) {
  if (!value) {
    alert(Constants.INVALID_VALUE_MSG);
    location.href = Constants.INVALID_VALUES_URL;
  }
}

性能

- 注意作用域

1. 避免全局查找

function updateUI() {
  var imgs = document.getElementsByTagName("img");
   for (var i=0, len=imgs.length; i<len; i++) {
    imgs[i].title = document.title + "image" + i;
  }
  var msg = document.getElementById("msg");
  msg.innerHTML = "Update complete.";
}

该函数看上去完全正常, 但是它包含了三个对全局 document 对象的引用, 如果在页面上有多个图片, for 循环中的 document 引用要进行作用域链查找, 通过创建一个指向 document 对象的局部变量, 就可以通过限制一次全局查找来改进这个函数性能:

function updateUI() {
  var doc = document;
  var imgs = doc.getElementsByTagName("img");
  for (var i=0, len=imgs.length; i<len; i++) {
    imgs[i].title = doc.title + "image" + i;
  }
  var msg = doc.getElementById("msg");
  msg.innerHTML = "Update complete.";
}

2. 避免使用 with 语句

- 注意事项 原生方法较快, switch 较快, 位运算符较快

- 最小化语句数

1. 多个变量声明

var count = 5;

var color = “blue”;

改为一个语句

var count = 5,

     color = “blue”;

2. 数组和对象, 尽量用字面量的方法来创建.