JS模块化

2022/1/25 23:34:23

本文主要是介绍JS模块化,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、什么是模块化

       在js出现的时候,js一般只是用来实现一些简单的交互,后来js开始得到重视,用来实现越来越复杂的功能,而为了维护的方便,我们也把不同功能的js抽取出来当做一个js文件,但是当项目变的复杂的时候,一个html页面可能需要加载好多个js文件,而这个时候就会出现各种命名冲突,如果js也可以像java一样,把不同功能的文件放在不同的package中,需要引用某个函数或功能的时候,import下相关的包,这样可以很好的解决命名冲突等各种问题,但是js中没有模块的概念,又怎么实现模块化呢

  模块化开发是一种管理方式,是一种生产方式,一种解决问题的方案,一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块,但是模块开发需要遵循一定的规范,否则就都乱套了,因此,才有了后来大家熟悉的AMD规范,CMD规范

二、JS模块发展背景

    1)幼年期(也就是无模块化)

            1.开始需要在页面中增加一些不同的js:动画、表单、格式化

            2.多种js文件被分在不同的文件中

            3.不同的文件又被同一个模板引用(文件分离是最基础的模块化第一步)

  <script src="jquery.js"></script>
  <script src="main.js"></script>
  <script src="dep1.js"></script>
  //……

            4.出现的问题:污染全局作用域 => 不利于大型项目的开发以及多人团队的共建

     2)成长期(模块化的雏形 - IIFE(语法侧的优化) )

       IIFE( 立即调用函数表达式)是一个在定义时就会立即执行的  JavaScript 函数

      1.作用域的把控

  // 定义一个全局变量
  let count = 0;
  // 代码块1
  const increase = () => ++count;
  // 代码块2
  const reset = () => {
    count = 0;
  }

  increase();
  reset();

       2.利用函数块级作用域

(()=>{
    let count = 0;
    //...
  })

       3.仅定义了一个函数 如果立即执行,就在函数后加(),表示立即执行

(() => {
    let count = 0;
    // ……
  }();

  以上步骤,仅是初步实现了一个最最简单的模块.

  下面,尝试去定义一个最简单的模块

const iifeModule = (() =>{
  let count = 0;
  return {
    increase: () => ++count;
    reset: () => {
      count = 0;
    }
  }
})();

iifeModule.increase();
iifeModule.reset();

      4.相关问题

        1)有额外依赖时,如何优化IIFE相关代码?

           答:依赖其他模块的IIFE

const iifeModule = ((dependencyModule1, dependencyModule2) => { //dependencyModule即为其他模块
  let count = 0;
  return {
    increase: () => ++count;
    reset: () => {
      count = 0;
    }
  }
})(dependencyModule1, dependencyModule2);
iifeModule.increase();
iifeModule.reset();

       2)了解早期jquery的依赖处理以及模块加载方案吗?/ 了解传统IIFE是如何解决多方依赖的问题

          答:IIFE加传参调配

  实际上 JQuery框架其实应用了revealing(揭露)的写法

const iifeModule = ((dependencyModule1, dependencyModule2) => {
  let count = 0;
  const increase = () => ++count;
  const reset = () => {
    count = 0;
  }

  return {
    increase, reset
  }
})(dependencyModule1, dependencyModule2);
iifeModule.increase();
iifeModule.reset();

    3)成熟期( Commonjs(CJS) )

             由node.js制定

             特征:1.通过 module + exports 去对外暴露接口

                     2.通过 require 来调用其他模块

      1.模块组织方式:

        1).main.js文件

// 引入部分
const dependencyModule1 = require(./dependencyModule1);
const dependencyModule2 = require(./dependencyModule2);

// 处理部分
let count = 0;
const increase = () => ++count;
const reset = () => {
  count = 0;
}
// 做一些跟引入依赖相关事宜……

// 暴露接口部分
exports.increase = increase;
exports.reset = reset;

module.exports = {
  increase, reset
}

        2).模块使用方式( require 调用即可 )

  const { increase, reset } = require('./main.js');

  increase();
  reset();

       2.CJS优缺点

  •    优点:CommonJS率先在服务端实现了,从框架层面解决依赖、全局变量污染的问题
  •    缺点:主要针对了服务端的解决方案。对于异步拉取依赖的处理整合不是那么的友好

那么在此产生了新的问题 ----- 异步依赖 ,就需要AMD来解决

 三、AMD规范

            方法:通过异步加载 和 允许制定回调函数

            经典实现框架: require.js

      1)新增定义方式

                通过 define 来定义一个模块,然后 require 进行加载
           

//params: 模块名,依赖模块,工厂方法  
  define(id, [depends], callback);
  require([module], callback);

      2)模块定义方式

  define('amdModule', ['dependencyModule1', 'dependencyModule2'], (dependencyModule1, dependencyModule2) => {
    // 业务逻辑
    // 处理部分
    let count = 0;
    const increase = () => ++count;
    const reset = () => {
      count = 0;
    }

    return {
      increase, reset
    }
  })

      3)引入模块

  require(['amdModule'], amdModule => {
    amdModule.increase();
  })

      4)相关问题

          1.如果在AMDmodule中想兼容已有代码,如何做?

  define('amdModule', [], require => {
    // 引入部分
    const dependencyModule1 = require(./dependencyModule1);
    const dependencyModule2 = require(./dependencyModule2);

    // 处理部分
    let count = 0;
    const increase = () => ++count;
    const reset = () => {
      count = 0;
    }
    // 做一些跟引入依赖相关事宜……

    return {
      increase, reset
    }
  })

        2.AMD中使用revealing

  define('amdModule', [], (require, export, module) => {
    // 引入部分
    const dependencyModule1 = require(./dependencyModule1);
    const dependencyModule2 = require(./dependencyModule2);

    // 处理部分
    let count = 0;
    const increase = () => ++count;
    const reset = () => {
      count = 0;
    }
    // 做一些跟引入依赖相关事宜……

    export.increase = increase();
    export.reset = reset();
  })

  define('amdModule', [], require => {
    const otherModule = require('amdModule');
    otherModule.increase();
    otherModule.reset();
  })

        3.兼容AMD&CJS / 如何判断CJS和AMD UMD的出现

(define('amdModule', [], (require, export, module) => {
    // 引入部分
    const dependencyModule1 = require(./dependencyModule1);
    const dependencyModule2 = require(./dependencyModule2);

    // 处理部分
    let count = 0;
    const increase = () => ++count;
    const reset = () => {
      count = 0;
    }
    // 做一些跟引入依赖相关事宜……

    export.increase = increase();
    export.reset = reset();
  }))(
    // 目标是一次性区分CommonJSorAMD
    typeof module === "object"
    && module.exports
    && typeof define !== "function"
      ? // 是 CJS
        factory => module.exports = factory(require, exports, module)
      : // 是AMD
        define
  )

      5)AMD优缺点

  •     优点:适合在浏览器中加载异步模块,可以并行加载多个模块
  •     缺点:会有引入成本,不能按需加载

四、CMD规范

按需加载

主要应用框架:sea.js

  define('module', (require, exports, module) => {
    let $ = require('jquery');
    // jquery相关逻辑

    let dependencyModule1 = require('./dependecyModule1');
    // dependencyModule1相关逻辑
  })

CMD优缺点: 

  •      优点:按需加载,依赖就近
  •      缺点:依赖于打包,加载逻辑存在于每个模块中,扩大模块体积

相关问题: AMD & CMD 的区别

                答:依赖就近,按需加载

五、ES6模块化

      1)新增定义

                引入关键字 ---- import

                导出关键字 ---- export

      2)模块引入、导出和定义的地方

  // 引入区域
  import dependencyModule1 from './dependencyModule1.js';
  import dependencyModule2 from './dependencyModule2.js';

  // 实现代码逻辑
  let count = 0;
  export const increase = () => ++count;
  export const reset = () => {
    count = 0;
  }

  // 导出区域
  export default {
    increase, reset
  }

      3)模板引入的地方

  <script type="module" src="esModule.js"></script>

      4)在node中

  import { increase, reset } from './esModule.mjs';
  increase();
  reset();

  import esModule from './esModule.mjs';
  esModule.increase();
  esModule.reset();

      5)相关问题

                ES6中的动态模块是哪些?

                答: export 和 promise

      6)ES11原生解决方案(包含了 promise)

  import('./esModule.js').then(dynamicEsModule => {
    dynamicEsModule.increase();
  })

      7)ES6模块化优缺点          

  • 优点(重要性):通过一种最统一的形态整合了js的模块化

  • 缺点(局限性):本质上还是运行时的依赖分析

六、解决模块化的新思路 - 前端工程化

     1)背景

               根本问题 - 前端的模块化处理方案依赖于运行时分析

     2)问题解决方案

                线下执行  grunt gulp webpack......

  <!doctype html>
    <script src="main.js"></script>
    <script>
      // 给构建工具一个标识位
      require.config(__FRAME_CONFIG__);
    </script>
    <script>
      require(['a', 'e'], () => {
        // 业务处理
      })
    </script>
  </html>
  define('a', () => {
    let b = require('b');
    let c = require('c');

    export.run = () {
      // run
    }
  })

     3)工程化实现(思路)

               1.扫描依赖关系表

  {//a b e的全局依赖
    a: ['b', 'c'],
    b: ['d'],
    e: []
  }

               2.重新生成依赖数据模板

  <!doctype html>
    <script src="main.js"></script>
    <script>
      // 构建工具生成数据
      require.config({
        "deps": {
          a: ['b', 'c'],
          b: ['d'],
          e: []
        }
      })
    </script>
    <script>
      require(['a', 'e'], () => {
        // 业务处理
      })
    </script>
  </html>

             3.执行工具,采用模块化方案解决模块化处理依赖

define('a', ['b', 'c'], () => {
    // 执行代码
    export.run = () => {}
  })

     4)工程化实现优点

  • 构建时生成配置,运行时执行
  • 最终转化成执行处理依赖
  • 可以拓展

七、最终的完全体

       webpack(核心的工程化)+ mvvm框架组件化 + 设计模式 



这篇关于JS模块化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程