系统化 js模块化知识
## 为什么想去了解 js 模块化
1. 想去了解,好奇心
2. 所接触编程的种种经历,内心想让我去了解 js 模块;(求知欲)
3. js 在现在不单单只是一种脚本语言,随着 js 语言的发展,前端的发展,前端项目越来越复杂,只限于脚本的 js 不满足当前的需要,模块化正使 js 在处理复杂庞大的应用程序上变得可靠和变得可能。在这个基础上了解 js 的模块化十分有必要
## 自己对模块化的理解
> 模块是一个可划分,对内封装起来,对外界可提供相关接口的代码块
>
> 模块化是模块之间有依赖关系的
## 读 github 上的文章
> 1. 为什么需要模块化?
> 2. 模块化是什么样的?
> 3. 如何使用模块化?
[文章](https://github.com/myshov/history-of-javascript/tree/master/4_evolution_of_js_modularity)
## js 模块化要解决的问题
1. 命名冲突(或者说同名函数的冲突)
1. 同名函数的在同一个作用域下的冲突,前面的会被后面的函数覆盖
2. 大型 js 代码库的 可维护性
1. 对于大量文件,脚本的手动控制(即通过script标签将脚本放置在页面上)变得非常乏味和法繁琐,因为首先您必须记住将必要的脚本放入页面中,其次要保留脚本的正确顺序。
## 历史
1. 直接定义依赖 - 1999
2. 命名空间模式 - 2002
1. 命名空间为代码组织提供了某种排序
```js
// file app.js
var app = {};
// file greeting.js
app.helloInLang = {
en: 'Hello world!',
es: '¡Hola mundo!',
ru: 'Привет мир!'
};
// file hello.js
app.writeHello = function (lang) {
document.write(app.helloInLang[lang]);
};
```
3. 模块模式 - 2003
1. 使用闭包封装了代码和数据,并且提供方法让外界访问到它
```js
var greeting = (function () {
var module = {};
var helloInLang = {
en: 'Hello world!',
es: '¡Hola mundo!',
ru: 'Привет мир!'
};
module.getHello = function (lang) {
return helloInLang[lang];
};
module.writeHello = function (lang) {
document.write(module.getHello(lang))
};
return module;
}());
```
> 到了这里,不过都是完成了 隔离 的目标,但是依赖关系呢?
4. 模块定义依赖关系 - 2006
1. 使用 js模版 中的特殊字符来代替