读书笔记(02) - 可维护性 - JavaScript高级程序设计

k00baa 发布于2019-08-23 13:51 / 2635人阅读

摘要：解耦优势代码复用，单元测试。常用比较误区可同时判断，可用来判断对象属性是否存在。使用作判断无法进行充分的类型检查。文件中应用常量参考文档高级程序设计作者以乐之名本文原创，有不当的地方欢迎指出。

编写可维护性代码

可维护的代码遵循原则：

可理解性（方便他人理解）

直观性（一眼明了）

可适应性（数据变化无需重写方法）

可扩展性（应对未来需求扩展，要求较高）

可调试性（错误处理方便定位）

命名方式

变量取名多为为名词，方法取名多为为动词

// 变量名
car, person;

// 方法名
getName, isEnable;

解耦

功能过于依赖，代码耦合过紧，不利于维护。而通过解耦能让我们更专一地处理特定功能业务的开发，也方便我们开发中调试，从复杂的耦合依赖中抽离出来。

解耦优势：代码复用，单元测试。

解耦原则：

HTML/JavaScript解耦（结构层/行为层的解耦）

CSS/JavaScript解耦（样式层/行为层的解耦）

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

应用逻辑/事件处理程序解耦合的原则：

勿将event对象传给其他方法；只传来自event对象中所> 需的数据

任何可以在应用层面的动作都应该可以在不执行任何事> 件处理程序的情况下进行；

任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑

// 一个事件解耦的例子
var pwdInput = document.getElementById("password");

// 回车事件
pwdInput.addEventListener("keyup", function(event){
    if (event.keyCode == 13) {
        validatePassword(event.target.value);
    }
})

// 失焦事件
pwdInput.addEventListener("blur", function(event) {
    validatePassword(event.target.value);
})

// 业务应用多带带封装到一个方法里面，多处复用/单元测试皆可
function validatePassword(pwd) {
    if (!pwd) {
        alert("密码不能为空!");
    } 
}

对象所有权

JavaScript中是通过原型链来实现继承，而原型继承的一个特点就是原型上定义的属性方法，可以被多个实例共享使用。

对象维护原则：

不要为实例或原型添加属性

不要为实例或原型添加方法

不要重定义已存在的方法

需要修改对象时：

创建包含所需功能的新对象，并用它与相关对象进行交互

创建自定义类型，继承需要进行修改的类型，然后可以自定义类型添加额外功能

全局变量引申命名空间

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

var MyApp = {
    name: "KenTsang",
    sayName: function() {
        console.log(this.name);
    }
    skill: {
        html: 80,
        css: 80,
        js: 80
    }
}

MyApp.skill.js // 80

虽然减少程序员输错代码造成修改全局变量的几率，但依旧可以修改到全局变量，而且增加了代码量。

常用null比较误区

TIPS: null可同时判断null/undefined，可用来判断对象属性是否存在。

使用null作判断无法进行充分的类型检查。

// 错误用法
function sortArrays(values) {
    if (values != null) {
        // 非数组类型就会报错，因为sort方法只有Array才具备
        values.sort();
    }
} 

// 正确用法
if (values instanceof Array) {
    value.sort();
}

使用null比较的代码，替换原则：

如果值应为一个引用类型，使用instanceof操作符检查其构造函数

如果值应为一个基本类型(值类型)，使用typeof检查其类型

如果是希望对象包含某个特点的方法名，则使用typeof操作符确保指定名字的方法存在于对象上

// 值类型 (Number, String, Boolean)
typeof value == "string";

// 引用类型 (Array, Object, Function)
value instanceof Array;

// 对象方法 (Object.property)
typeof person.getName == "function"

常量应用

var CONSTANS = {
    INVALID_VALUES_MSG: "Invalid value!",
    INVALID_VALUE_URL: "/erros/invalid.php"
}

CONSTANS.INVALID_VALUES_MSG // "Invalid value!"

常量应用原则：

重复值——多处地方引用的值 (CSS类名/后端返回的状态码)。

用户界面字符串——显示给用户的字符串 (国际化, 替换为对应的语言包文件)

URLs——公共地方存放所有的URL (测试API的URL/上线API的URL)

任何可能会更改的值 (通常是环境/语言配置上的修改)

redux/vuex的actionType判断的应用，也是常量应用常见的场景。好处就是引用时拼写错误会直接抛出变量引用错误，而直接用字符串值判断，则不会抛出错误，不利于调试。

// redux-reducer.js文件中应用常量
import {
    ADD_TODO_ITEM, 
    DELETE_TODO_ITEM
} from "./actionTypes"

const defaultState = {
    inputValue: "",
    list: []
};

export default (state = defaultState, action) => {
    let newState = JSON.parse(JSON.stringify(state));

    switch (action.type) {
        case DELETE_TODO_ITEM:
            newState.list.splice(action.value, 1);
        break;
        case ADD_TODO_ITEM:
            if (newState.inputValue.trim().length) {
                newState.list.push(newState.inputValue);
            }
            newState.inputValue = "";
        break;
    }

    return newState;
}

参考文档

《JavaScript高级程序设计》

作者：以乐之名
本文原创，有不当的地方欢迎指出。转载请指明出处。

GPU云服务器云服务器高级程序设计-笔记读书笔记编程思想读书笔记大数据时代读书笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99667.html

002-读书笔记-JavaScript高级程序设计 在HTML中使用JavaScript

摘要：文件内部使用使用到的代码引入外部文件外部代码的地址标签的位置一般情况下，标签的位置放在标签中引入代码页面结构对于需要引入很多的中间，如果把放在头部，无疑会导致浏览器呈现页面出现延迟，就是导致页面出现空白。页面结构引入代码这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第二章。 1.使用方式在HTML中使用 JavaScript 的方式有两种，第一种就是直接内...

banana_pi 2019-08-22 11:13 评论0 收藏0
001-读书笔记-JavaScript高级程序设计 JavaScript简介

摘要：由于计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。规范由万维网联盟制定。级标准级标准是不存在的，级一般指的是最初支持的。这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是欧洲计算机制造商协会的缩写，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 评论0 收藏0
读书笔记(05) - 事件 - JavaScript高级程序设计

摘要：而事件分为个级别级事件处理程序，级事件处理程序和级事件处理程序。级中没有规范事件的相关内容，所以没有级事件处理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript来实现用户与WEB网页之间的动态交互，接收用户操作并做出相应的反馈，而事件在此间则充当桥梁的重要角色。日常开发中，经常会...

tinylcy 2019-08-23 13:58 评论0 收藏0
《JavaScript高级程序设计》（第3版）读书笔记第1~2章

摘要：表示应该立即下载脚本，但不应妨碍页面中的其他操作可选。表示通过属性指定的代码的字符集。表示脚本可以延迟到文档完全被解析和显示之后再执行。实际上，服务器在传送文件时使用的类型通常是，但在中设置这个值却可能导致脚本被忽略。第1章 JavaScript 简介虽然JavaScript和ECMAScript通常被人们用来表达相同的含义，但JavaScript的含义比ECMA-262要多得多...

Corwien 2019-08-23 17:18 评论0 收藏0
读书笔记(01) - JSON - JavaScript高级程序设计

摘要：用于把对象序列化字符串，在序列化对象时，所有函数及原型成员都会被有意忽略，不体现在结果中。对第步返回的每个值进行相应的序列化。参考文档高级程序设计作者以乐之名本文原创，有不当的地方欢迎指出。 showImg(https://segmentfault.com/img/bVburW1?w=658&h=494); JSON与JavaScript对象 JSON是一种表示结构化数据的存储格式，语...

mengbo 2019-08-23 13:50 评论0 收藏0