# js-modules

**Repository Path**: yushi5344/js-modules

## Basic Information

- **Project Name**: js-modules
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-09
- **Last Updated**: 2021-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# js-modules
## 模块进化史
1. 全局function模式
   - module1.js
       ```javascript
         //数据
         let data = 'atguigu.com'
         
         //操作数据的函数
         function foo() {
            console.log(`foo() ${data}`)
         }
         function bar() {
            console.log(`bar() ${data}`)
         }
      ```
   - module2.js
      ```javascript
      let data2 = 'other data'
      
      function foo() {  //与另一个模块中的函数冲突了
          console.log(`foo() ${data2}`)
      }
     ```
   - index.html
      ```html
       <script type="text/javascript" src="module1.js"></script>
       <script type="text/javascript" src="module2.js"></script>
       <script type="text/javascript">
       
         let data = "修改后的数据"
         foo()
         bar()
       </script>
     ```
   - 说明
      - 全局函数模式: 将不同的功能封装成不同的全局函数
      - 问题: Global被污染了,很容易引起命名冲突
2. namespace模式
   - module1.js
      ```javascript
      let myModule = {
        data: 'atguigu.com',
        foo() {
           console.log(`foo() ${this.data}`)
        },
        bar() {
           console.log(`bar() ${this.data}`)
        }
      }
      ```
   - module2.js
      ```javascript
      let myModule2 = {
        data: 'atguigu.com2222',
        foo() {
           console.log(`foo() ${this.data}`)
        },
        bar() {
          console.log(`bar() ${this.data}`)
        }
      }
      ```
   - index.html
      ```html
       <script type="text/javascript" src="module2.js"></script>
       <script type="text/javascript" src="module22.js"></script>
       <script type="text/javascript">
         myModule.foo()
         myModule.bar()
       
         myModule2.foo()
         myModule2.bar()
       
         myModule.data = 'other data' //能直接修改模块内部的数据
         myModule.foo()
       
       </script>
      ```
   - 说明
      - namespace模式: 简单对象封装
      - 作用: 减少了全局变量
      - 问题: 不安全
3. IIFE模式
   - module3.js
      ```javascript
     (function (window) {
         //数据
         let data = 'atguigu.com'
         
         //操作数据的函数
         function foo() { //用于暴露有函数
         console.log(`foo() ${data}`)
         }
         
         function bar() {//用于暴露有函数
         console.log(`bar() ${data}`)
         otherFun() //内部调用
         }
         
         function otherFun() { //内部私有的函数
         console.log('otherFun()')
     }
     
     //暴露行为
     window.myModule = {foo, bar}
     })(window)
     ```
   - index.html
      ```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 = 'xxxx' //不是修改的模块内部的data
        myModule.foo() //没有改变
      
      </script>
      ```
   - 说明
      - IIFE模式:匿名函数自调用(闭包)
      - IIFE: immediately-invoked function express 立即调用函数表达式
      - 作用: 数据是私有的,外部只能通过暴露的方法操作
      - 问题: 如果当前模块依赖另一个模块怎么办?
4. IIFE模式增强
   - module.js 引入jQuery
      ```javascript
     (function (window, $) {
        //数据
        let data = 'atguigu.com'
        
        //操作数据的函数
        function foo() { //用于暴露有函数
           console.log(`foo() ${data}`)
        $('body').css('background', 'red')
        }
        
        function bar() {//用于暴露有函数
          console.log(`bar() ${data}`)
          otherFun() //内部调用
        }
        
        function otherFun() { //内部私有的函数
          console.log('otherFun()')
       }
     
       //暴露行为
          window.myModule = {foo, bar}
       })(window, jQuery)
     ```
   - index.html
      ```html
     <script type="text/javascript" src="jquery-1.10.1.js"></script>
     <script type="text/javascript" src="module4.js"></script>
     <script type="text/javascript">
       myModule.foo()
     </script>
     ```
   - 说明
      - IIFE模式引入依赖,是现代模块实现的基石
5. 页面加载多个js
   - 页面
      ```html
      <script type="text/javascript" src="module1.js"></script>
      <script type="text/javascript" src="module2.js"></script>
      <script type="text/javascript" src="module3.js"></script>
      <script type="text/javascript" src="module4.js"></script>
      ```
   - 说明
      - 一个页面引入多个js文件
      - 问题
          - 请求过多
          - 依赖模糊
          - 难以维护

## 模块化
  ![](public/JS模块化.png)
## CommonJs模块化  服务器端实现
1. module1.js
   ```javascript
   module.exports=function () {
     console.log("module1")
     return [1,3,4,5,2,3,4,2,4,5,7,8]
   }
   ```
2. module2.js
   ```javascript
   exports.foo=function () {
     console.log("module2")
   }
   ```
3. module3.js
   ```javascript
   exports.bar=function () {
      console.log("bar--module3")
   }
   exports.foo=function () {
      console.log("foo --module4")
   }
   ```
4. index.js
   ```javascript
   const uniq=require("uniq")
   let module1=require("./module1"),
   module2=require("./module2"),
   module3=require("./module3")
   console.log(uniq(module1()))
   module2.foo();
   module3.foo();
   module3.bar()
   ```
5. 运行  `node index.js   `
## CommonJs模块化  浏览器端实现
1. 下载安装 browserify
   ```shell
     npm i -g browserify
     npm i -D browserify
   ```
2. module1.js
   ```javascript
   module.exports=function () {
     console.log("module1")
     return [1,3,4,5,2,3,4,2,4,5,7,8]
   }
   ```
3. module2.js
   ```javascript
   exports.foo=function () {
     console.log("module2")
   }
   ```
4. module3.js
   ```javascript
   exports.bar=function () {
      console.log("bar--module3")
   }
   exports.foo=function () {
      console.log("foo --module4")
   }
   ```
5. index.js
   ```javascript
   const uniq=require("uniq")
   let module1=require("./module1"),
   module2=require("./module2"),
   module3=require("./module3")
   console.log(uniq(module1()))
   module2.foo();
   module3.foo();
   module3.bar()
   ```
6. 打包
   ```shell
      browserify js/src/app.js -o js/dist/bundle.js
   ```
7. 页面引入
   ```html
     <script type="text/javascript" src="js/dist/bundle.js"></script> 
   ```

## AMD 
1. module1.js
   ```javascript
    define(function () {
    let name="module1";
    function getName() {
    return name;
    }
    // 暴露模块
    return {getName}
    });
   ```

2. module2.js
   ```javascript
    define(["module1","jQuery"], function (module1) {
       let msg="module2";
       function showMsg() {
           console.log(msg,module1.getName())
       }
       $("body").css("background","red")
          return {showMsg}
       });
   ```
3. index.js
   ```javascript
   (function () {
      requirejs.config({
        baseUrl:"",
        paths:{
           module1: "./module1",
           module2: "./module2",
           jQuery:"./jquery"
        }
      })
      requirejs(["module2"],function (module2) {
         module2.showMsg();
      });
   })();
   ```
4. index.html
   ```html
     <script data-main="js/main" src="js/libs/require.js"></script>
   ```
   
## ES6 模块化
1. module1.js  分别暴露  
   ```javascript
     export function bar () {
        console.log("bar--module3")
     }
     export function foo() {
        console.log("foo --module4")
     }
   ```
2. module2.js 统一暴露
   ```javascript
     function foo() {
       console.log("module2--foo")
     }
     function bar(){
       console.log("module2--bar")
     }
     export  {
        foo,
        bar
     }
   ```
3. module3.js 默认暴露
   ```javascript
   export default function () {
     console.log("module1")
     return [1,3,4,5,2,3,4,2,4,5,7,8]
   }
   ```
4. 页面引入
   ```javascript
    import hhh from "./es_modules/module1";
    import {foo,bar} from "./es_modules/module2";
    import {foo as foot,bar as bart} from './es_modules/module3'
    import uniq from 'uniq'
    console.log(hhh())
    foo();
    bar();
    foot();
    bart()
    console.log(uniq(hhh()));
```