Javascript模块化编程01为什么要模块化编程
Javascript模块化编程
如今经常听到模块化编程的这个概念，在WEB前端的领域更是如火如荼，相应的工具与框架层出不穷，那么到底为什么要模块化编程呢：
- 什么是模块/模块化
- 模块化进化史
- 为什么要模块化
- *模块化的好处
- 模块化的问题
什么是模块/模块化
将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起的编程方法；块的内部数据以及实现都是私有的，只是向外部暴露一些接口方法与外部其他模块通信
模块化进化过程
- 模块进化过程–初期JS代码写法
- 最早的JS代码，所有的功能代码都写在一个文件内，由HTML引入使用
html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script src="module.js">script>
<script>
f1();
f2();
msg = 'newmsg';
f1();
f2();
script>
body>
html>js代码
var msg = 'test';
function f1(){
console.log("f1()",msg);
}
function f2(){
console.log("f2()",msg);
}- 模块进化过程–使用对象封装
- 简单的封装，将功能代码封装成一个对象，减少了全局的变量数据，本质上是对象，一点儿都不安全，可以通过对象操作属性的方式去操作数据
html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script src="module.js">script>
<script>
obj.f1();
obj.f2();
obj.msg = 'new msg';
obj.f1();
obj.f2();
script>
body>
html>js代码
var obj = {
msg:'zhouxingxing',
f1:function(){
console.log("f1()",this.msg);
},
f2: function(){
console.log("f2()",this.msg)
}
}
- 模块进化过程–匿名闭包函数（立即执行函数）
- 通过匿名函数闭包形式，立即执行函数，相对来说比较安全，将所有的业务逻辑放到闭包函数内部
html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js">script>
<script src="module.js">script>
<script>
script>
body>
html>js代码
(function(window){
var msg = 'test';
function f1() {
console.log("f1()", msg);
}
function f2() {
console.log("f2()", msg);
}
window.module3 = {f1,f2};
})(window);- 模块进化过程–匿名闭包函数（立即执行函数）+引入依赖（形式参数形式传递）
-
在上面的基础上把需要的函数以形式参数的方式传递到立即执行函数中，这也是最早模块实现的一个雏形
html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script src="module.js">script>
<script>
window.module3.f1();
window.module3.f2();
msg = "new msg";
window.module3.f1();
window.module3.f2();
script>
body>
html>js代码
(function(window,$){
var msg = 'test';
function f1() {
console.log("f1()", msg);
}
function f2() {
console.log("f2()", msg);
}
$(window).css('background','red');
})(window, jquery);- 为什么要模块化
- 降低代码的复杂程度，降低代码直接的耦合性也就是常说的提高解耦性，比如我们最早将所有的代码都写在同一个文件内，那么在页面的引入中，如果该页面本身并不需要其中的某些功能（例如轮播效果，可能只是在首页用到，但是我们现在可能是个注册页面）就会造成资源的浪费，代码的加载量过大，而多数都是无意义的代码
- 模块化的好处
-
1.避免命名冲突，减少命名空间污染
2.更好的分离，页面按需加载代码
3.更高的复用性
4.更高的可维护性
<head>
<script src="1.js">script>
<script src="2.js">script>
<script src="3.js">script>
head>
//模块化之后的最大一个问题，增加了请求次数，本来只是请求1次，由于拆分成模块化，请求多次，如何避免这样的问题？模块化的问题
1.请求过多
2.依赖模糊
3.难以维护
因为理想总是美好的，而现实总是残酷的，为了解决模块化的问题，提出了模块化的规范