UI层的松耦合

在web开发中，用户界面（UI）是由三个彼此隔离又相互作用的层定义的。

• HTML用来定义页面的数据和语义。
• CSS用来给页面添加样式，创建视觉特征。
• JavaScript用来给页面添加行为，使其具有交互性。

如果两个组件耦合太紧，则说明一个组件和另一个组件直接相关，这样的话，修改一个组件的逻辑，那么另外一个组件的逻辑也需要修改。

如果你能够做到修改一个组件而不需要修改其他的组件时，你就做到了松耦合。松耦合对于代码可维护性来说至关重要。

避免使用全局变量

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

var color = "red";

function sayColor(){

    alert(color);

}

console.log(window.color);             //"red"

console.log(typeof window.sayColor);  //"function"

color和sayColor()两者都是window对象的属性，尽管我们并没有显示地执行给window对象挂载属性的操作。

当脚本中的全局变量和全局函数越来越多时，发生命名冲突的概率也随之增高，即很可能无意间就使用了一个已经声明了的变量。

一个依赖于全局变量的函数即是深耦合于上下文环境之中。如果环境发生改变，函数很可能就失效了。

单全局变量方式

“单全局变量”的意思是所创建的这个唯一全局对象名是独一无二的（不会和内置API产生冲突），并将你所有的功能代码都挂载到这个全局对象上。因此每个可能的全局变量都成为你唯一全局对象的属性，从而不会创建多个全局变量。

<!--

作者：纤锐
出处：http://www.cnblogs.com/beginner2014
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。谢谢合作。

-->