js模块化学习笔记一

一、模块化的理解

什么是模块？

将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并将其组合在一起。其中，块的内部数据/实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。

一个模块的组成

由内部变量、内部函数组成，向模块外部提供N个行为。对模块外部而言，内部变量和内部函数皆属于私有数据和私有行为。

什么是模块化？

描述一种特别的编码项目JS的方式：以模块为单元一个一个编写的模块化的项目：JS编码时是按照模块一个一个编码的。

二、模块化的进化过程

1.全局function模式

编码：全局变量/函数
问题：污染全局命名空间，容易引起命名冲突/数据不安全；
案例：

module1.js

let data = 'heiyuedu.com'
function foo(){
    console.log('foo() ${data}')
}
function bar(){
    console.log('bar() ${data}')
}

module2.js

 let data2 = "other data";
function foo(){
    console.log('foo() ${data2}')
}

Test1.html

<script type="text/javascript" src="module1.js"></script>
<script type="text/javascript" src="module2.js"></script>
<script type="text/javascript" >
let data3 = "修改后的数据";
foo();
bar();
</script>

2.namespace模式

编码：将数据/行为封装到对象中
解决：命名冲突（减少了全局变量）
问题：数据不安全（外部可以直接修改模块内部的数据）
案例：

module1.js

let myModule = {
    data : 'heiyuedu.com',
    foo(){
        console.log('foo() '+this.data);
    },
    bar(){
        console.log('bar() '+this.data);
    }
}

Module2.js

let myModule2 = {
    data : 'heiyuedu.com2',
    foo(){
        console.log('foo() '+this.data);
    },
    bar(){
        console.log('bar() '+this.data);
    }
}

Test2.html

<script type="text/javascript" src="module1.js"></script>
<script type="text/javascript" src="module2.js"></script>
<script type="text/javascript" >
myModule.foo();
myModule.bar();
myModule2.foo();
myModule2.bar();
myModule.data="other data";
myModule.foo();
</script>

3.IIFE模式

IIFE：立即调用函数表达式--->匿名函数自调用
编码：将数据和行为封装到一个函数内部，通过给window添加属性来暴露接口；
引入依赖：通过函数形参来引入依赖模块
作用：数据是私有的，外部只能通过暴露的方法操作
问题：如果当前这个模块依赖另一个模块怎么办？
案例：

module3.js

(function(window){
    let data = 'heiyuedu.com'
    function foo(){//用于暴露的函数
        console.log('foo():'+this.data);
    }
    function bar(){
        console.log('bar():'+this.data);
        otherFunc();
    }
    function otherFunc(){//内部私有的函数
        console.log("otherFunc()");
    }
    //暴露行为
    window.myModule = {foo,bar}
})(window)

Test3.html

<script type="text/javascript" src="module3.js"></script>
<script type="text/javascript" >
myModule.foo();
myModule.bar();
myModule.otherFun();//myModule.otherFun is not a function
console.log(myModule.data);//undefined 不能访问模块内部数据
myModule.data ="xxx";//不是修改的模块内部的data
myModule.foo();//没有改变
</script>

4.IIFE模式增强

引入依赖，比如引入JQuery
案例：

module4.js

(function(window,\$){
    let data = 'heiyuedu.com'
    function foo(){
        console.log('foo()'+data);
        $('body').css('background','red');
    }
    function bar(){
        console.log('bar()'+data);
        otherFunc();
    }
    function otherFunc(){
        console.log('otherFunc()');
    }
window.myModule = {foo,bar}
})(window,jQuery)

Test4.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_IIFE模式增强</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="module4.js"></script>
<script type="text/javascript">
  myModule.foo()
</script>
</body>
</html>

最后编辑于：2018.09.07 20:27:27