模块化开发 -nodejs - IIFE ,CMD,AMD,ES6模块化

模块化开发

目前使用的 都是框架中的模块化开发

将固定的功能需求代码定义成对应的外部文件

通过导出/导入语句导出数据和加载外部文件

优点：

1.保护数据的安全性 - 放置全局变量污染

2.实际项目中 依赖不清晰 （就是导入的文件无法分辨相互依赖关系）

3.只会加载导出的数据，而不是加载所有的程序文件

后端模块化

nodejs的模块化开发 commonjs

导出：module.exports = { } ---- 以对象的形式导出数据和函数方法

导入：const 变量 = require( ' 文件路径 ' )  ----  定义一个变量存储导入的数据，通过变量.数据使用

前端模块化

---

1. 没有模块化

通过script标签 src属性来导入加载外部js文件

---

2.IIFE （ Immediately Invoked Function Expression ）

通过立即执行函数完成模块化开发

解决了全局变量污染，但没有解决依赖不清晰

方法：

向window顶级对象添加一个对象存储对应的数据和函数方法

调用自执行函数时，通过参数的形式输入依赖的模块化文件中的数据信息

---

3.AMD / CMD

（1）AMD （Asynchronous Module Definition）

2011年在JavaScript社区程序员发起的一种前端模块化解决方案，需要导入require.js文件执行模块化操作，以下是bootstrap上的script标签，可直接粘贴

<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>

未解决的问题：前置依赖 （对一次性将所有需要的模块化文件全部加载执行，第一次打开页面会卡顿，之后页面执行流畅（可适用于网站页面打开））

语法：

//独立模块
define(function(){
    数据
    函数方法
    ....
    return { 导出的数据 }
})

//依赖模块
define([ '文件路径1' ,'文件路径2' , ... ] , function(参数1 , 参数2 , ...){
    数据
    函数方法
    ....
    return { 导出的数据 }
})

//整合模块
require([ '文件路径1' , '文件路径2' , ... ] , function(参数1 , 参数2 , ...){
    定义对应的程序代码
})

举个例子：

    // a.js
        define('moduleA',function(){
            let a = 1
            return {a}
        })
    // b.js
        define('moduleB',['moduleA'],function(moduleA){
            let b = 'ha'
            return { b , moduleA }
        })
    // c.js
        require(['moduleB'],function(moduleB){
            console.log(moduleB)
        })

（2）CMD （ Common Module Definition ）

2011年淘宝'玉伯'团队开发的一种前端模块化解决方案，需要导入sea.js文件执行模块化操作，参考了后端的commonjs模块化方式，以下是sea.js的script标签，直接粘贴就行

<script src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/runtime-debug.js"></script>

未解决的问题：即时依赖（需要哪个模块才加载那个模块化文件，页面首次打开比较流畅，后续执行需要加载模块，会有卡顿（适用于做秒杀））

语法：

// 独立模块
define(function(参数1 , 参数2 , 参数3){
    数据
    函数方法
    参数3.exports = { 导出的数据 }
})

// 依赖模块
define(function(参数1 , 参数2 , 参数3){
    // 导入其他模块数据
    const 变量 = 参数1(' 文件路径 ')
    数据
    函数方法
    参数3.exports = { 导出的数据 }
})

// 整合模块
seajs.use(['文件路径1' , '文件路径2' , ...] , function(参数1 , 参数2 , ...){
    执行程序
})

举个例子：

    // a.js
        define('moduleA',function(require,exports,module){
            let a = 10
            exports.a = a
        })
    // b.js
        define('moduleB',function(require.exports,module){
            let b =20
            module.exports = { a , moduleA }
        })
    //c.js
        seajs.use(['moduleB'],function(moduleB){
            console.log(moduleB)
        })

---

4.ES6模块化

通过关键词完成模块化开发 - script标签必须要添加type属性，属性值是module，必须通过服务器运行

语法：

// 独立模块
    数据
    函数
    ....
export dafault { 导出的数据 }

// 依赖模块
    // 导入其他模块
    import 变量 from '文件路径'
    export default { 导出的数据 }
 
// 整合模块
    // 导入其他模块
    import 变量 from '文件路径'
    import 变量 from '文件路径'
    ....
    执行的程序

nodejs模块化开发

nodejs 模块化语法：

        抛出变量：

            exports.变量名 = 变量值

            module.exports = { key:value , key:value }

        引入变量：

            let 变量 = require('文件路径')

    nodejs环境中运行 js 语法：

        node js文件路径