前端基础(ES6 模块化)

这篇具有很好参考价值的文章主要介绍了前端基础(ES6 模块化)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:前面学习了js,引入方式使用的是<script s"XXX.js">,今天来学习引入文件的其他方式,使用ES6 模块化编程,学习组件化编程中的全局注册和局部注册的方法。

目录

复习

ES6 模块化导出导入

解构赋值

导入js文件

export default

全局注册

局部注册


复习

回顾前面学习内容,用<script s"XXX.js">引入js文件

在html文件中引入js文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="learn.js">

    </script>
    <script>
        console.log(this.content)
        learn()
    </script>

</body>

js文件

const content = "模块化";
const learner = "MRJJ_9";
function learn()
{
    console.log(`${learner}在学习${content}`);
}

前端基础(ES6 模块化),前端,es6,ecmascript

ES6 模块化导出导入

先导出js文件

export const content = "模块化";
export const learner = "MRJJ_9";
export function learn()
{
    console.log(`${learner}在学习${content}`);
}

简单写法,也可以写成下面这样的

解构赋值

import * as mrjj from './learn.js' 

重命名为mrjj

导入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
    import * as mrjj from './learn.js'
    import {content} from './learn.js'
    console.log(content);
    console.log(mrjj.learner);
    mrjj.learn()
</script>
</body>
</html>

前端基础(ES6 模块化),前端,es6,ecmascript

export default

导出一个完整的对象 export default

只能有一个export

export default{
    content : "模块化",
    learner : "MRJJ_9",
    learn()
    {
        console.log(`${this.learner}在学习${this.content}`);
    }
}

import mrjj_lr from './learnDefault.js'

需要取别名才能导入 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script type="module">
    import mrjj_lr from './learnDefault.js'
    mrjj_lr.learn()

</script>
</body>
</html>

前端基础(ES6 模块化),前端,es6,ecmascript

但在浏览器中不能使用

前端基础(ES6 模块化),前端,es6,ecmascript

全局注册

<body>
    <div id="aside"></div>
    <script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    import Asider from './Asider.js'
    import Counter from './Counter.js'
    const asideApp=createApp(Asider);
    // 全局注册
    const asideVM=asideApp.component('Counter',Counter).mount("#aside");
    </script>
</body>

局部注册

const asideVM=asideApp.mount("#aside");

先在需要导入其他组件的文件里导入组件

import Counter from './Counter.js';

在export default添加components

export default{

    components:{Counter}}文章来源地址https://www.toymoban.com/news/detail-665689.html

到了这里,关于前端基础(ES6 模块化)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6之Promise、Class类与模块化(Modules)

    Promise 是 ES6 引入的一种用于 处理异步操作 的对象。 它解决了传统回调函数(callback)模式中容易出现的 回调地狱 和代码可读性差的问题。 Promise 对象有三种状态: Pending (进行中): 初始化状态,表示异步操作还在进行中。 Fulfilled (已成功): 表示异步操作执行成功,并

    2024年02月10日
    浏览(46)
  • ES6模块化(默认导入导出、按需导入导出、直接导入)

    一、介绍ES6模块化     ES6 模块化规范是浏览器端与服务器端通用的模块化规范,ES6模块化的出现前端开发者不再需要额外的学习其他的模块化规范。  二、ES6 模块化规范中定义: 1.每个 js 文件都是一个独立的模块 2.导入其它模块成员使用 import 3.向外共享模块成员使

    2024年02月09日
    浏览(53)
  • 【前端模块化】JS模块化思想以及相关规范(CommonJS、ES module)

    1.模块化概念 随着前端应用日趋复杂,项目代码也大量膨胀,模块化就是一种最主流的代码组织方式, 一个模块就是一个实现特定功能的文件 ,它通过把我们的复杂代码按照功能的不同,划分为不同的模块单独维护的这种方式,去提高我们的开发效率,降低维护成本。要用

    2024年02月01日
    浏览(59)
  • 【ECMAScript】ES6-ES11学习笔记

    注意事项 代码中的注释有笔记如 有一些错误示范代码,为了代码整体可运行,将其注释如 当代码有输出是,通常将输出放在对应代码下一行,并注释如下 1.声明变量 2.定义常量 3.解构赋值 4.模板字符串 5.简化对象写法 6.箭头函数 箭头函数适合与this无关的回调,定时器,数

    2024年02月13日
    浏览(40)
  • 前端面试:【前端工程化】CommonJS 与 ES6 模块

    嗨,亲爱的前端开发者!在现代Web开发中,模块化是构建可维护和可扩展应用程序的关键。本文将深入探讨两种主要的JavaScript模块系统:CommonJS 和 ES6 模块,以帮助你了解它们的工作原理、用法以及如何选择合适的模块系统。 1. CommonJS: 用途: CommonJS 是一种模块系统,最初

    2024年02月11日
    浏览(52)
  • 第一章前端开发ES6基础

    认识ES6 概述 ES6表示ECMAScript规范的第六版,正式名称为 ECMAScript 2015 ,ECMAScript是由ECMA国际标准组织制定的一项 脚本语言 的标准规范化,引入了许多新特性和语法。 其中包括 箭头函数、let和const声明、类、模板字符串、解构赋值、参数默认值、展开操作符、Promise 等等。这些

    2024年02月08日
    浏览(50)
  • 第二章前端开发ES6基础

    目录 扩展运算符 概述 语法 应用 模板字符串 概述 应用 内置对象扩展 概述 数组扩展方法 字符串扩展方法 set数据结构 概述 基本使用 操作方法 遍历方法 认识symbol 概述 作用 基本使用 项目 扩展运算符 概述 扩展运算符(spread operator)是 ES6 中新增的一种运算符,用 三个点(

    2024年02月07日
    浏览(49)
  • 前端框架前置课Node.js学习(1) fs,path,模块化,CommonJS标准,ECMAScript标准,包

    目录 什么是Node.js 定义 作用: 什么是前端工程化 Node.js为何能执行Js fs模块-读写文件 模块 语法: 1.加载fs模块对象 2.写入文件内容 3.读取文件内容 Path模块-路径处理 为什么要使用path模块 语法 URL中的端口号 http模块-创建Web服务 需求 步骤: 案例:浏览时钟 步骤: 什么是模块化 定

    2024年01月16日
    浏览(109)
  • 前端架构师之01_ES6_基础

    简单来说,ECMAScript是JavaScript语言的国际标准,JavaScript是实现ECMAScript标准的脚本语言。 2011年,ECMA国际标准化组织在发布ECMAScript 5.1版本之后,就开始着手制定第6版规范。 存在的问题:这个版本引入的语法功能太多,而且制定过程当中,还有很多组织和个人不断提交新功能

    2024年02月07日
    浏览(43)
  • ES6(ECMAScript 2015)有哪些新属性,如何判断当前浏览器是否支持?

    ES6(ECMAScript 2015)引入了许多新的语法和特性,以增强 JavaScript 编程语言的功能。以下是一些常见的 ES6 语法和特性以及它们的解释: let 和 const 声明 : let 和 const 用于声明变量,代替了旧的 var 。 let 声明的变量具有块级作用域,而 const 声明的变量是不可变的(常量

    2024年02月07日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包