JS模块化概念理解

2019独角兽企业重金招聘Python工程师标准>>>

我在这里整理了之前前端授课的一部分内容来给大家快速过一下模块化的知识点。 

我们主要从为什么要模块化-》模块化尝试-》 模块化成熟解决方案  这个思路阐述。

为什么要模块化

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

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

模块化尝试

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

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

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

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

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

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

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

常见库的模块化实现原理

模块规范：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

模块必须采用特定的define()函数来定义

 

更多的学习资料 https://my.oschina.net/lilugirl2005/blog/1822968

转载于:https://my.oschina.net/lilugirl2005/blog/1825907