文档章节

[JS进阶] 编写可维护性代码

赵小宾
 赵小宾
发布于 2015/04/01 10:11
字数 2455
阅读 119
收藏 9
Js

1 可维护性代码的特点

  1. 可理解性:其他人可以接手代码并理解它的意图,无需原开发人员花太多时间解释!
  2. 直观性:代码中的东西一看就能明白,尽管其操作过程复杂。
  3. 可适应性:代码以一种数据上的变化不要求完全重写方法。
  4. 可扩展性:在代码架构上可对核心功能的扩展。
  5. 可调式性:出错时,代码可以给你足够的信息来直接确定问题所在。

2 代码约定

由于javascript语言的特点,我们可编写各种编程风格的代码,从传统的面向对象式到声明式到函数式。形成一套良好的javascript代码书写约定可大大提高可维护性,这点对初学者来说绝对是没有很注重的地方。

2.1 可读性

  1. 缩进:在项目中统一代码缩进,更易于阅读,一种不错也很常见的缩进大小为四个空格,当然可以是其他数量。
  2. 注释:其实我们在编写一些后台代码会经常把一个功能,一个业务逻辑,一个函数的代码注释起来,但我们却在编写javascript却经常忽略这些习惯。一般而言,在js中有以下这些地方需要注释:
  • 函数和方法 :描述其目的和参数代表,返回值等。
  • 大段的代码 :大段代码通常是一个任务的代码,应注释描述任务。
  • 复杂的算法 :不是所有人都会你的算法,你需要把你的算法思路简单描述下。
  • Hack :因各浏览器的差异,javascript的hack用于解决什么问题应该描述清楚。

2.2 变量和函数的命名

  1. 变量名应该名词:如car,person
  2. 函数名应以动词开始:如getName(),返回布尔类型值的函数一般以is开头,如:isEnable();
  3. 只要合乎逻辑,不用担心变量或者函数名的长度,长度问题可以通过在你发布代码压缩的时候得以解决。

2.3 变量类型透明

var car,person; //声明两个变量

如上代码,由于javascript中变量是松散类型的,我们并不知道其中的car和person是什么类型的数据,不够透明,我们可以通过一下两种方式缓解这种问题:

  1. 初始化变量:通过初始化指定变量类型,但通过这种方式命名的对象无法用于函数声明中的参数。

    var car = null; //car是对象 var person = ''; //person是字符串 var count = -1; //count是整数 var found = false; //found是布尔型
  2. 匈牙利标记法:在变量名之前加上一个或多个字符表示数据类型。o - 对象,s - 字符串,i - 整数,f - 浮点数,b - 布尔型

    var oCar; //car是对象 var sPerson; //person是字符串 var iCount; //count是整数 var bFound; //found是布尔型

3 松散耦合

记得以前刚入门C#的时候,师兄经常跟我说‘高内聚低耦合’这词,我也就含糊地点点头,很多人可能也像我之前一样,这词耳熟能详,但未真正实践。

只要应用的某个部分过分依赖另一部分,代码就是耦合过紧,难于维护! 典型的问题:对象直接应用另一个对象,并且修改其中一个的同时需要修改另一个。 在我们web应用中,我们可以通过一下方式解耦我们的代码:

3.1 解耦HTML/JavaScript

在web应用中,我们希望html专注于展示数据,css专注于样式,javascript专注于行为交互。但是有一些代码会将html、javascript过于紧密地耦合在一起。

  1. 直接写在HTML中javascript,使用包含内联代码的<script>元素或者是使用HTML属性来分配事件处理程序。

    <!--使用<script>标签的紧密耦合 --> <script type="text/javascript"> document.write('hello,javascript'); </script> <!--使用时间处理程序属性值的紧密耦合 --> <input type="button" value="click me" onclick="doSomething()"/>

    虽然这样写完全正确,但出现javascript错误是,我们需要判断错误出现在HTML还是在Javascript中,并且这还存在一个时间差问题,当我按下上面代码的按钮时,若此时javascript代码并未加载完,此时变回引发错误。在实践中,理想的状况应该是HTML和Javascript应完全分离,使用引入外部文件来加载javascript。

  2. 相反地,在javascript中也不能包含过多的HTMl

    function insertMsg(msg){ var container = document.getElementById('container');
        container.innerHtml = '<div lcass=\"msg\"><p class=\"post\">' + msg + '</p></div>' }

当你在写这样的代码的时候,我想你应该去找个js模板引擎来了。

对动态生成的HTML,对书写CSS布局,定位错误都比较难把控。

3.2 解耦CSS/Javascript

上面说了,CSS和JS都应该各司其职,不能有太大的亲密动作,秀恩爱,死得快 囧~~~。
这个问题并不能说完全解耦css和js,因为在现代web应用中常常需要javascript来更改样式,但是我们还是尽量使他们分离。

// CSS对JS的紧密耦合 element.style.color = 'red';
element.style.backgroundColor= 'blue';

这样的代码在以后修改样式的时候需要同时修改CSS和JS,可麻烦了。

//这样就ok了 element.className = 'color'; //color是样式类

还有一个就是不能在CSS中写CSS表达式,这应该是都知道的了。

3.3 解耦应用逻辑和事件处理程序

每个web应用程序都有相当多的事件处理程序,监听着大量不同的事件,然而,很少能有仔细将应用逻辑从事件处理程序中分离的,如下:

function checkValue(e){
   e = e || window.event; var target = e.target || e.srcElement; if(target.value.length < 5){ //省略一堆逻辑处理代码... }
}

将上面的代码重写为:

function checkValue(value){ if(value.length < 5){ //省略一堆逻辑处理代码... }
   } function handleBlur(e){
       e = e || window.event; var target = e.target || e.srcElement;
       checkValue(target.value); //调用应用逻辑处理函数 }

这样写有什么好处呢?

  1. 当有不同的方式触发相同的相同过程事件的时候,这时只需调用应用逻辑处理函数即可。
  2. 应用逻辑处理函数可以在不添加到事件的情况下单独测试。

4 编程实践

在企业环境中创建的web应用往往同时由大量人员一同创作。在这种情况下的目标是确保每个人所使用的浏览器环境都有一致和不变的规则,因此,我们需要坚持一下的一些编程实践:

4.1 避免全局变量

在一个js文件中,最多允许有一个全局变量,让其他对象和函数包含在其中,因为过多的全局变量会消耗大量内存。

//两个全局变量 var name = 'jozo'; function sayName(){
  alert('jozo');
}

上面的代码有两个全局变量,变量name和函数sayName(),其实可以创建一个变量包含它们:

//一个全局变量 --推荐 var person = {
    name:'jozo',
    sayName : function(){
        alert(this.name);
    }
}

这样一个全局变量延伸开来就是‘空间的概念’了,不会与其他功能产生冲突,有助于消除功能作用域之间的混淆。

4.2 避免与null进行比较

function sortArray(values){ if(values != null){
        values.sort(比较函数);
    }
}

上面代码中的if语句应该检测values是否是数组,但如果与null作比较的话,字符串,数字等都会通过,导致函数抛出错误。这里是数组,那么我们就应该检测其是否为数组:

function sortArray(values){ if(values instanceof Array){
        values.sort(比较函数);
    }
}

所于当我们遇到与null作比较的代码的时候,我们应该用下面的技术替换:

  1. 如果值为引用类型,则用instanceof 操作符检查其构造函数。
  2. 如果值是基本类型,则用typeof操作符检查其类型。

4.3 使用常量

function validate(value){ if(!value){
        alert('不存在');
        location.href = '/errors/invalid.php';
    }
}

现在,我想把‘不存在’改为‘该数据不存在!’,把跳转路径也改了,我得回到函数中找到对应的代码去修改,而每次修改逻辑代码,都有可能引入错误的风险。所以我们可以把数据单独定义为常量,与应用逻辑分离:

var Constans = {
    ERRORMSG: '不存在',
    ERRORPAGE:'/errors/invalid.php' }; function validate(value){ if(!value){
        alert(Constans.ERRORMSG );
        location.href = Constans.ERRORPAGE ;
    }
}

这样我们修改静态文本内容的时候就无需去动逻辑函数了,甚至可以把Constans单独一个文件。那么什么样的数据需要抽出来做常量呢?

  1. 重复值:任何在多处用到的值。
  2. 用户界面字符串:任何用于显示给用户提示信息的字符串。
  3. URLs:在WEB项目中,资源路径可能经常变更。在一个公共的地方存起来,修改起来更容易!
  4. 任何可能在以后会改变的值。

5 总结

所有编程语言都需要可维护性良好的代码,这个很重要,因为大部分开发人员都花费大量时间维护他人的代码。为了减轻相互的负担,从今天起我要做个好人,写好代码! o(╯□╰)o

本文转载自:http://segmentfault.com/a/1190000002617895

共有 人打赏支持
赵小宾
粉丝 7
博文 57
码字总数 8001
作品 0
浦东
JavaScript MVC 开源框架

腾讯Web前端框架库 JX by Tencent AlloyTeam 简介 JX 是模块化的非侵入式Web前端框架,开发于2008年,并于2009年开源于GoogleCode - http://code.google.com/p/j-et/,于2012年切换到Github,...

wewelove
2014/06/04
0
0
web前端,使用HTML5+CSS+JS框架有那些好处

相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架、CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么?是不是节约了开发项目时间陈本,这事多么伟大的一箱工...

it智云编程
07/12
0
0
如果想成为一名顶尖的前端,这份书单你一定要收藏!

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队 发表于云+社区专栏 作者:link 2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路...

腾讯云加社区
09/17
0
0
JSON进阶第一篇 在PHP与javascript 中使用JSON

一.JSON简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家...

晨曦之光
2012/02/22
0
0
Nodejs系列文章之:javascript代码进阶篇

作者: RobanLee (Code maker, PHP,JS,NODEJS,PYTHON, blog:http://my.oschina.net/robanlee) javascript & nodejs 一些进阶知识: 1. 如何快速进行string => int 的转换? 大家一般首先想到的就......

_dedecms
2014/05/07
0
2

没有更多内容

加载失败,请刷新页面

加载更多

js 操作cookie

var cookie = {// 设置cookie方法set:function(key, val, time){// 获取当前时间var date = new Date();// 将date设置为n天以后的时间var expiresDays = time;//...

小丶二
38分钟前
1
0
限制root远程登录 su和sudo命令

9月21日任务 3.7 su命令 3.8 sudo命令 3.9 限制root远程登录 对于Linux而言,权限的重要性毋庸置疑!对于普通用户而言无法执行那些只有root用户才能有效的命令,导致工作无法有效进行; 系统...

robertt15
40分钟前
2
0
MQTT协议的初浅认识之通讯级别和持久会话

背景 这是我最近了解MQTT协议的最后一部分内容了,MQTT协议里面的QOS和Keep Alive是两个比较重要的内容。QOS的设置,直接影响了订阅客户端与中间件之间的消息交互行为。而Keep Alive直接影响...

亚林瓜子
42分钟前
2
0
calc

width: calc(100% - 30px); 特别注意:减号左右空格,均不能去掉。 width: calc(100% - 30px);

柴高八斗之父
50分钟前
1
0
Spring Cloud Gateway全局过滤器GlobalFilter:返回消息和重定向

Spring Cloud Gateway的全局过滤器GlobalFilter,顾名思义,声明后会对所有的请求生效,可以用来做权限控制,这里简单记录一下拦截到非法请求后如何返回自定义信息和将请求重定向到指定URL。...

夜雨寄北09
52分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部