《编写可维护的JavaScript》——JavaScript编码规范(七)

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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。谢谢合作。

-->

原文地址:https://www.cnblogs.com/beginner2014/p/5485462.html