《编写可维护的 JavaScript》笔记三

返回列表

读书笔记 | 小叉 | 2013年08月30日

【第5章 UI层的松耦合】

在 Web 开发中,用户界面(User Interfaoe, UI)是由三个彼此隔离又相互作用的层定义的。

  • HTML 用来定义页面的数据和语义。

  • CSS 用来给页面添加样式,创建视觉特征。

  • JavaScript 用来给页面添加行为,使其更具交互性。


5.1 将 JavaScript 从 CSS 中抽离

避免使用 CSS 表达式(CSS Expression)

※ IE9 不再支持 CSS 表达式


5.2 将 CSS 从JavaScript 中抽离

修改 DOM 元素的 className,而不是修改 DOM 元素的 style

// 原生方法
element.className += "newclass";

// HTML5
element.classList.add("newclass");

// YUI
Y.one(element).addClass("newclass");

// jQuery
$(element).addClass("newclass");

// Dojo
dojo.addClass(element, "newclass");

※ 在重新给元素定位时,可以直接修改 style 的 top、left、bottom、right 属性,因为在 CSS 中无法完成。可以在 CSS 中定义元素的默认属性,而在 JavaScript 中修改这些默认属性。


5.3 将 JavaScript 从 HTML 中抽离

避免使用 on 属性(例如 onclick)来绑定事件处理程序:

// 不好的写法
<button onclick="doSomething()" id="action-btn">Click Me</button>

使用 JavaScript 方法来添加事件处理程序,更好的方法:

function addListener(target, type, handler) {
    if (target.addEventListener) {
        target.addEventListener(target, type, handler);
    } else if (target.attachEvent) {
        target.attachEvent("on" + type, handler);
    } else {
        target["on" + type] = handler;
    }
}

function doSomething(){
    // 代码
}
var btn = document.getElementById("action-btn");
addListener(btn, "click", doSomething);

一些常见类库的方法:

// YUI
Y.one("#action-btn").on("click", doSomething);

// jQuery
$("#action-btn").on("click", doSomething);

// Dojo
var btn = dojo.byId("action-btn");
dojo.connect(btn, "click", doSomething);)


5.4 将 HTML 从 JavaScript 中抽离

方法 1:从服务器加载

将模板放在服务器,通过 Ajax 方法从服务器读取模板。


方法 2:简单客户端模板

通过一些标识,通过 JavaScript 替换内容。


方法 3:复杂客户端模板

使用模板引擎,如:Handlebars(http://handlebarsjs.com)。



【第6章 避免使用全局变量】

在浏览器中, window 对象往往重载并等同于全局对象,因此任何在全局作用域中声明的变量和函数都是 window 对象的属性。

  • 始终使用 var 声明变量

  • 使用命名空间

  • 使用模块


“异步模块定义”(AMD)

AMD 规范:https://github.com/amdjs/amdjs-api/wiki/AMD


零全局变量(匿名函数)

(function(win) {
    var doc = win.document;
    // 在这里定义其他的变量
    // 其他相关代码
})(window);



【第7章 事件处理】

当事件触发时,