JS模块化概念理解 原

为什么要模块化

模块化概念的引入主要是为了防止变量污染。

比如我们常常会遭遇下面代码中所遇到的问题。

模块化尝试

后来有人尝试用对象的方式来书写逻辑模块，但是这种写法有自己的弊端，比如这样的写法暴露了所有的模块成员，模块中的属性有被外部代码更改的风险。

最终人类找到了一种比较完美的方式解决变量污染问题，那就是用即时函数的方式书写

首先我们了解以下即时函数的几种常见写法

我们可以用下面这种形式包裹模块

在即时函数中返回一个对象 从而达到暴露共有属性/方法的目的 ，函数污染的问题被完美解决！！

即时函数模块化写法的应用场景

模块化编程的放大模式适用于模块的扩展场景

常见库的模块化实现原理

模块规范：CommonJS和AMD

node.js的模块系统，就是参照CommonJS规范实现的 在CommonJS中，有一个全局性方法require()，用于加载模块 CommonJS规范不适用于浏览器环境 浏览器端的模块，不能采用”同步加载"（synchronous），只能采用"异步加载"（asynchronous）

AMD Asynchronous Module Definition 是异步加载模块定义 浏览器端的应用适合AMD模块规范 主要有两个Javascript库实现了AMD规范：require.js和curl.js

require.js的用法

实现js文件的异步加载，避免网页失去响应 管理模块之间的依赖性，便于代码的编写和维护 http://requirejs.org/docs/download.html <script src="js/require.js" defer async="true" data-main=“js/main”></script> 模块必须采用特定的define()函数来定义