关于前端学习:Javascript模块化开发

理解模块化开发
- 模块化开发是指将一类办法封装在一个 JS文件中，每一个不同的性能类的 JS文件就是一个模块，而后通过引入不同性能的文件相互配合，实现目标成果
- 引入多个文件呈现的问题
  1. 文件引入程序，被依赖文件必须在应用被依赖文件内办法的文件后面
  2. 当多个JS文件时，产生文件依赖关系不清晰问题
  3. JS 文件外部全局变量净化
模块化开发发展史

没有模块化开发阶段

依照依赖程序进行进入JS文件，最初引入整合文件
前期无奈进行保护代码，依赖关系不清晰
全局变量净化，模块文件中的全局变量能够在其余模块或整合文件中间接进行应用，其余文件也无奈定义雷同的变量名

// 模块文件a<script src="a.js"></script>// 模块文件b// 文件外部可能应用了 a 文件外部办法，所以须要在 a 文件前面引入<script src="b.js"></script>// 性能整合文件main// 文件是整合文件，应用了 a b 文件内的办法，所以 a b 须要引入在 main 文件后面<script src="main.js"></script>// a.jsvar num = 100;function af1(){    console.log('a文件内的af1办法')}function af2(){    console.log('a文件内的af2办法')}// b.jsfunction bf1(){    af2();    console.log('应用了a文件内的af2办法')}function bf2(){    console.log('a文件内的bf2办法')}// main.jsconsole.log(num) // num 是一个全局变量，所以在main文件内能够应用af1();bf1();

IIFE伪模块化开发阶段（非官方）
原理：在JS文件中书写一个自执行函数，而后将办法写在自执行函数体内，但办法是自执行函数内的局部变量，外界无奈应用，所以须要将外界须要的办法挂载在全局上

解决的问题：

通过自执行函数的参数可晓得依赖了哪些模块
在自执行函数中定义的变量属于局部变量，没有全局变量净化问题

产生的问题：

文件引入程序不能动
尽管晓得依赖了哪些模块，然而不晓得模块是哪个文件的

// 模块文件a<script src="a.js"></script>// 模块文件b// 文件外部可能应用了 a 文件外部办法，所以须要在 a 文件前面引入<script src="b.js"></script>// main 文件是整合文件，应用了 a b 文件内的办法，所以 a b 须要引入在 main 文件后面<script src="main.js"></script>// 模块文件a.js(function(){    // 自执行函数执行完结后，变量主动销毁    var num = 100;    function af1(){        console.log('a文件内的af1办法')    }    function af2(){        console.log('a文件内的af2办法')    }    // 将变量和办法挂载在全局上，其余文件可进行应用    window.madA={      af1,      af2,      num    }})()// 模块文件b.js(function(madA){// 这里的参数接管的是自执行函数参过去的参数    function bf1(){        madA.af2();        console.log('应用了a文件内的af2办法')    }    function bf2(){        console.log('a文件内的bf2办法')    }    // 将其余文件须要用到的办法挂在在全局上    window.madB={        bf1,        bf2    }// 传入其余模块文件挂载在全局上的对象名，在函数内进行应用外部变量和办法})(madA)// 模块文件main.js(function(madA，madA){    console.log(madA.num) // num 是其余文件挂载在全局上的变量，所以在main文件内能够应用    madA.af1();    madB.bf1();})(madA,madB)

commonJS模块化开发规范
CommmonJS用于node端模块化开发(只能用于后端)
模块化开发标准：
1. 通过module.exports或exports来裸露模块
2. 通过require来加载模块
CommmonJS的特点：
1. 同步加载，个别用于node端
2. 一次加载，屡次应用。对同一个模块而言，只会运行一次，屡次应用时会从缓存中获取
3. 模块加载的程序，依照它呈现的程序
4. 代码都运行在模块作用域，不会造成全局净化
```
//a.js文件var math = {    add:function(a,b){        return a+b;    }}// module是代表以后模块，通常通过module.exports来裸露模块module.exports = math    //b.js// 引入依赖模块var math = require('./a.js')//模块依赖,通过require导入模块console.log(math.add(1,2))        
```

AMD模块化规范（非官方）阶段——前置依赖
由社区发动，没有关键字，并且须要引入第三方文件require.js应用
AMD模块化标准：

通过define()办法定义模块
通过require()办法加载模块
通过define(['依赖文件地址'···],function(接管依赖文件返回值){})，在模块文件中导入另一个模块文件

解决的问题：

文件依赖清晰
解决全局变量净化问题

产生的问题：
前置依赖：文件会在关上页面时加载，首屏加载工夫长，前期晦涩

// 引入第三方文件<script src="require.js"></script>// 定义一个模块文件define(function() {    var helloInLang = {      en: 'Hello world!',      es: '¡Hola mundo!',      ru: ' !'    };    // 裸露内容    return {        sayHello: function (lang) {               return helloInLang[lang];        }    };});// 引入一个模块define(['./lib/greeting'], function(greeting) {    // 这个形参接管的就是模块返回的办法或内容    var phrase = greeting.sayHello('en');});// 在整合文件中应用其余模块文件中的变量和办法require(['./modules/module1'], function (module1) {      module1.sayHello('hello')})

CMD通用模块化规范（非官方）——即时依赖
在社区中，由淘宝“玉伯”开发的CMD模块化规范，依赖第三方文件应用
定义模块：define(function(require, exports, module){})

require()参数用于导入其余文件
exports参数用于将文件导出内容

解决的问题：解决前置依赖问题，加载时按需加载，也提供了依赖前置的接口

存在的问题：即时依赖，首屏加载快，操作不够晦涩

// 引入第三方文件<script src="./js/sea.js"></script>// 定义一个模块文件define(function(require, exports, module) {    // 定义方法    function fn(){        console.log("CMD")    }    // 在模块文件中导入其余模块    var mod_A = require('依赖文件地址');    // 导出内容    module.exports = {fn}})// 整合文件define(function(require, exports, module) {seajs.use(['依赖文件地址'], function(modA){调用办法等})});

ES6(ES2015)模块化规范
ES6 语法中自带一个模块化规范，提供了关键字，须要在 <script>标签增加 type=“module”属性，并且只有在服务器上关上才无效
导出语法：
1. export default 导出内容
2. export var 变量名=值
导入语法：
1. import 变量 from '模块文件地址'
2. import {接管变量} from ‘模块文件地址’
3. 解决前置依赖问题语法：import('模块文件地址').then(function(形参){})
解决的问题：不须要依赖第三方文件，每个文件都能够是模块文件，或整合文件
存在的问题：须要兼容解决
```
//定义一个模块export default {    // 以对象或者数组到处    function fn (lang) {        return helloInLang[lang];    }};// 引入一个模块import fn from "模块文件";
```

理解模块化开发

模块化开发发展史