JavaScript最佳实践:可维护性
代码约定
一、可读性
- 代码缩进
- 包含注释
二、变量和函数命名
- 变量名应为名词如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最佳实践:可维护性的更多相关文章
- JavaScript 最佳实践
这个文档是基于JavaScript社区众多开发者的意见和经验,在开发JavaScript代码上的最佳实践和首选的方案的明细表.因为这是一个推荐的表而非原则性的方案,经验丰富的开发者可能对下面的表达会有 ...
- 【原】javascript最佳实践
摘要:这篇文章主要内容的来源是<javascript高级程序设计第三版>,因为第二遍读完,按照书里面的规范,发觉自己在工作中没有好好遵守.所以此文也是对自己书写js的一种矫正. 1.可维护 ...
- javascript 最佳实践 ( 24 章 )
代码约定 易于维护, 形成了一套 JavaScript 代码书写的约定: 跟别的语言差不多, 不过 javascript 中的大括号一定要放在 行尾, 例如: function abc() { // ...
- JavaScript最佳实践
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5540469.html 举个例子:用户在点击某个链接的时候弹出一个新窗口 弹出窗口的方法采用:wind ...
- 15条JavaScript最佳实践很经典噢
感觉比较经典,特转载腾讯大讲堂.本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览 ...
- 学习JavaScript最佳实践方法
首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要说,“靠,你丫半桶水,凭啥教我们”.您先别急着骂,先听我说. 你叫一个大学生去教小学数 ...
- 15条JavaScript最佳实践【转】
本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深). ...
- JavaScript基础笔记(十四)最佳实践
最佳实践 一)松散耦合 1.解耦HTML/JavaScript: 1)避免html种使用js 2)避免js种创建html 2.解耦CSS/JS 操作类 3.解耦应用逻辑和事件处理 以下是要牢记的应用和 ...
- Web前端开发最佳实践(10):JavaScript代码不好读,不好维护?你需要改变写代码的习惯
前言 这篇文章本应该在上一篇文章:使用更严格的JavaScript编码方式,提高代码质量之前发布,但当时觉得这篇文章太过基础,也就作罢.后来咨询了一些初级的开发者,他们觉得有必要把这篇文章也放上来.尽 ...
随机推荐
- Spring 的两个配置容器的讲解
容器 是Spring框架的核心,是组件存活的地方.Spring容器使用DI管理所有组成应用系统的组件,协作组件之间建立联.而且, 这些对象简洁易懂,降低耦合性,支持重用,容易被测试. Spring提供 ...
- CSS模块化
1. Base2. Layout3. Module4. State5. Theme 1) Base rules Base rules are the defaults. eg: ;; } input[ ...
- Codeforces Round #333 (Div. 1) B. Lipshitz Sequence 倍增 二分
B. Lipshitz Sequence Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/601/ ...
- uoj #139. 【UER #4】被删除的黑白树 dfs序 贪心
#139. [UER #4]被删除的黑白树 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/139 Descript ...
- socket通信简单介绍
“一切皆Socket!” 话虽些许夸张,可是事实也是,如今的网络编程差点儿都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间怎样通信,如我们每天打开浏 ...
- FTP服务器简易有效的访问方法
访问FTP服务器传统的方法是使用专用的客户端程序,如CuteFTP,8UFTP等,也包括命令行的FTP客户端c:\windows\system32\ftp.exe程序. FTP服务器也有简易访问方法 ...
- 小白日记11:kali渗透测试之服务扫描-banner、dmitry、nmap特征库、操作系统识别、SNMP
服务扫描 不能单纯的以端口辨别服务.很多网络服务是漏洞频发的高危对象,对网络上的特定服务进行扫描,往往能让我们少走弯路,增加渗透成功的几率.确定开放端口后,通常会对相应端口上所运行服务的信息进行更深入 ...
- CSS完成三角形
通过设置div的border属性,来实现! 将div的height和width属性分别设置为0px,将4边的border值设置为一样的宽度,通过调节边框的颜色课看到效果. <style> ...
- Centos6.4最小化安装后使用xfce桌面环境
由于我个人使用的Centos是在虚拟机中最小化安装的,gnome实在是不喜欢,所以自己装了个xfce,安装后启动不起来,才发现x window等依赖环境没装,为了少走弯路,在此写下安装过程. 1.yu ...
- Spring 事务管理高级应用难点剖析--转
第 1 部分 http://www.ibm.com/search/csass/search/?q=%E4%BA%8B%E5%8A%A1&sn=dw&lang=zh&cc=CN& ...