JavaScript 代码优化和布置——“可维护性”的注重要点

2019年8月30日 163次阅读 来源: JS菌

代码商定

可读性

以下处所须要举行解释：

  • 函数和要领：解释参数代表什么，是不是有返回值；

  • 大段代码：形貌使命的解释；

  • 庞杂的算法；

  • Hack

变量和函数定名

  • 变量用名词；

  • 函数名用动词开首：getName()等；

    • 返回布尔值范例的函数用isEnable()等；

  • 合乎逻辑不必忧郁太长；

变量范例透明化

要领一：初始化，以下：()引荐)

var isFound = false; //boolean
var name = ""; //String
var num = 0; //Number
var person = null; //Object

要领二：匈牙利标记法

var bIsFound; //boolean
var sName; //String
var nNum; //Number
var oPerson; //Object

要领三：运用范例解释

var bIsFound /*boolean*/ = false;
var sName /*string*/ = "";
var nNum /*number*/ = 0;
var oPerson /*object*/ = null;

松懈耦合

HTML/JavaScript

应当经由过程援用外部文件和运用DOM附加行动来包括js代码

CSS/JavaScript

应当经由过程动态变动款式的类（className）而非特定款式来完成

编程习气

尊敬对象所有权

不要修正和编辑不属于你的对象，以及js原生范例对象

防止全局量

只管防止全局变量和函数：

var name = "";
function setName(value) {
    name = value;
}
function sayName() {
    console.log(name);
}

上面的代码应当包括在一个对象中：

var setPersonName = {
    name: "",
    setName: function (value) {
        this.name = value;
    },
    sayName: function () {
        console.log(this.name);
    }
};
setPersonName.setName("Oli");
setPersonName.sayName(); //Oli

运用定名空间

运用多个定名空间，个中的内容互不滋扰：

//全局对象
var Wrox = {};
//一个定名空间
Wrox.ProAjax = {};
Wrox.ProAjax.EventUtil = {};
Wrox.ProAjax.CookieUtil = {};
//另一个定名空间
Wrox.ProJS = {};
Wrox.ProJS.EventUtil = {};
Wrox.ProJS.CookieUtil = {};

防止与null比较

当看到了与null比较的代码，应当用以下手艺替代：

  • 援用范例，用instanceof等；

  • 基础范例，用typeof等；

运用常量

（略）

    原文作者：JS菌
    原文地址: https://segmentfault.com/a/1190000004627224
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞