当修改一个组件而不需要更改其他组件时，就做到了松耦合
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); });
当处理事件时，最好让事件程序成为接触到event对象的唯一的函数。事件处理程序应当在进入应用逻辑之前针对event对象执行任何必要的操作，包括阻止事件冒泡，都应当直接包含在事件处理程序中
//改进的做法 var MyApplication = { handleClick: function(event){ 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); });
四、配置数据代码无非是定义一些指令的集合让计算机来执行。我们常常将数据传入计算机，由指令对数据进行操作，并最终产生一个结果。当不得不修改数据时，可能会带来一些不必要的风险。应当将关键数据从代码中抽离出来
配置数据是指导在应用中写死的值，且将来可能会被修改，包括如下内容
1、URL
2、需要展现给用户的字符串
3、重复的值
4、配置项
5、任何可能发生变更的值
下面是未处理配置数据的做法