前端模块化的学习笔记

在做项目的时候碰上了一些require import export，却不知道这些都是什么意思。所以找时间来学习了一下模块化和webpack打包工具。这是我的学习笔记~
这块学习的主要资料是看尚硅谷的教学视频。

1.什么是模块化？

将一个复杂的程序依据一定的规范封装成几个块(文件)，并组合在一起。叫做模块化。
块和块之间的内部数据/实现是私有的，只是向外部暴露一些接口(方法)，用这些接口与外部其他模块进行通信。

2.模块化的发展

2.1 function模式

最初，我们把每一个功能的实现封装成一个函数。把函数划分成一个一个的模块，如

function foo(){
//实现...的功能
}
function bar(){
//实现...的功能
}

这样带来了一些问题：
很容易污染全局命名空间, 容易引起命名冲突或数据不安全。

2.2 namespace模式

人们想到，如果放在全局会污染命名空间的话。那我把所有的方法放到一个对象里面，这样就不会污染了呀。所以代码写成了下面这个样子：

var moduleObj = {
	foo:function(){}
	bar:function(){}
}
modeleObj.foo();

虽然这样是减少了Global上的变量数目。但是由于本质是对象，人们很轻易的可以修改对象中定义的方法，也不安全。

2.3 IIFE模式(匿名闭包模式)

由于是匿名的立即执行模式，所以外部无法操作内部的数据。只能使用匿名函数返回的方法/对象的方法。一定程度上实现了模块化的需要。代码写成下面这个样子：

var moduleObj = (function(){
	var privateName = "some private"
	var foo = function(){
		//实现..的功能
	}
	return {
		privateName:privateName,
		foo:foo
	}
})()
moduleObj.foo()
console.log(moduleObj.privateName)

如果我们想要引入依赖呢？

2.4 模块模式：引入依赖模式

如果我们想要引入依赖，我们就将依赖作为参数传入立即执行函数。这是现代模块化实现的基石。

var moduleObj = (function(){
	var privateName = "some private"
	var foo = function(){
		console.log("传入的依赖为：",dependence)
	}
	return {
		privateName:privateName,
		foo:foo
	}
})(dependence)
moduleObj.foo()
console.log(moduleObj.privateName)

3.为什么要模块化？

对代码进行解耦，还能带来以下的好处：
(1)避免命名冲突(减少命名空间污染)
(2)更好的分离, 按需加载
(3)更高复用性
(4)高可维护性

4.带来的问题？

将一个代码拆分成多个js代码后，代码变成了多次引入js文件。这样会带来几个问题：
(1)多个js文件就意味着我们要发多次请求，网页加载变慢
(2)多个js文件可能会互相依赖，那么我们在引入js文件的时候就要保证引入顺序不能错乱。容易导致依赖模糊的问题。
(3)模块是会多次复用的，所以容易导致“牵一发而动一身”的问题，难以维护。