如何理解JavaScript模块化

目录
  • 1. 浏览器支持
  • 2. export 导出模块
  • 3. import 导入模块
  • 4. 创建模块对象
  • 5. export import 中转站
  • 6. 动态加载模块

1. 浏览器支持

使用JavaScript 模块依赖于 import 和 export，import 和 export 的浏览器支持程度是最新的浏览器版本都是支持的，但 IE 和旧版本的浏览器不支持，因此若想兼容 IE 和旧版本的浏览器基本就不能使用了。

export 和 import 是成对出现，配合工作的

JS模块化是各种JS框架学习的前提基础

import 和 export 语句用于将一个模块里实现某些功能的变量或函数导入/导出，也可导入/导出类

2. export 导出模块

默认导出

一个模块只能有一个默认导出，默认导出的变量只能有一个，且不能有大括号{}

语法为export default 变量名

model.js

function Test1(){
    console.log("这是默认导出")
}
function Test2(){
    console.log('这是命名导出')
}
export default Test1

批量导出

语法为export {变量名,变量名……}

function Test1(){
    console.log("这是默认导出")
}
function Test2(){
    console.log('这是命名导出')
}
export {Test1, Test2}

3. import 导入模块

默认导入

main.js

import Test1 from "./model.js"
Test1()

默认导入的重命名

main.js

import x from "./model.js"//x就是默认导出的Test1
x()

批量导入

main.js

import {Test1, Test2} from "./model.js"
Test1();
Test2();

批量导入的重命名

as关键字跟一个新名字实现重命名

main.js

import {Test1 as x1, Test2 as x2} from "./model.js"
x1();
x2();

也可在导出时用as关键字重命名

model.js

function Test1(){
    console.log("这是默认导出")
}
function Test2(){
    console.log('这是命名导出')
}
export {Test1 as x1, Test2 as x2}

应用模块

html

<script src="main.js"></script>

4. 创建模块对象

使用对象，在as关键字重命名的基础上进一步简单化

import * as Model from "./model.js"
Model.x1();
Model.x2();

5. export import 中转站

有时候可以将多个子模块组合到一个父模块中，再由父模块决定导出哪个，这个父模块文件就像是个组合各个模块的中转站

语法为export {变量名} from 模块路径

当前目录结构结构

src

    index.html

    main.js

    redirection.js

    models

        model.js

        model2.js

model.js

function Test1(){
    console.log("这是子模块1")
}
export {Test1}

model2.js

function Test2(){
    console.log('这是子模块2')
}
export {Test2}

redirection.js

export {Test1} from "./models/model.js"
export {Test2} from "./models/model2.js"

main.js

import * as Model from "./redirection.js"
Model.Test1()
Model.Test2()

html

<script src="./main.js"></script>

6. 动态加载模块

动态加载模块用于在导入模块时不必预先加载所有模块，可以在需要时使用 import() 作为函数调用，将其参数传递给模块的路径，它返回一个 promise，使用 Promise 对象对模块加载结果操作。

语法为import(动态加载的模块路径)

dynamic.js

function TestDy(){
    console.log("这是动态模块")
}
export default TestDy

main.js

document.querySelector('.load').onclick = function(){
    import('./dynamic.js').then((Model)=>{
        Model.default()
    })
}

以上就是如何理解JavaScript模块化的详细内容，更多关于JavaScript模块化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解NodeJS模块化

    详解NodeJS模块化

    目录 一.前言 二.正文 2.1.什么是模块 2.2.Resolving 2.3.require.resolve 2.4.模块间的父子依赖关系 2.5.exports, module.exports 2.6.模块循环依赖 2.7..json和.node 2.8.Wrapping 2.9.Cache 三.总结 一.前言 我们知道,Node.js是基于CommonJS规范进行模块化管理的,模块化是面对复杂的业务场景不可或缺的工具,或许你经常使用它,但却从没有系统的了解过,所以今天我们来聊一聊Node

  • 详解Js模块化的作用原理和方案

    详解Js模块化的作用原理和方案

    一.模块化概念 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起:块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信. 二.模块化作用 为什么要用模块化的JavaScript? 因为在实际的开发过程中,经常会遇到变量.函数.对象等名字的冲突,这样就容易造成冲突,还会造成全局变量被污染: 同时,程序复杂时需要写很多代码,而且还要引入很多类库,这样稍微不注意就容易造成文件依赖混乱: 为了解决上面的的问题,我们才开始使用模块化的js,所以说模块

  • JavaScript 模块化详解

    JavaScript 模块化详解

    目录 前言: 1.概念 2.模块化的好处 3.引入多个script标签后出现的问题 一.CommonJS 二.AMD 三.CMD 四.ES6模块化 前言: 1.概念 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起: 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信. 2.模块化的好处 避免命名冲突(减少命名空间污染): 更好的分离, 按需加载: 更高复用性: 更高可维护性. 3.引入多个script标签后出现的问题 请求过多(依赖的模

  • javascript中导出与导入实现模块化管理教程

    在理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块.但是,在ES6以前,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.如果要想在前端做模块化开发,必须依赖第三方框架来实现,如:requireJS与seaJS. javascript中的导出和导入实现模块化管理 requireJS是AMD规范的起源,seaJS是CMD规范的起源,由于两者功能高度重合,后来seaJS不再维护,从此淡出人们的视野,于

  • 浅谈JS前端模块化的几种规范

    前言 有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端.客户端提供一个纯粹的js执行引擎,不需要 WebView 容器.iOS 端有成熟的JavaScriptCore.Android 可以使用 V8 引擎.这样一个引擎配套有一个 SDK,访问 Native 的基础能力和数据运算能力,可以看成是一个阉割版的 Hybrid SDK 额外增加了一些数据处理能力. 问题结束了吗?处理逻辑的时候还需要用到2个库:cheer

  • Node.js中的模块化，npm包管理器详解

    Node.js中的模块化，npm包管理器详解

    目录 模块化的基本概念 什么是模块化 模块化拆分的好处 Node.js中的模块化 Node.js中模块的分类 加载模块 模块作用域 向外共享模块作用域中的成员 module对象 exports对象 npm与包 包 如何下载包 在项目中安装包的命令 解决下包速度慢的问题 为什么下包速度慢 解决方法一--淘宝NPM镜像服务器 解决方法二--切换npm的下包镜像源 解决方法三--nrm 总结 模块化的基本概念 什么是模块化 模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程.对于整个

  • 如何理解JavaScript模块化

    目录 1. 浏览器支持 2. export 导出模块 3. import 导入模块 4. 创建模块对象 5. export import 中转站 6. 动态加载模块 1. 浏览器支持 使用JavaScript 模块依赖于 import 和 export,import 和 export 的浏览器支持程度是最新的浏览器版本都是支持的,但 IE 和旧版本的浏览器不支持,因此若想兼容 IE 和旧版本的浏览器基本就不能使用了. export 和 import 是成对出现,配合工作的 JS模块化是各种JS框

  • 理解javascript模块化

    模块化是一个通用的编程最佳实践.程序的模块化使我们可以更方便地使用别人的代码,想要什么功能,就加载什么模块,从而提高代码的利用效率,增加开发速度. 模块就像积木,有了它,我们可以搭出各种各种功能样式的程序.积木有什么特点?小而简单.同样的,我们程序中的模块也要做到这一点,确保自己创建的函数一次只完成一个工作,这样其他开发者可以简单地调试与修改你的代码,而不需浏览所有代码才能弄清每一个代码块执行了什么功能.只有做到像这样地小而简单,才能实现其通用功能. 一.javascript模块化的方法 1.函

  • Javascript模块化编程详解

    模块化编程是一种非常常见Javascript编程模式.它一般来说可以使得代码更易于理解,但是有许多优秀的实践还没有广为人知. 基础 我们首先简单地概述一下,自从三年前Eric Miraglia(YUI的开发者)第一次发表博客描述模块化模式以来的一些模块化模式.如果你已经对于这些模块化模式非常熟悉了,大可以直接跳过本节,从"进阶模式"开始阅读. 匿名闭包 这是一种让一切变为可能的基本结构,同时它也是Javascript最棒的特性.我们将简单地创建一个匿名函数并立即执行它.所有的代码将跑在

  • 深入理解JavaScript系列(3) 全面解析Module模式

    简介 Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式. 首先我们来看看Module模式的基本特征: 模块化,可重用 封装了变量和function,和全局的namaspace不接触,松耦合 只暴露可用public的方法,其它私有方法全部隐藏 关于Module模式,最早是由YUI的成员Eric Miraglia在4年前提出了这个概念,我们将从一个简单的例子来解释一下基本的用法(如果你已经非常熟悉了,请忽略这一节

  • 论JavaScript模块化编程

    论JavaScript模块化编程

    JavaScript模块化编程的重要性 JavaScript的原型是java,它也是一种面向对象编程语言,属于一种弱类型语言,它具有更大的灵活性.以往在编写javascript代码时,都是直接编写一个个.js文件,然后用script标签在html页面中引用,这样就会带来几方面的问题: 1.出现大量的全局变量 js在每个地方都可以定义一个全局变量,编写不符合规范将导致大量全局变量的出现,最终程序将难以维护. 2.js加载顺序要按照代码的依赖顺序 最简单的,例如a.js依赖于b.js文件,那么在ht

  • AJAX入门之深入理解JavaScript中的函数

    概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-}var func2=function(-){-};var func3=function func4(-){-};var func5=new Function()

  • 深入理解JavaScript中的对象复制(Object Clone)

    JavaScript中并没有直接提供对象复制(Object Clone)的方法.因此下面的代码中改变对象b的时候,也就改变了对象a. a = {k1:1, k2:2, k3:3}; b = a; b.k2 = 4; 如果只想改变b而保持a不变,就需要对对象a进行复制. 用jQuery进行对象复制 在可以使用jQuery的情况下,jQuery自带的extend方法可以用来实现对象的复制. a = {k1:1, k2:2, k3:3}; b = {}; $.extend(b,a); 自定义clone

  • 深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点

    具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以帮助你写出更好的,更易于理解和维护的代码,这些代码在几个月或是几年之后再回过头看看也是会觉得很自豪的. 书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且

  • JavaScript模块化开发之SeaJS

    前言   SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护. SeaJS本身遵循KISS(Keep it Simple,Stupid)理念进行开发,后续的几个版本更新也都是吵着这个方向迈进. 如何使用SeaJS 下载及安装在这里不赘述了,不了解的请查询官网. 基

  • Javascript模块化编程(一)AMD规范(规范使用模块)

    Javascript模块化编程(一)AMD规范(规范使用模块)

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块.  (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了. 目前,通行的Javascript模块规范共有两种:CommonJS和AMD.我主要介绍AMD,

随机推荐