好程序员web前端教程之前端模块化开发

1. 命名冲突

　　首先从一个简单的习惯开始。

　　由于以前一直做 JavaEE 开发的缘故，在 JavaScript 开发中，我已经习惯将项目中的一些通用功能抽象出来，形成一个个的独立函数，以便于实现代码复用，如：

function css(element, attr) { // 获取 element 元素的 attr 对应的 CSS 属性值

// ...

}

function offset(element) { // 获取 element 元素在文档中的位置坐标

// ...

}

　　并把这些封装的函数放在统一的 tools.js 文件中。

　　如果页面功能实现需要使用到这些函数，则直接通过 引入即可。

　　前期感觉一切都好，大家也都觉得写这样的工具文件对开发来说很方便，直到使用越来越多，页面功能越来越复杂，大家要实现的需求也越来越多样。

　　这时有人就抱怨，因为引入了 tools.js 文件，如果要定义一个能够设置 css 属性值的函数，那么就只有取另外的函数名称(如 setCss )而不能再使用 css 这个函数名称了，同样如果要设置一个元素在整个文档中的定位坐标，也不能再使用 offset 这个函数名称，因为那样的话，就与 tools.js 文件中已定义的函数名称冲突了。

　　既然问题出现了，就需要解决。

　　在 Java 中有一个非常实用的技术——package，它将逻辑上相关的代码组织在一起使用“包”来进行管理，这相当于文件系统中的文件夹。在文件系统中，文件夹内是相对独立的一个空间，不用担心一个文件夹和另一个文件夹中文件命名的冲突。在“包”中也一样，可以解决文件命名冲突问题，如果要在包外部再使用到包内的资源，直接通过 import 导入相关的 package 即可。类似包这样的概念，在其它的语言(如 C#)中也称为命名空间。

JavaScript 中并没有提供原生的包或命名空间的支持，但可以使用其它的方法(如对象、闭包)来实现类似的效果。

　　参照 Java 的方式，我使用 JavaScript 中的对象来简单修改 tools.js 文件：

var Util = {

css : function(element, attr) {

// ...

},