前端模块化汇总

模块化

含义

模块化：模块化就是将单个文件当成一个模块，在日常项目开发里面我们不会将所有逻辑写在一个文件里面，不管是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模块化的管理机制，下面就详细介绍四种主流的模块化机制以及代码演示。

commonjs规范

以nodejs为代表
导入
- const math = require('./math')
导出

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

        },
        plus: function(){

        }
    }

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

    }
    exports.plus = function(){

    }

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
    }

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
        }
    })

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')
    })

前端模块化汇总

模块化

含义

css的模块化

js的模块化

模块化规范的区别

Guess you like