JS初级笔记——JavaScript基本实践注意点

可维护性

什么叫做可维护性呢？首先我们都知道，现在的软件开发绝大多数都是多人合作并且持续迭代的。可维护性的概念就是针对这样的情况所提出的，人们能够在他人写的代码上较好的进行接下来的工作，这样的代码就叫做可维护性的代码。

可维护性代码的特点

• 可理解性——其他人拿到代码以后可以理解代码的用途，而无需开发人员解释

• 直观性——不管代码的过程有多么复杂，代码中的意思可以明白的直观的看出来

• 可适应性——代码在应对数据上的变化时不需要完全重写

• 可拓展性——可以添加新的核心功能

• 可调试性——当某处出错时，代码可以尽可能的帮助开发人员定位错误位置

编写可维护代码的方法

代码约定

开发人员之间可以使用一套他们实现商量好的代码规范来书写代码，这样彼此之间就可以快速的get到代码的意思。

国内比较受大家欢迎的有腾讯alloyteam团队的代码规范。emmmmmm，我忘了吧链接收藏到哪里去了，这里附上一个第三方的链接alloyteam前端代码规范。

代码规范中比较重要的几个要求

• 1 可读性
  • 1.1 良好的缩进。常见使用四个空格
  • 1.2 函数与方法。给每一个函数与方法写一个注释，描述其目的与用途，参数的意义等等。
  • 1.3 大段的代码。在大段的多行代码前加上这段代码的作用。
  • 1.4 复杂的算法。在使用复杂的算法时，在注释上标注你是如何实现的，这不仅有助于其他人看懂，也同样有助于自己反复消化自己的代码。
• 2 变量以及函数的命名
  • 2.1 变量名。变量名应该是一个名词。如：car、person等
  • 2.2 函数名与方法名。一般以动词为主，如：getName等。但是如果函数返回的是布尔值，那么我们通常以is开头。如：isMan等
• 3 变量类型问题（变量类型透明化）
  • 3.1 在初始化变量但是没有给变量赋值时，变量的类型是不确定的。所以我们可以采用初始化的方式来定义这些变量的类型。
  • 3.2 匈牙利标记法制定变量类型。但是这种方法阻碍了代码的直观性。所以现在不是很推崇
  • 3.3 使用注释

3.1
var found = false,
    count = -1,
    name = '',
    person = null;
3.2
var bFound,
    iCount,
    sName,
    oPerson;
复制代码

解耦代码

如果应用中的几个功能彼此依赖，我们称这一部分的代码紧密耦合，这样的代码是难以维护与修改的。所以在日常开发中我们要实现代码的解耦，编写松散的、模块化的代码。

在前端开发中常用的html、css、js三种代码，常常需要相互使用耦合，这种现象是十分不好的。

• 解耦HTML/JavaScript

  理想情况下，html与js应该完全分离，html通过头部将js引入。这样当发生错误时，我们可以较为准确的定位出错误是来自于哪个文件。

  同样的，有时我们在js中会撰写大量的innerhtml来动态的插入html代码。这是十分糟糕的行为，因为代码是动态创建的，所以我们在检错的时候往往想破了脑袋也定位不到错误来源。这种动态生成对数据数据与布局都会产生影响的行为是非常难以维护的。在实现上我们可以使用，在最初的时候就把它写在文档中，等到js判断条件合适的时候在让它显示出来。而不是将html代码直接嵌入到js文件当中。还有一种方法就是，我们可以吧要显示的代码在后端中写好，前端使用Ajax等技术从后端那里获取过来。

• 解耦CSS/JavaScript

  因为在js的dom操作中，js可以对获取的元素动态改变它的样式。同样的这也会导致两者之间紧密的耦合。解决的方法就是将样式分类写在css中，我们通过js改变dom的类名。依次让css代码最大程度的保留在css文件当中。

• 解耦应用逻辑与事件处理程序 我们通常会在一个函数中检测事件，然后就直接在这个函数中处理这个事件。这样的行为就是一种应用逻辑与事件处理的耦合。我们通常将这两者拆分开来建立两个函数实现解耦。

耦合
    function handleKeyPress(event)
    {
        if(event.keyCode == 13){
            num++;
        }
    }
    
解耦后
    function handleKeyPress(event)  //事件处理程序
    {
        if(event.keyCode == 13){
           addNum();
        }
    }
    function addNum(){              //应用逻辑         
        num++;
    }
复制代码

准则：

• 不能把整个event对象传递出去，只能将其中的数据传递出去
• 任何应用逻辑上的处理都应该从事件处理当中尽可能的剥离出来
• 任何事件处理都应该处理事件，然后将事件处理转到应用逻辑上

实践注意点

尊重对象所有权

简单来说就是在企业开发中，如果某一对象的创建于维护不是你负责的。那么你不能够去修改它们。行为包括但不局限于。

• 为实例或原型添加属性
• 为实例或原型添加方法
• 重定义已经寻在的方法

所谓你所负责的对象就是指你自己创建的对象。显然像Object、Array这肯定不是你创造的嘛，所以你一定不要去修改它们，以免其他人员在使用时出现了莫名其妙的错误。

避免全局变量

有时候，我们定义了一个全局变量但是却要在某个实例的方法中使用它，这是十分不友好的。因为你的全局变量是挂在window对象上的，这很有可能会与其他功能产生冲突，另外在检错过程中也不好定位错误的位置。

使用两个全局变量
    var name = "Kiris";
    function syaName(){
        alert(name);
    }
    
使用一个全局变量
    var MyApp = {
        name:"Kiris";
        sayName:function(){
            alert(this.name);
        }
    }
复制代码

当这样单一的全局变量中包含很多东西的时候，我们又将其称之为命名空间。运用命名空间我们可以比较好的避免命名冲突的发生。

//创建一个全局对象
var WorkSpace = {};

//在全局对象中开辟一块给某个人/某块功能用的区间
WorkSpace.Kiris = {};

//再在相应的功能区间内开发
复制代码

使用常量

常量最常使用的场所就是在url上。因为随着应用的迭代，url时常需要改变。当我们一直将其写在js文件中时，每次去寻找修改十分麻烦。所以我们可以将它们抽出出来存在一个文件当中，这样进行增删改查就十分便捷了。 同样的道理，如果你的项目中有些东西经常要改变的话就需要采用常量提取出来方便改动。 最后，如果一个值反复被使用，给它变成常量再用，这应该大家都清楚。

转载于:https://juejin.im/post/5b6500bfe51d4519057130bd