js--编写可维护的JavaScript-2.编程实践

阅读编写可维护的JavaScript一书，写了一些笔记
1.编程风格
http://blog.youkuaiyun.com/github_34514750/article/details/51146963
2.本篇文章：编程实践

第五章：UI层的松耦合

将css从JavaScript中抽离
js改变样式常会直接修改DOM元素的style属性，但是其实样式最好尽可能的保持在CSS中，最好操作CSS的className

// 不好的写法
element.style.color = "red";

// 好的写法-原生方法
element.className += "reveal";
// 好得写法-HTML5
element.classList.add("reveal");
// 好得写法-jQuery
$(element).addClass("reveal");
//css中
.reveal{
    color:red;
}

将JavaScript从HTML中抽离
尽量不要在HTML中绑定on事件
将HTML从JavaScript中抽离

第六章：避免使用全局变量

全局变量带来的问题
命名冲突
代码的脆弱性（依赖全局变量的函数深耦合于上下文环境，一旦环境改变，可能发生问题）
难以测试（依赖于很多全局变量，没办法进行模块测试）
单全局变量方式
eg：jQuery定义了两个全局对象，$和jQuery，只有当$被其他库使用，才用jQuery
命名空间
命名空间：通过全局对象的单一属性表示的功能性分组
js我们就可以通过使用对象创建自己的命名空间

var books = {};
// a书的命名空间
books.a = {};
// b书的命名空间
books.b = {};

零全局变量
这种场景应用于完全不被其他脚本访问到的完全独立的脚本–实现方法就是：用立即执行函数调用并将所有脚本放置其中

// 这段立即执行的代码传入了window对象，因此不需要直接引用任何全局变量
// 若不修改window或doc中变量且都用var定义关键字，则不会产生任何全局变量
(function(win){
     // 设置严格模式来避免创建全局变量，当然全体是浏览器支持严格模式
     "use strict"
    var doc = win.document;
    // 其他变量和其他相关代码
}(window));

第七章：事件处理

事件触发时，event对象会作为回调参数传入事件处理程序
典型用法

// 这段代码问题：
// 事件处理程序包含了应用逻辑，应用逻辑是和应用相关的功能性代码，和用户行为无关
function handleClick(event) {
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

addListener(element,"click",handleClick);

应用抽离的好处
将此逻辑抽离出来，因为说不定用户的其他行为可能希望触发同一段逻辑（比如用户在键盘中敲入了什么，或者鼠标移到了什么地方）
即同段代码不用于耦某个特定事件的触发

应用逻辑抽离
1.将应用逻辑放在单独的一个函数中
2.并且这个函数很有可能挂载在该应用定义的一个全局对象上

var MyApplication = {
    handleClick:function(event) {
        this.showPopup(event);
    }
    // 好得api对于期望和依赖是透明的，但是这里却用event，不告诉用哪些参数
    // 测试起来不方便，还需要重新创建一个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);
});

不要分发事件对象
上述代码中event对象被无节制的分发，处理函数–>MyApplication.handleClick–>MyApplication.showPopup()

var MyApplication = {
    // 最好让事件处理程序作为接触到event对象的唯一函数
    handleClick:function(event) {
        this.showPopup(event.clientX,event.clientY);
    }
    // 好得api对于期望和依赖是透明的，这里就透明
    // 测试起来方便，给出任意x，y即可
    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);
});

// 很好的调用，测试也方便
MyApplication.showPopup(10,10);

进入应用逻辑之前针对event对象执行必要的操作（包含阻止默认事件和阻止事件冒泡）

var MyApplication = {

    handleClick:function(event) {
        // 假设时间支持DOM level2，阻止默认和冒泡
        event.preventDefault();
        event.stopPropagation();
        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);
});

第八章：避免空比较