es6模块化基础知识点

淡淡的烟草味﹌ 2023-06-28 08:56 24阅读 0赞

1、为何需要模块化：

因为随着前端的代码复杂度越来越高，代码之间会容易有这三个问题（全局变量冲突、函数命名冲突、依赖关系混乱）

2、模块化规范的进阶历史

commonJS 、 AMD 、 CMD 到现在的 es6模块

3、最初最简单的模块化源码（jquery大量使用的也是这种方式）

var module\_special = ( function()  \{

Var a =  function() \{\};

Var b = function() \{\};

return \{ a , b\}

\})();

解决了内部可以访问外部变量，但是外部不能访问内部变量的问题

4、es6的具体实现

（1）export  规定模块对外接口

export \{a , b\}                    对外接口是对象，包含各种变量

export function fun() \{\}     对外接口是函数/类

（2）import  输入其它模块提供的功能

import \{ a, b\} from “./file”        指定对象的变量

import  \* as file from “./file”     用file重命名代指所有的对象

（3）export default

优点：优化export对外接口的缺陷，使用import引入可以任意起名

5、commonjs和es6模块的差异

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>commonjs</p> </td> 
   <td> <p>Es6</p> </td> 
  </tr> 
  <tr> 
   <td> <p>输出</p> </td> 
   <td> <p>值的拷贝，是对象</p> </td> 
   <td> <p>值的引用（动态引用，无缓存）</p> </td> 
  </tr> 
  <tr> 
   <td> <p>生成时期</p> </td> 
   <td> <p>脚本运行完才生成</p> </td> 
   <td> <p>代码静态解析时生成</p> </td> 
  </tr> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>运行时加载</p> </td> 
   <td> <p>编译时输出接口</p> </td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关【JavaScript模块化】6-ES6模块化教程

ES6-Babel-Browserify使用教程 1. 定义package.json文件 { "name" : "es6-bab

蔚落/ 2024年04月03日 12:48/ 0 赞/ 106 阅读

相关 es6模块化基础知识点

1、为何需要模块化：因为随着前端的代码复杂度越来越高，代码之间会容易有这三个问题（全局变量冲突、函数命名冲突、依赖关系混乱） 2、模块化规范的进阶历史

淡淡的烟草味﹌/ 2023年06月28日 08:56/ 0 赞/ 25 阅读

相关 Es6 模块化

默认导出与导入 // 创建了一个js文件，文件名module let a = 10; let b = 20; let c = 30;

超、凢脫俗/ 2022年12月06日 12:55/ 0 赞/ 236 阅读

相关详解ES6模块化

[参考博文][Link 1] 第一步：初始化项目，使得能被npm管理 npm init -y 第二步：配置.babelrc Babel提供babel-c

ゝ一纸荒年。/ 2022年11月13日 15:27/ 0 赞/ 267 阅读

相关 ES6基础语法与模块化编程

> 项目已开源至gitee：[https://gitee.com/guo-qianliang/es6-vue-node.js][https_gitee.com_guo-qian

男娘i/ 2022年10月29日 09:16/ 0 赞/ 178 阅读

相关 JS模块化6_ES6模块化教程

ES6-Babel-Browserify模块化教程 0. ES6模块化语法暴露模块： - 分别暴露：export 暴露内容 - 统一暴

偏执的太偏执、/ 2022年09月12日 15:56/ 0 赞/ 268 阅读

相关 ES6模块化

文章目录一、模块化说明二、引入模块数据语法三、Babel的使用一、模块化说明模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小

r囧r小猫/ 2022年09月07日 14:59/ 0 赞/ 277 阅读

相关 es6模块化开发

如果不是默认导出则要用\{\}导入 5.文件导入导出在一个util.js文件里写入 export let sum=(x,y)=>{ retur

青旅半醒/ 2022年05月09日 06:36/ 0 赞/ 329 阅读

相关 es6模块化开发

如果不是默认导出则要用\{\}导入 1.文件导入导出在一个util.js文件里写入 export let sum=(x,y)=>\{ return x+y;

一时失言乱红尘/ 2022年04月17日 02:53/ 0 赞/ 315 阅读

相关 ES6 模块化

1/ 定义模块方法一：(对应的引入方法二) export const a = 1; export const b = 2; export l

男娘i/ 2022年04月13日 06:13/ 0 赞/ 355 阅读