读《编写可维护的javascript》笔记

首页 > 代码库 > 读《编写可维护的javascript》笔记

读《编写可维护的javascript》笔记

2024-08-23 11:59:32 225人阅读

第一章基本的格式化

缩进层级：推荐 tab:4;
换行：在运算符后面换行，第二行追加两个缩进；

// Good: Break after operator, following line indented two levels
callAFunction(document, element, window, "some string value", true, 123,
        navigator);

// Bad: Following line indented only one level
callAFunction(document, element, window, "some string value", true, 123,
    navigator);

// Bad: Break before operator
callAFunction(document, element, window, "some string value", true, 123
        , navigator);

添加空行：在方法之间；在方法的局部变量和第一条语句之间；在多行或单行注释之前；在方法内的逻辑片段插入空行提高可读性（比如for， if）；

// good
if (wl && wl.length) {

    for (i = 0, l = wl.length; i < l; ++i) {
        p = wl[i];
        type = Y.Lang.type(r[p]);

        if (s.hasOwnProperty(p)) {

            if (merge && type == ‘object‘) {
                Y.mix(r[p], s[p]);
            } else if (ov || !(p in r)) {
                r[p] = s[p];
            }
        }
    }
}

常量：采用大写字符加下划线的方式（var MAX_COUNT）；

var MAX_COUNT = 10;
var URL = "http://www.nczonline.net/";

if (count < MAX_COUNT) {
    doSomething();
}

不推荐显示的构建数组和对象（采用new的方式）；
字符串：推荐使用双引号；

// Good
var name = "Nicholas";

// Bad: Single quotes
var name = ‘Nicholas‘;

// Bad: Wrapping to second line
var longString = "Here‘s the story, of a man named Brady.";

不要使用“\”来连接字符串，推荐使用“+”；

第二章注释

注释：注释前面空一行，与下一行对其；程序代码比较明了的时候，不推荐添加注释；可能被认为错误的代码可加注释提醒不要随意修改；

/*
 *注意前面的空格（不好）
 * 注意前面的空格（好）
 *／

第三章语句和表达式

块语句间的空格，推荐使用下面这种

if (condition) {
    doSomething();
}

不要使用 for in 来循环数组，因为 index 是字符串形式，而不是数字形式，容易出现问题。可以用来循环对象；

第四章变量、函数和运算符

严格模式：只在需要的地方添加，尽量不要全局使用，除非你已经明确都要严格模式。

// 推荐使用方式
function fn() {
    "use strict";
    //代码
}

//或者
(function() {
    "use strict";
    function fn1() {

    }
    function fn2() {
        
    }
})();

相等：推荐使用“===” 和 “！==”这样可以避免转换，出现潜在的风险;
尽量不适用 eval , Function, 以及不要给 setTimeout，setInterval 传入字符串;

第五章 UI的松耦合

避免使用css 表达式 expression;
用 js 修改样式的时候，采用添加或者移除类名的方式，而不是直接使用.style.color .style.cssText;

// Bad
element.style.color = "red";
element.style.left = "10px";
element.style.top = "100px";
element.style.visibility = "visible";

element.style.cssText = "color: red; left: 10px; top: 100px; visibility: hidden";

//样式
.reveal {
    color: red;
    left: 10px;
    top: 100px;
    visibility: visible;
}

// Good - Native
element.className += " reveal";

// Good - HTML5
element.classList.add("reveal");

// Good - YUI
Y.one(element).addClass("reveal");

// Good - jQuery
$(element).addClass("reveal");

// Good - Dojo
dojo.addClass(element, "reveal");

在HTML中不要使用javascript；比如嵌入在HTML中的onClick

<!-- Bad -->
<button onclick="doSomething()" id="action-btn">Click Me</button>

将HTML从JavaScript中抽离。

// Bad
var div = document.getElemenetById("my-div");
div.innerHTML = "<h3>Erroe</h3>";

解决办法有三种：1、从服务器加载；

function loadDialog(name, oncomplete) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", "/js/dialog/" + name, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var div = document.getElementById("dlg-holder");
            div.innerHTML = xhr.responseText;
            oncomplete();
        } else {
            // handle error
        }
    };
    xhr.send(null);
}

2、使用简单客户端模板；

// 模板
<li><a href="http://www.mamicode.com/%s">%s</a></li>

function sprintf(text) {
    var i=1, args=arguments;
    return text.replace(/%s/g, function() {
        return (i < args.length) ? args[i++] : "";
    });
}
// usage
var result = sprintf(templateText, "/item/4", "Fourth item");

3、复杂客户端模板；比如使用 Handlebars

// 模板放在 script 中
<script type="text/x-handlebars-template" id="list-item">
    <li><a href="http://www.mamicode.com/{{url}}">{{text}}</a></li>
</script>

function addItem(url, text) {
    var mylist = document.getElementById("mylist"),
    script = document.getElementById("list-item"),
    templateText = script.text,
    template = Handlebars.compile(script.text),
    div = document.createElement("div"),
    result;

    result = template({
        text: text,
        url: url
    });

    div.innerHTML = result;
    list.appendChild(div.firstChild);
}

// 使用
addItem("/item/4", "Fourth item");

第六章避免使用全局变量

避免使用全局变量，存在问题：命名冲突；代码的脆弱性；难以测试
意外的全局变量：忘了var; 解决办法：使用 JSLint 或者 JSHint ;
单全局变量：比如YUI定义了一个YUI全局变量； jQuery 定义了两个全局变量，$ 和 jQuery;
命名空间：比如 YUI.event 下的所有方法都是和事件相关的。
模块： AMD模块和 YUI 模块；

// AMD    
define("my-books", [ "dependency1", "dependency2" ],
     function(dependency1, dependency2) {
          var Books = {};
          Books.MaintainableJavaScript = {
          author: "Nicholas C. Zakas"
     };
    return Books;
  });

零全局变量：使用前提是内部代码与外部代码无联系。

    (function(win) {
        var doc = win.document;

    })(window)

第七章事件处理

事件处理典型用法

// 不好的
function handleClick(event) {
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

// addListener() from Chapter 7
addListener(element, "click", handleClick);

规则1：隔离应用逻辑

// 好的 - separate application logic
var MyApplication = {
    handleClick: function(event) {
        this.showPopup(event);
    },
    showPopup: function(event) {
        var popup = document.getElementById("popup");
        popup.style.left = event.clientX + "px";
        popup.style.top = event.clientY + "px";
        popup.className = "reveal";
    }
};

addListener(element, "click", function(event) {
    MyApplication.handleClick(event);
});

规则2：不要分发事件对象；上面存在的问题是event 事件被无节制分发。从匿名事件处理函数到另一个函数，再到另一个函数。最佳方法：让事件处理程序使用event对象处理事件，然后拿到所有需要的数据传给应用逻辑。

// Good
var MyApplication = {
    handleClick: function(event) {
        this.showPopup(event.clientX, event.clientY);
    },
    showPopup: function(x, y) {
        var popup = document.getElementById("popup");
        popup.style.left = x + "px";
        popup.style.top = y + "px";
        popup.className = "reveal";
    }
};
addListener(element, "click", function(event) {
    MyApplication.handleClick(event); // this is okay
});

当处理事件时候，最好让事件处理程序成为接触到event对象的唯一的函数。

// Good
var MyApplication = {
    handleClick: function(event) {
        // assume DOM Level 2 events support
        event.preventDefault();
        event.stopPropagation();
        // pass to application logic
        this.showPopup(event.clientX, event.clientY);
    },
    showPopup: function(x, y) {
        var popup = document.getElementById("popup");
        popup.style.left = x + "px";
        popup.style.top = y + "px";
        popup.className = "reveal";
    }
};
addListener(element, "click", function(event) {
    MyApplication.handleClick(event); // this is okay
});

第八章避免 “空比较“

下面是不好的示范，你很多都与null不相等，包括数字，字符串，对象等，从而带来隐藏的错误。只有当期待的值是null的时候，可以和null进行比较。

var Controller = {
    process: function(items) {
        if (items !== null) { // Bad
            items.sort();
            items.forEach(function(item) {
                // do something
            });
        }
    }
};

检测基本类型使用typeof, 引用类型使用instanceof，还有一种鸭式辨型，采用对象特有的方法或者属性是否存在来判断，例如array.sort(), 正则的test方法。通用的方法是，其他类型类似：

function isArray(value) {
    return Object.prototype.toString.call(value) === "[object Array]";
}

检测属性，判断属性最好的办法是用in

// 不好，当属性值是0, "", false, null或者 undefined 
if (object[propertyName]) {
    // do something
}

// Bad: Compare against null
if (object[propertyName] != null) {
    // do something
}

// Bad: Compare against undefined
if (object[propertyName] != undefined) {
    / do something
}

var object = {
    count: 0,
    related: null
};

// Good
if ("count" in object) {
    // this executes
}
if ("related" in object) {
    // this executes
}

//当你只想检查实例对象的某个属性是否存在的时候使用hasOwnProperty()
// Good for all non-DOM objects
if (object.hasOwnProperty("related")) {
    //this executes
}
// Good when you‘re not sure
if ("hasOwnProperty" in object && object.hasOwnProperty("related")) {
    //this executes
}

第九章将配置数据从代码中分离出来

什么是配置数据？就是JavaScript代码中有可能发生改变的。比如：url, 需要展现给用户的字符串，重复的值，设置，任何可能发生变化的值。下面是不好的实例，其中的 invalid value, href的值， selcted 都是配置数据。

// Configuration data embedded in code
function validate(value) {
    if (!value) {
        alert("Invalid value");
        location.href = "/errors/invalid.php";
    }
}
function toggleSelected(element) {
    if (hasClass(element, "selected")) {
        removeClass(element, "selected");
    } else {
        addClass(element, "selected");
    }
}

抽离配置数据

// Configuration data externalized
var config = {
    MSG_INVALID_VALUE: "Invalid value",
    URL_INVALID: "/errors/invalid.php",
    CSS_SELECTED: "selected"
};
function validate(value) {
    if (!value) {
        alert(config.MSG_INVALID_VALUE);
        location.href = config.URL_INVALID;
    }
}
function toggleSelected(element) {
    if (hasClass(element, config.CSS_SELECTED)) {
        removeClass(element, config.CSS_SELECTED);
    } else {
        addClass(element, config.CSS_SELECTED);
    }
}

第十章抛出自定义错误

推荐在错误消息中包含函数名称，以及函数失败的原因。

function getDivs(element) {
    if (element && element.getElementsByTagName) {
        return element.getElementsByTagName("div");
    } else {
        throw new Error("getDivs(): Argument must be a DOM element.");
    }
}

何时抛出错误? 辨别代码中哪些部分在特定的情况下最优可能导致失败，并只在哪些地方抛出错误才是关键所在。我们的目的不是防止错误，而是错误发生的时候更加容易地调试。

// 不好的，太多检查
function addClass(element, className) {
    if (!element || typeof element.className != "string") {
        throw new Error("addClass(): First argument must be a DOM element.");
    }
    if (typeof className != "string") {
        throw new Error("addClass(): Second argument must be a string.");
    }
    element.className += " " + className;
}
// 好的写法  第二个参数是null 或者一个数字或者一个布尔值时是不会抛出错误的
function addClass(element, className) {
    if (!element || typeof element.className != "string") {
        throw new Error("addClass(): First argument must be a DOM element.");
    }
    element.className += " " + className;
}

使用try catch 语句，当在try中发生一个错误，会立即跳到catch语句，传入一个错误对象。还可以增加一个finally 模块，不管错误发不发生都会执行。

try {
    somethingThatMightCauseAnError();
} catch (ex) {
    handleError(ex);
} finally {
    continueDoingOtherStuff();
}

第十一章不是你的对象不要动

以下这些对象不要尝试去修改他们，因为他们已经存在了：原生对象（Object, Array）, DOM对象（document）, 浏览器对象模型（BOM）对象（window）, 类库的对象。对待他们的原则是：不覆盖方法；不新增方法；不删除方法；下面是一些不好的示例：

document.getElementById = function() {
    return null; // talk about confusing
};

document._originalGetElementById = document.getElementById;
document.getElementById = function(id) {
    if (id == "window") {
        return window;
    } else {
        return document._originalGetElementById(id);
    }
};

document.sayImAwesome = function() {
    alert("You‘re awesome.");
};

Array.prototype.reverseSort = function() {
    return this.sort().reverse();
};

YUI.doSomething = function() {
    // code
};

document.getElementById = null;

更好的途径：有三种，见代码

//基于对象的继承
var person = {
    name: "Nicholas",
    sayName: function() {
    alert(this.name);
}
};
var myPerson = Object.create(person);
myPerson.sayName(); // pops up "Nicholas"

//基于类型的继承
function MyError(message) {
    this.message = message;
}
MyError.prototype = new Error();
var error = new MyError("Something bad happened.");
console.log(error instanceof Error); // true
console.log(error instanceof MyError); // true

//门面模式  与适配器唯一不同是 其创建新的接口，后者实现已经存在的接口
function DOMWrapper(element) {
    this.element = element;
}
DOMWrapper.prototype.addClass = function(className) {
    this.element.className += " " + className;
};
DOMWrapper.prototype.remove = function() {
    this.element.parentNode.removeChild(this.element);
};

// Usage
var wrapper = new DOMWrapper(document.getElementById("my-div"));

// add a CSS class
wrapper.addClass("selected");

// remove the element
wrapper.remove();

第十二章浏览器嗅探

User-agent 检测

// Bad
if (navigator.userAgent.indexOf("MSIE") > -1) {
    // it‘s Internet Explorer
} else {
    // it‘s not
}

// good 不要试图检测IE 9及其高版本，而应该只检测IE8以及之前的
if (isInternetExplorer8OrEarlier) {
    // handle IE8 and earlier
} else {
    // handle all other browsers
}

特性检测，推荐使用特性检测

// Bad
if (navigator.userAgent.indexOf("MSIE 7") > -1) {
    // do something
}

// Good
if (document.getElementById) {
    // do something
}

避免特性推断

// Bad - uses feature inference
// 不能从一个特性推断出另一个特性是否存在
function getById (id) {
    var element = null;
    if (document.getElementsByTagName) { // DOM
        element = document.getElementById(id);
    } else if (window.ActiveXObject) { // IE
        element = document.all[id];
    } else { // Netscape <= 4
        element = document.layers[id];
    }
    return element;
}

避免浏览器推断，你不能根据某种方法存在就判定是某一种浏览器

// Bad
if (document.all) { // IE
    id = document.uniqueID;
} else {
    id = Math.random();
}

var isIE = !!document.all;

var isIE = !!document.all && document.uniqueID;

后面的章节是另一部分，比如文件目录，自动化啊等，不好总结。

如果觉得好，请点击下方的推荐噢，感谢您的阅读！

读《编写可维护的javascript》笔记

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 读《编写可维护的javascript》笔记

读《编写可维护的javascript》笔记

第一章 基本的格式化

第二章 注释

第三章 语句和表达式

第四章 变量、函数和运算符

第五章 UI的松耦合

第六章 避免使用全局变量

第七章 事件处理

第八章 避免 “空比较“

第九章 将配置数据从代码中分离出来

第十章 抛出自定义错误

第十一章 不是你的对象不要动

第十二章 浏览器嗅探

看完仍有疑问？有类似问题直接问程序猿

第一章基本的格式化

第二章注释

第三章语句和表达式

第四章变量、函数和运算符

第六章避免使用全局变量

第七章事件处理

第八章避免 “空比较“

第九章将配置数据从代码中分离出来

第十章抛出自定义错误

第十一章不是你的对象不要动

第十二章浏览器嗅探