一、松耦合

当修改一个组件而不需要更改其他组件时，就做到了松耦合

1、将JS从CSS中抽离：不要使用CSS表达式

//不好的做法
.box{width: expression(document.body.offsetWidth + 'px')}

2、将CSS从JS中抽离：通过JS修改CSS样式时，使用className或classList，不要逐条修改style样式

//不好的做法一
ele.style.color = 'red';
ele.style.left= '10px';
//不好的做法二
ele.style.cssText ='color:red;left:10px;';
.reveal{color:red;left:10px;}
//好的做法一
ele.className += 'reveal';
//好的做法二
ele.classList.add('reveal');

3、将JS从HTML中抽离：从JS文件放入外置文件中

4、将HTML从JS中抽离：不要在innerHTML中拼接DOM结构，而是使用字符串模板，如handlerbars

二、全局变量

创建全局变量被认为是糟糕的实践，尤其在团队开发的大背景下更是问题多多。随着代码量的增长，全局变量会导致一些非常重要的可维护性难题，全局变量越多，引入错误的概率会变得越高

一般而言，有如下三种解决办法

1、零全局变量

实现方法是使用一个立即调用函数IIFE并将所有脚本放置其中

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

这种模式的使用场景有限，只要代码需要被其他的代码所依赖，或者需要在运行中被不断扩展或修改，就不能使用这种方式

2、单全局变量和命名空间

依赖尽可能少的全局变量，即只创建一个全局变量，使用单变量模式，如YUI或jQuery

单全局变量，即所创建的这个唯一全局对象名是独一无二的，并将所有的功能代码都挂载到这个全局对象上。

因此，每个可能的全局变量，都成为唯一全局变量的属性，从而不会创建多个全局变量

命名空间是简单的通过全局对象的单一属性表示的功能性分组。比如Y.DOM下的所有方法都是和DOM操作相关的，Y.Event下的所有方法都是和事件相关的。常见的约定是每个文件中都通过新的全局对象来声明自己的命名空间

3、使用模块

模块是一种通用的功能片段，它并没有创建新的全局变量或命名空间。相反，所有的这些代码都存放于一个表示执行一个任务或发布一个接口的单函数中。可以用一个名称来表示这个模块，同样这个模块可以依赖其他模块

三、事件处理

将事件处理相关的代码和事件环境耦合在一起，导致可维护性很糟糕

1、隔离应用逻辑

将应用逻辑从所有事件处理程序中抽离出来是一种最佳实践，将应用逻辑和事件处理的代码拆分开来

//不好的做法
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);
//好的做法
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对象来正确完成功能，方法接口应该表明哪些数据是必要的。代码不清晰就会导致bug。最好的办法是让事件处理程序使用event对象来处理事件，然后拿到所有需要的数据传给应用逻辑

//改进的做法
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);
});