编写可维护的javascript

Posted 2021-01-13 人间很值得

　　代码其实是一门艺术，每个程序员都是艺术的打造者；而我们打造艺术的过程是一次又一次的精心雕琢；本人以此记录下个人学习这本《编写可维护的javascript》的成果；

　　最基础的编写规则：

　　1.空行，以下情况可以空行

　　　　　　方法之间可以空行；

　　　　　　在多行注释或单行注释之前；

　　　　　　方法某一逻辑块后可以空行；

 

　　2.命名

　　建议推荐驼峰式命名法，例如：var myName ；切记不要使用a，b简单的字母代替；类名首字母要大写；

　　变量和函数命名也有所区别，函数命名一般可采取动名词搭配，如 getName(){};

　　函数命名可以尽量抓住重点，可使用语义化较强的动词搭配，比如以下规则：

　　has/is---------------------函数返回一个布尔值；

　　get ---------------------函数获取一个非布尔值；

　　set ----------------------------- 函数保存一个值；

　　常量命名

　　可用全大写字母表示：比如：var NUM = 10;

 

　　3.有关null的用法

　　null 可以用来初始化一个变量，这个变量可能是一个对象；　

　　eg：

function getPerson(){
　　if (condition){
　　　return new Person(‘zdf);
　　}
     else{
　　　　return null;
　　}
}    

　　1.检测是否传入了某个参数；不应用null判断

　　2.检测一个变量有没有初始化，不应用null

　　

　　4.注释（重中之重）

　　js里注释有两种方式：单行注释以及多行注释，多行注释要写在代码段前面，写清方法作用以及对应参数的类型；尽量在写代码时两种注释同时用时，多行注释只需要在函数前写一次，然后代码内部可以用单行注释；

    /**
     * 从一个整数范围获取一个随机数(取不到大的值，但能取到小的值)
     * @param {[number , number]} ranges
     */

　　何时才需要进行代码的注释？

　　较为复杂的方法在定义时一定要说明清楚此方法作用，以及需要传入哪些参数；还有就是在编写代码时一些难于理解的地方，可以用注释标注一下；

　　

　　5.变量声明

　　变量可在函数最开始采用单行var的方式

var value = 10,
　　result = value+10,
　　len;

　　6.相等

　　因为js是弱类语言，会发生强制性类型转换，所以我们在做相等判断时，推荐要用‘===‘/‘!===‘;

　　

　　事件的处理

function handClick(event){
        var pop = document.getElementById(‘test‘);
        pop.style.top = event.clientY+‘px‘;
        pop.style.left = event.clientX+‘px‘;
}
addEventListener(element,‘click‘,handClick);

　　这段代码其实是很简单的，但是其实是有点问题的；我们在做click事件时候里面涉及到了更多的是业务逻辑。比如：PM给你说把这个click事件逻辑添加一份给mouseover事件，这时候可能我们就会把里面的逻辑copy一份出来；与其如此，为何不早早的把业务逻辑代码单独拎出来呢？

　　修改如下：剥离应用逻辑

var myFn = {
     handClick:function(event){
        this.popchange(event)
     },
     popchange:function(event){
        var pop = document.getElementById(‘test‘);
        pop.style.top = event.clientY+‘px‘;
        pop.style.left = event.clientX+‘px‘;
     }
     }
 addEventListener(element,‘click‘,function(event){
    myFn.handClick(event);
 });

　　再次修改：为了减少对event的过多依赖，我们再次把参数剥离出来

var myFn = {
    handClick:function(event){
        event.stopPropagation();
        event.preventDefault();
       this.popchange(event.clientX,event.clientY)
    },
    popchange:function(x,y){
       var pop = document.getElementById(‘test‘);
       pop.style.top = y+‘px‘;
       pop.style.left = x+‘px‘;
    }
}
addEventListener(element,‘click‘,function(event){
   myFn.handClick(event);
});

　　以上代码相对之前的代码耦合性就比较小，维护起来就会爽歪歪。

　　

　　配置数据抽离　

 

function validate(value){
    if(!value){
        alert(‘Invalid value‘);
        location.href="error/invalid.html"
    }
}
function toggleSelected(ele){
    if(hasClass(ele,‘selected‘)){
        removeClass(‘selected‘);
    }else{
        addClass(ele,‘selected‘)
    }

　　以上代码会存在一个问题就是涉及到url或者className时，总会发生变化，所以我们做如下更改：

var config = {
    msg_invalid: ‘不合法‘,
    url_invalid: ‘./error/invalid.php‘,
    css_className: ‘selected‘
}
function validate(value) {
    if (!value) {
        alert(config.msg_invalid);
        location.href = config.url_invalid
    }
}
function toggleSelected(ele) {
    if (hasClass(ele, config.css_className)) {
        removeClass(config.css_className);
    } else {
        addClass(ele, config.css_className)
    }
}

　　这样的代码才是容易维护的；

　　

　　综上三个方面的小小总结，我们要严格把控代码质量，尽量减少代码的耦合性，写真正可维护的优雅的代码；

如有不妥，请大佬指正；