前端模块化:ES6,CommonJS

发布时间:2022-07-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了前端模块化:ES6,CommonJS脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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


前端模块化:ES6,CommonJS

  • 前言@H_126_17@
  • 一、CommonJS语法
    • 1.COMmonJS导出F1a;
    • 2.CommonJS导出
  • 二、ES6语法
    • 1.ES6导出
    • 2.ES6导入
  • 总结


前言

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


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

一、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 导入。

脚本宝典总结

以上是脚本宝典为你收集整理的前端模块化:ES6,CommonJS全部内容,希望文章能够帮你解决前端模块化:ES6,CommonJS所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。