JavaScript 耦合现象的出现，是一个常见的问题，一个高度耦合的代码会使代码难以维护、扩展，并阻碍了项目迭代的进程。下面就来讨论一下 JavaScript 耦合的问题以及解决方案。
JavaScript 的耦合问题有哪些？
下面列举出几个常见的 JavaScript 耦合问题：
1. 在一个 JavaScript 文件中，过于复杂的函数和对象调用。
2. 不同的JavaScript 文件彼此依赖，在不同文件中访问全局变量等。
3. JavaScript 文件与 HTML 页面耦合度过高，不能单独处理。
这些问题的出现，给代码的维护和迭代造成了相当大的困难。
问题的解决方案是什么？
我们有许多方法去尽可能的消除耦合，使代码更容易维护、扩展和迭代。下面是一些有用的技巧：
1. 使用模块化：把 JavaScript 代码分解为独立的、可复用的部分，避免不同模块之间的依赖。
2. 利用依赖注入：使代码更加灵活、可修改、可扩展。注入依赖可以减少模块之间的耦合。
3. 将事件处理器封装为单独的函数。这样能够更好地控制事件处理器的范围。
4. 将所有的全局变量、函数和对象放在一个命名空间中。避免不同文件之间的冲突。
代码示例：
模块化：
// 定义user模块
var user = function(){
var name = 'John';
var getName = function(){
return name;
}
// 导出方法
return {
getName:getName
}
}();
// 调用user模块
console.log(user.getName());// 模块间相互依赖
var moduleA = function(moduleB){
moduleB.sayHello();
return {
sayHello:moduleB.sayHello
}
}(moduleB);
// 调用模块A
moduleA.sayHello();// 原始事件处理器
button1.onclick = function(){
console.log('button1');
}
button2.onclick = function(){
console.log('button2');
}
// 封装后的事件处理器
var buttonClick = function(){
console.log(this.getAttribute('id'));
}
button1.onclick = buttonClick;
button2.onclick = buttonClick;// 自定义命名空间
var myNamespace = {};
// 添加全局变量和函数
myNamespace.name = 'JavaScript';
myNamespace.getName = function(){
return myNamespace.name;
}
// 调用前面定义的全局函数
console.log(myNamespace.getName());