一、遇到的问题

只要你是前端，你肯定写过或者见过下面代码。

<scrpit type="text/javascript" src="a.js"></script>
<scrpit type="text/javascript" src="b.js"></script>
<scrpit type="text/javascript" src="c.js"></script>

其中a.js:

function a(){
    ...
}

function b(){
    console.log("a.b");
    ...
}

其中b.js:

function b(){
    console.log("b.b");
    ...
}

其中c.js:

function c(){
    ...
}
a();
b();

在c.js里边就碰到了些令你感到愤怒的问题,其中的调用b(),此时如果你想调用a.js中的b.js那么已经被覆盖掉了，命名冲突了，是不是很崩溃，解决方法就是把b.js中的b函数改成myB或者其他命名了。

还有一个问题就是可能别人用你的代码时候只引入了个c.js，那么就直接报错了，提示没有a方法和b方法。这个就是依赖管理了。

这里的两个问题暂时看来还是比较好改的，但是当放大到一个项目中，一个公司中，那么问题就多了，你给你的同事说了好几遍但是就是有人忘了引入a.js,把自己的函数名字和你的写的重复了，那就有的你调试了。

二、解决方法

解决问题一：（命名冲突）

YUI 团队下定决心解决这一问题。在 YUI3 项目中，引入了一种新的命名空间机制。

这里使用的沙箱机制，也就是局部作用域，局部作用域定义的变量和方法，只能在局部使用。

解决问题二：（依赖管理）

YUI是使用了通过配置的方式来解决。

YUI.add('my-module', function (Y) {
  // ...
}, '0.0.1', {
    requires: ['node', 'event']
});

上面的代码，通过 requires 等方式来指定当前模块的依赖。这很大程度上可以解决依赖问题，但不够优雅。当模块很多，依赖很复杂时，烦琐的配置会带来不少隐患。

看了上面这两种方法，是不是考虑用别的别的方式去解决，我们的主角模块化就要登场了。

在使用模块化编程前，先了解几个概念，模块和系统。

什么是系统

在生活和工作中，我们会接触到大量系统：自然界生态系统、计算机操作系统、软件办公系统，还有教育系统、金融系统、网络系统、理论系统等等。究竟什么是系统呢？

来看下维基百科的解释：

系统泛指由一群有关连的个体组成，根据预先编排好的规则工作，能完成个别元件不能单独完成的工作的群体。系统分为自然系统与人为系统两大类。
简言之，系统有两个基本特性：

系统由个体组成。
个体之间有关连，按照规则协同完成任务。
系统中的个体可称之为系统成员，这样，要构建一个系统，最基本层面需要做两件事：

定义系统成员：确定成员是什么。 约定系统通讯：确定成员之间如何交互，遵循的规则是什么。

只要把这两个问题描述清楚，我们就可以构建出系统。

模块系统

Sea.js 是一个适用于 Web 浏览器端的模块加载器。在 Sea.js 里，一切皆是模块，所有模块协同构建成模块系统。Sea.js 首要要解决的是模块系统的基本问题：

模块是什么？

模块之间如何交互？

在前端开发领域，一个模块，可以是JS 模块，也可以是 CSS 模块，或是 Template 等模块。在 Sea.js 里，我们专注于 JS 模块（其他类型的模块可以转换为 JS 模块）：

模块是一段 JavaScript 代码，具有统一的基本书写格式。 模块之间通过基本交互规则，能彼此引用，协同工作。

摘自：https://github.com/seajs/seajs/issues/240