模块化(代码片段)

关键词：

目录

export：导出

import：导入

修改模块名、模块的整体加载

export default：默认导出

import () ：动态加载模块

export（导出）

存在动态绑定数据

在一个文件中可以使用多个 export  来导出多个模块

下面以 module.js 文件为例，导出了 arr、str、fun1 模块

export const  arr = [1, 2, 3, 4, 5];   // 导出常量 arr

export let str = ‘字符‘‘;        // 导出变量 srt

export function fun1 ()
    console.log(‘这是导入的函数fun1‘)
    // 导出函数 fun1

当然还有更直观的写法

const  arr = [1, 2, 3, 4, 5];  

let str = ‘字符‘‘;        

function fun1 ()
    console.log(‘这是导入函数fun1‘)
    

// 将要导出的模块统一写在一个 export 关键字中是很合适的
export 
    arr,
    str,
    fun1

存在动态绑定数据的关系，a 变量的改变，可以传递到调用者哪里去

export let a = ‘a‘;

setTimeout(()=>a = ‘aa‘,1000);

 export 导出的变量都是只读的，因为它的本质是输入接口，也就是说，不允许在加载模块的脚本里面，改写接口

import（导入）

上面使用了 export 导出了模块，接下来使用 import 导入模块

 import  arr, str, fun1  from "./module.js";

 console.log(arr , str);
    
 fun1();

上面的代码加载了module.js 文件，并提取了module.js 文件中的 arr、str、fun1 模块，

module.js 提取模块的名字需要写在 中，想要提取什么模块就写什么模块，但是名字必须和 module.js 文件导出时的名字一样

import也和函数、变量一样存在预编译，即可以先使用，后导入

import ‘./module.js‘;  如果这么用，相当于加载了一次modules.js 文件，但是并不会导入在modules.js中定义好的模块或变量

如果是在 html 中的 script 标签中导出模块，那么必须为script 标签添加 script = ‘ module ‘

import 不能写在被其他语句包裹

// 这样是不可以的
if (x === 1) 
  import  arr  from ‘./module.js‘;
 else 
  import  arr  from ‘./module2.js‘;

修改模块名、模块的整体加载

使用关键字 as 修改模块名，导出和导入模块命都可以修改

// A.js文件
const arr = [1, 2, 3, 4, 5];  
const str = ‘str‘; 
export  arr as numbers, str ;


// B.js文件
import numbers, str as string from "./module.js";
console.log(numbers, string);

有时候就是想所有模块都导入，不想把模块都写一遍在 中，那么可以 整体加载

// A.js文件
const arr = [1, 2, 3, 4, 5];  
const str = ‘str‘;
export arr, str;

// B.js文件
// 使用 * 号导入所有模块，然后用 as 重命名，注意这里没有  了
import * as modules from "./components/2.1as";
console.log(modules.arr, modules.str);

export default（默认导出）

export default 和 export 一样都是导出模块，

同样可以导出 函数、数组、对象、字符串、数值等

但是一个文件中， export 可以有多个，而 export default 只能有一个

export 导出的模块，导入时要加 ，而export default 导出模块，导入时不需要 ，但是允许并要求为它重新命名，下例子中取名为 newStr

// A.js文件
let  str = ‘str‘;
export default str;

// B.js文件
import newStr from ‘./module1‘;

export 和 export default 可以同时存在一个文件中（但并不建议这么做），导入的时候用  ‘ , ‘ 分开。下例子中，一定是 fun 写在 arr 的前面，而不能 将 arr 写在 fun  的前面

// fun 是用 export default 导出的，arr 是用 export，导出的
import fun, arr from ‘./module.js‘;

本质上，export default 导出的是一个 default 的变量/方法，并且 default 后面紧跟的 变量 / 方法 / 值，将会赋值给 default 

// 所以下面的写法都是 正确的

export default function a ()
    return 1
   

export default () => 
    return 1
 

export default 4

let str1 = ‘字符‘;  
let str2 = ‘字符‘; 
export default str1, str2

// 而下面的写法是 错误的

export default var a = ‘a‘;

import () （动态引入）

前面说到 import 不能被其他语句包裹，不能动态引入模块，因为它是在编译时执行的，不向 require 在运行时才加载，因此可以动态引入

但是 import 函数可以实现动态引入模块的目的

import 函数返回的是一个 promise 对象

条件加载

if (condition) 
  import(‘moduleA‘).then(...);
 else 
  import(‘moduleB‘).then(...);

按需加载

button.addEventListener(‘click‘, event => 
  import(‘./dialogBox.js‘)
  .then(dialogBox => 
    dialogBox.open();
  )
  .catch(error => 
    /* Error handling */
  )
)

动态路径

import(f())
.then(...);

注意

如果使用 export 导出模块，那么 import 函数导入模块后，返回的 promise 对象的值是一个 Module 对象，而这些模块都是 Module 对象中的属性，

// A.js文件
export const  arr = [1, 2, 3, 4, 5];
export let str = ‘字符‘;   

// B.js文件
import(‘./A.js‘)
.then((mod) => 
    console.log(mod);
)

控制台打印如下

所以最好的使用这些模块的方式，是用对象解构语法

import(‘./components/1.js‘)
.then(( arr, str )=> 
    console.log(arr, str)
)

如果使用 export default 导出，那么使用 import 函数导入后，返回的 promise 对象的值也是一个 Module 对象，与前者的区别在于模块被赋值到 Module 对象的 default 属性上

下面图片中，导出的是 fun1 函数 

由于 default 是关键字，所以这里就不能直接使用解构了，不过用下面的写法

// 最简单的调用属性
import(‘./A.js‘)
.then((mod) => 
  mod.default();
);

// 重命名
import(‘./A.js‘)
.then(( default: fun1 )=> 
    fun1()
)

动态引入模块错误

报错信息有

Module build failed（模块生成失败）

Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the ‘plugins‘ section of your Babel config to enable parsing.（将@babel/plugin syntax dynamic import（https://git.io/vb4sv）添加到babel配置的“plugins”部分以启用解析。）

解决方法

首先安装　　@babel/plugin-syntax-dynamic-import

然后配置　　"plugins": ["@babel/plugin-syntax-dynamic-import"]

html模块化图像替换(代码片段)

查看详情

html模块化的javascript(代码片段)

查看详情

前端模块化(代码片段)

CommonJS含义：JavaScript模块化规范核心思想：通过require方法来同步加载依赖的模块，通过module.exports导出需要暴露的接口//导入constmoduleA=require(‘./moduleA‘);//导出module.exports=moduleA.someFunc;代码无法直接运行在浏览器环境下，必须通... 查看详情

13.模块(代码片段)

...模块）--》文件夹版（包）代码会变得更加简洁，清晰，模块化一个模块里会有多个函数，相当于一个大功能细分成多个小功能自定义模块第三方模块，如requests内置模块，如time包（文件 查看详情

javascript模块化（导入和导出文件）(代码片段)

查看详情

常?用模块-01(代码片段)

...的简单认识什么是模块.模块就是我们把装有特定功能的代码进行归类的结果.从代码编写的单位来看我们的程序,从小到大的顺序:一条代码<语句句块<代码块(函数,类)<模块.我们目前写的所有的py文件都是模块.　　引入模块... 查看详情

模块化(代码片段)

目录export：导出import：导入修改模块名、模块的整体加载exportdefault：默认导出import()：动态加载模块 export（导出）存在动态绑定数据在一个文件中可以使用多个export 来导出多个模块下面以module.js文件为例，导出了arr、str... 查看详情

模块化开发(代码片段)

目录非模块开发常用的模块化开发CommonJSAMDCMDUMDESmodule非模块开发index.html引入1.js文件和2.js文件1.jsconstmoduleA=(function()//这里定义变量和函数returnobj=//后续还要使用的变量和函数)() 2.js    可以使用1.js的变量和函数常用的模... 查看详情

常用模块-01(代码片段)

...; 一.模块的简单认识模块:就是我们把装有特定功能的代码进行归类的结果.引入模块的方式1.import模块2.fromxxximport模块 二.collections模块collections模块主要封装了一些关于集合类的相关操作.例如:I 查看详情

javascript模块和揭示模块模式(代码片段)

查看详情

模块化笔记(代码片段)

1.什么是模块化?解决一个复杂问题时,把系统划分为若干模块的过程,模块是可组合,分解和更换的单元;遵守固定的规则,把一个大文件拆分成独立并且相互依赖的多个小模块;2为什么要用模块化?可以使代码低耦合,每个模块都是独立... 查看详情

五模块化(代码片段)

一、模块化1.1、什么是模块化模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元。1.2、编程领域中的模块化编程领域中的模块化，就... 查看详情

模块与包(代码片段)

...模块）--》文件夹版（包）代码会变得更加简洁，清晰，模块化一个模块里会有多个函数，相当于一个大功能细分成多个小功能自定义模块第三方模块，如requests内置模块，如time包（文件夹）import与fro 查看详情

常用模块(代码片段)

一.模块的认识模块就是我们把装有特定功能的代码进行归类的结果.目前写的所有py文件都是模块引入模块方式:　　　　import模块　　　　fromcollectionsimport模块二.collections模块collections模块主要封装了一些关于和类的相关操作1.Cou... 查看详情

常用模块(代码片段)

阅读目录一time与datetime模块二random模块三os模块四sys模块五shutil模块六json&pickle模块七shelve模块八xml模块九configparser模块十hashlib模块十一suprocess模块十二logging模块十三re模块一、time与datetime模块在Python中，通常有这几种方式来... 查看详情

常用模块(代码片段)

 阅读目录一time与datetime模块二random模块三os模块四sys模块五shutil模块六json&pickle模块七shelve模块八xml模块九configparser模块十hashlib模块十一suprocess模块十二logging模块十三re模块一time与datetime模块在Python中，通常有这几种方式... 查看详情

javascript书签中的模块化网格(代码片段)

查看详情

ruby模块代码示例(代码片段)

查看详情