读书笔记-高质量JavaScript

零、导读列表

本文主要讨论以下几个问题：
- 如何避免JS冲突（匿名函数）
- 不同脚本之间如何通信（全局变量+命名空间）
- 如何设置JS程序统一入口（window.onload）
- 有哪些在线文件压缩网站

一、如何避免JS冲突

之所以会有JS冲突，主要原因是JS变量没有局部作用域的概念，除了函数内部的变量其他的都是属于全局作用域，这样就导致不同的js代码块可能会使用相同的变量名，那有什么好的方法避免这种情况呢，答案就是使用匿名函数。

<!-- 第一段代码 -->
<script>
    var a="hello world 1";
    console.log(a);
</script>
<!-- 第二段代码 -->
<script>
    var a="hello world 2nd";
    console.log(a);
</script>
<!-- 第三段代码 -->
<script>
    (function(){
        var a="hello world 3";
        console.log(a);
    })();
</script>

第一段和第二段代码都使用了a变量（全局变量：window.a），产生冲突会出现一些意料之外的错误，第三段则使用(function(){})()匿名函数，不会污染全局变量。

二、不同脚本如何通信

第一点说到通过匿名函数来隔离不同脚本之间的变量污染，但是如果不同脚本之间要通信怎么办，很简单，再重新用回全局变量，是不是有兜兜转转的感觉？

<!-- 第一段代码 -->
<script>
    var g_a="hello world 2nd";
    console.log(a);
</script>
<!-- 第二段代码 -->
<script>
    (function(){
        var a="hello world 3";
        console.log(a);
        console.log(g_a);
    })();
</script>
<!-- 重新打印全局变量 -->
<script>
    console.log(g_a);
</script>

但，使用普通的变量作为全局变量，扩展性非常差，所以我们使用一个{}对象类型的变量作为全局变量，并使用命名空间。

<script>
var GLOBAL={};
GLOBAL.namespace = function(str){
    var arr = str.split('.'),o=GLOBAL;
    for (var i = arr[0] =='GLOBAL' ?1:0; i <arr.length; i++) {
        o[arr[i]]=o[arr[i]] || {};
        o=o[arr[i]];
    }
}

GLOBAL.namespace("A.CAT");
GLOBAL.A.CAT.NAME="lucy";
console.log(GLOBAL)
</script>

三、给程序一个统一入口

javascript是种脚本语言，浏览器下载到哪就会执行到哪儿，代码在不同的地方比较零散，没有组织，通过window.onload给它们一个统一的入口。

<script>
function init(){
    var GLOBAL={};
    GLOBAL.namespace = function(str){
        var arr = str.split('.'),o=GLOBAL;
        for (var i = arr[0] =='GLOBAL' ?1:0; i <arr.length; i++) {
            o[arr[i]]=o[arr[i]] || {};
            o=o[arr[i]];

        }
    }
    GLOBAL.namespace("A.CAT");
    GLOBAL.A.CAT.NAME="lucy";
    console.log(GLOBAL)
}
// 统一执行入口
window.onload=init;
</script>

window.onload事件要求网页内所有的元素全部加载完毕后才会触发，如果网页有很多很大的图片，加载时间非常长，那么我们的初始化函数会延迟很久才会触发。很多js框架提供了DOMReady事件代替window.onload.如JQuery:$(document).ready(init)

四、文件压缩

为了减小网页的大小，缩短网页的下载时间，在正式发布javascript代码前，我们可以先对它进行一下压缩。压缩主要是去掉空格和换行。
目前最流行的javascript压缩工具有Packer和YUI Compressor：
- http://dean.edwards.name/packer/
- https://developer.yahoo.com/yui/compressor/
- 在线JS/CSS/HTML压缩：http://tool.oschina.net/jscompress

参考来源：

• 《编写高质量代码》