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

相反地，在javascript中也不能包含过多的HTMl

function insertMsg(msg){
    var container = document.getElementById("container");
    container.innerHtml = "
" + msg + "
"
}

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

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

上面说了，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表达式，这应该是都知道的了。

每个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); //调用应用逻辑处理函数
    }

这样写有什么好处呢？

当有不同的方式触发相同的相同过程事件的时候，这时只需调用应用逻辑处理函数即可。

应用逻辑处理函数可以在不添加到事件的情况下多带带测试。

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

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

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

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

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

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

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

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

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

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

如果值为引用类型，则用instanceof 操作符检查其构造函数。

如果值是基本类型，则用typeof操作符检查其类型。

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多带带一个文件。那么什么样的数据需要抽出来做常量呢？

重复值：任何在多处用到的值。

用户界面字符串：任何用于显示给用户提示信息的字符串。

URLs：在WEB项目中，资源路径可能经常变更。在一个公共的地方存起来，修改起来更容易！

任何可能在以后会改变的值。

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

ok，写了一遍，我印象又加深了！以上内容整理自《JavaScript高级程序设计》，觉得不错点个赞呗。下一篇将整理如何书写提高性能的JS代码。谢谢阅读……