代码约定

一、可读性

  • 代码缩进
  • 包含注释

二、变量和函数命名

  • 变量名应为名词如car或person
  • 函数名应该以动词开始,如getName()。返回布尔类型值的函数一般以is开头,如isEnable()。

三、变量类型透明

1.通过初始化指定变量类型

var fonund = false; //布尔型
var count = -1; //数字
var name = ""; //字符串
var person = null; //对象

2.使用匈牙利标记法来指定变量类型

“o”代表对象,“s”代表字符串,“i”代表整数,“f”代表浮点数,“b”代表布尔型。

var bFound;  //布尔型
var iConunt; //整数
var sName; //字符串
var oPerson; //对象

松散耦合

一、解耦HTML/JavaScript

  • 避免使用包含内联代码的<script>元素或者是使用HTML属性来分配事件处理程序。
  • 避免在JavaScript中创建大量HTML。

二、解耦CSS/JavaScript

//CSS对JavaScript的紧密耦合
element.style.color = "red";
element.style.background = "blue";

尽量通过修改类名来改变样式,让大部分样式信息严格保留在CSS中。

//CSS对JavaScript的松散耦合
element.className = "edit";

三、解耦应用逻辑/事件处理程序

一个例子:

function handleKeyPress(event){
event = EventUtil.getEvent(event);
if(event.keyCode == 13){
var target = EventUtil.getTarget(event);
var value = 5 * parseInt(target.value);
if(value > 10){
document.getElementById("error-msg").style.display = "block";
}
}
}

当按下Enter键,取得事件的目标并传递value属性,这是一个应用逻辑。得到属性之后通过判断值来改变样式则为事件处理。

可以重写为:

function handleKeyPress(event){
event = EventUtil.getEvent(event);
if(event.keyCode == 13){
var target = EventUtil.getTarget(event);
validateValue(target.value);
}
}
function validateValue(value){
var value = 5 * parseInt(target.value);
if(value > 10){
document.getElementById("error-msg").style.display = "block";
}
}

从事件处理程序中分离应用逻辑的好处:

  • 可以更容易更改触发特定过程的事件。如果最开始由鼠标点击事件触发过程,但现在按键也要进行同样处理,这种更改就很容易。
  • 可以在不附加到事件的情况下测试代码,使其更易创建单元测试或者是自动化应用流程。

编程实践

一、尊重对象所有权

在企业环境中最重要的编程实践就是尊重对象所有权,它的意思是你不能修改不属于你的对象。如果你不负责创建或维护某个对象、它的对象或者它的方法,那么你就不能对它们进行修改。

  • 不要为实例或原型添加属性;
  • 不要为实例或原型添加方法;
  • 不要重定义已存在的方法;

二、避免全局变量

//两个全局变量——避免!
var URL = "zhaoyuxiang.cn";
function sayURL(){
alert(URL);
}

这段代码包含了两个全局变量:变量URL和函数sayURL()。其实可以创建一个包含两者的对象。

//一个全局变量——推荐
var MyApplication = {
URL: "zhaoyuxiang.cn",
sayURL: function(){
alert(this.URL);
}
};

三、使用常量

一个例子:

function validate(value){
if(!value){
alert("Invalid value!");
location.href = "zhaoyuxiang.cn";
}
}

如果日后需要对URL进行修改,都要找到函数并在其中修改代码。而每次修改应用逻辑的代码,都可能会引入错误。可以通过将数据抽取出来变成单独定义的常量的方式,将应用逻辑与数据修改隔离开来。

var Constants = {
INVALID_VALUE_MSG: "Invalid value!",
INVALID_VALUE_URL: "zhaoyuxiang.cn"
};
function validate(value){
if(!value){
alert(Constants.INVALID_VALUE_MSG);
location.href = Constants.INVALID_VALUE_URL;
}
}

消息和URL都被定义于Constants对象中,然后函数引用这些值。这些设置允许数据在无须接触使用它的函数的情况下进行变更。Constants对象甚至可以完全在单独的文件进行定义,同时该文件可以由包含正确值的其他过程根据国际化设置来生成。

需要注意的值的类型如下:

  • 重复值——任何在多处用到的值都应抽取为一个常量。
  • 用户界面字符串——任何用于显示给用户的字符串,都应被抽取出来以方便国际化。
  • URLs——资源位置很容易变更,所以推荐用一个公共地方存放所有的URL。
  • 任意可能会更改的值——每当你在用到字面量值的时候,你都要问一下自己这个值在未来是不是会变化。如果“是”,那么这个值就应该被提取出来作为一个常量。

(总结自《JavaScript高级程序设计》(第三版))

转载请注明出处:http://zhaoyuxiang.cn/blog/archivers/bestPracticesForJavaScript-maintainability

JavaScript最佳实践:可维护性的更多相关文章

  1. JavaScript 最佳实践

    这个文档是基于JavaScript社区众多开发者的意见和经验,在开发JavaScript代码上的最佳实践和首选的方案的明细表.因为这是一个推荐的表而非原则性的方案,经验丰富的开发者可能对下面的表达会有 ...

  2. 【原】javascript最佳实践

    摘要:这篇文章主要内容的来源是<javascript高级程序设计第三版>,因为第二遍读完,按照书里面的规范,发觉自己在工作中没有好好遵守.所以此文也是对自己书写js的一种矫正. 1.可维护 ...

  3. javascript 最佳实践 ( 24 章 )

    代码约定 易于维护, 形成了一套 JavaScript 代码书写的约定: 跟别的语言差不多, 不过 javascript 中的大括号一定要放在 行尾, 例如: function abc() { // ...

  4. JavaScript最佳实践

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5540469.html 举个例子:用户在点击某个链接的时候弹出一个新窗口 弹出窗口的方法采用:wind ...

  5. 15条JavaScript最佳实践很经典噢

    感觉比较经典,特转载腾讯大讲堂.本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览 ...

  6. 学习JavaScript最佳实践方法

    首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要说,“靠,你丫半桶水,凭啥教我们”.您先别急着骂,先听我说. 你叫一个大学生去教小学数 ...

  7. 15条JavaScript最佳实践【转】

    本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深). ...

  8. JavaScript基础笔记(十四)最佳实践

    最佳实践 一)松散耦合 1.解耦HTML/JavaScript: 1)避免html种使用js 2)避免js种创建html 2.解耦CSS/JS 操作类 3.解耦应用逻辑和事件处理 以下是要牢记的应用和 ...

  9. Web前端开发最佳实践(10):JavaScript代码不好读,不好维护?你需要改变写代码的习惯

    前言 这篇文章本应该在上一篇文章:使用更严格的JavaScript编码方式,提高代码质量之前发布,但当时觉得这篇文章太过基础,也就作罢.后来咨询了一些初级的开发者,他们觉得有必要把这篇文章也放上来.尽 ...

随机推荐

  1. Spring 的两个配置容器的讲解

    容器 是Spring框架的核心,是组件存活的地方.Spring容器使用DI管理所有组成应用系统的组件,协作组件之间建立联.而且, 这些对象简洁易懂,降低耦合性,支持重用,容易被测试. Spring提供 ...

  2. CSS模块化

    1. Base2. Layout3. Module4. State5. Theme 1) Base rules Base rules are the defaults. eg: ;; } input[ ...

  3. Codeforces Round #333 (Div. 1) B. Lipshitz Sequence 倍增 二分

    B. Lipshitz Sequence Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/601/ ...

  4. uoj #139. 【UER #4】被删除的黑白树 dfs序 贪心

    #139. [UER #4]被删除的黑白树 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/139 Descript ...

  5. socket通信简单介绍

    “一切皆Socket!” 话虽些许夸张,可是事实也是,如今的网络编程差点儿都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间怎样通信,如我们每天打开浏 ...

  6. FTP服务器简易有效的访问方法

    访问FTP服务器传统的方法是使用专用的客户端程序,如CuteFTP,8UFTP等,也包括命令行的FTP客户端c:\windows\system32\ftp.exe程序. FTP服务器也有简易访问方法 ...

  7. 小白日记11:kali渗透测试之服务扫描-banner、dmitry、nmap特征库、操作系统识别、SNMP

    服务扫描 不能单纯的以端口辨别服务.很多网络服务是漏洞频发的高危对象,对网络上的特定服务进行扫描,往往能让我们少走弯路,增加渗透成功的几率.确定开放端口后,通常会对相应端口上所运行服务的信息进行更深入 ...

  8. CSS完成三角形

    通过设置div的border属性,来实现! 将div的height和width属性分别设置为0px,将4边的border值设置为一样的宽度,通过调节边框的颜色课看到效果. <style> ...

  9. Centos6.4最小化安装后使用xfce桌面环境

    由于我个人使用的Centos是在虚拟机中最小化安装的,gnome实在是不喜欢,所以自己装了个xfce,安装后启动不起来,才发现x window等依赖环境没装,为了少走弯路,在此写下安装过程. 1.yu ...

  10. Spring 事务管理高级应用难点剖析--转

    第 1 部分 http://www.ibm.com/search/csass/search/?q=%E4%BA%8B%E5%8A%A1&sn=dw&lang=zh&cc=CN& ...