前端模块化:ES6,CommonJS

年少无知，瞎玩王者。技能太少，知识太老。学校不收，企业不要。三千实习，狗都不干。腹中悲鸣，前端汪汪。

---

---

前言

模块化是一种处理复杂系统分解为更好的可管理模块的方式。人力有限，一个大问题搞不来，拆成若干小问题还搞不来？更何况拆开还能分工合作。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CommonJS语法

注意node.js使用的是CommonJS。

1.CommonJS导出：

//CommonJS导出：
         module.exports = {
           flag:true,
            test(a,b){
                 return a + b;
              },
             demo(a,b){
                  return a * b; 
              }
          }

2.CommonJS导出

//对象解构赋值:
       let { test,demo,flag} =require('moduleA');
//等同于:
       let _mA = require('moduleA');
       let test = _mA.test;
       let demo = _mA.demo;
       let flag = _mA.flag;

---

二、ES6语法

1.ES6导出

vue中多使用ES6：

//ES6导出：
        exports = {
            flag:true,
            test(a,b){
                return a + b;
            },
            demo(a,b){
                return a * b; 
            }
        }

2.ES6导入

//ES6导入:
      //对象解构赋值
         import {test,demo,flag} from './moduleA'; 

      //另类全导出作为对象aaa
         import * as aaa from './moduleA'; 
         //使用：console.log(aaa.flag);

---

总结

CommonJS用 module.exports{} 导出，用 require 导入；
ES6用 exports{} 导出，用 import 导入。