前端模块化汇总

模块化

含义

模块化： 模块化就是将单个文件当成一个模块，在日常项目开发里面我们不会将所有逻辑写在一个文件里面，不管是css还是js。原因是这样会导致单个文件过大，无法实现复用和维护，所以我们会将文件进行切割分离，这样分离独立出来的每一个文件都是一个模块。

css的模块化

• 在css里面，我们可以将单个公用的css文件进行分离，在需要的css文件里面导入。
• 原生css里面我们可以使用 @import(css文件路径); 进行导入。
• sass/less/stylus都有各自的导入文件方法，例如sass的@import css文件路径;
• 所以css文件的模块化相当于来讲比较简单，不需要导出，只需要导入使用css文件。

js的模块化

• 在js里面，原生的js不支持一个js文件导入另一个js文件，我们需要将用到的js文件按照顺序利用script标签导入到html里面使用。这样文件依次加载，必须保证严格的加载顺序，而且文件之前的依赖关系不能很好的展示，对于开发来说，不利于阅读和维护。
• 所以针对于这样的情况，很多大佬们提出了js模块化的管理机制，下面就详细介绍四种主流的模块化机制以及代码演示。
  1. commonjs规范
     • 以nodejs为代表
     • 导入
       • const math = require('./math')
     • 导出

         // 多个导出
         module.exports = {
             add: function(){
     
             },
             plus: function(){
     
             }
         }
     

         // 单个导出
         exports.add = function(){
     
         }
         exports.plus = function(){
     
         }
     

  2. esm规范
     • es6提出的模块化方案
     • 导入
       • 按需导入 import {add, plus} from './math.js'
       • 默认导入 import math from './math.js'
     • 导出

         // 按需导出
         const add = (a,b) => a+b
         const plus = (a,b) => a-b
         export {add, plus}
     

         // 默认导出
         export default {
             add: (a,b)=> a+b,
             plus: (a,b) => a-b
         }
     

  3. AMD规范
     • 以requirejs为代表
     • 导入

         require(['./math'], (math)=>{
             console.log(math.add(1,2))
             console.log(math.plus(1,2))
         })
     

     • 导出

         define(()=>{
             const add = (a,b) => a+b
             const plus = (a,b) => a-b
             return {
                 add,
                 plus
             }
         })
     

  4. CMD规范
     • 以seajs为代表
     • 导入

         define((requires)=>{
             // 导入
             const math = requires('./math')
             console.log(math.add(2,3))
             console.log(math.plus(2,3))
         })
     

     • 导出

         define((requires, exports, modules)=>{
             // 导出
             const add = (a,b) => a+b
             const plus = (a,b) => a-b
             exports.add = add
             exports.plus = plus
         })
     

     • 我们会发现js模块化不管哪一种语法，都包含导入和导出，所以模块化管理就是一种话导入和导出。

模块化规范的区别

• esm规范是es6推出的模块化方案，目前这种方案逐渐被各大主流浏览器最新版本支持，是未来js在浏览器(客户端)的选择方向。
• commonjs目前主要引用范围是基于node,目前主要适用于js服务端的模块化管理。
• AMD规范和CMD规范都是在es6模块化出现之前让浏览器（客户端）支持模块化的方案，两种的区别主要体现在加载依赖的时机不一样。
  • AMD推崇的是依赖前置，就是用到哪些依赖就提前导入

      // requirejs
      defined(['./math'], function(math){
          // 当前模块用到了math模块，要在定义模块的时候导入math
      })
  

  • CMD推崇的是依赖就近，就是什么时候用到什么时候导入

      // sea.js
      defined(function(require){
          // 当前模块用到了math模块，在需要的用的时候就近导入
          const math = require('./math')
      })
  

• 项目的源代码地址
  • 码云gitee