系统化 js模块化知识

Issues
## 为什么想去了解 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模版 中的特殊字符来代替