13_前端工程化_ES6

1.前端工程化概念

前端工程化是使用软件工程的方法单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。

在这里插入图片描述

前后端分离(前端代码工程化独立出来形成一个单独的app)

1.开发分离

2.部署分离

3.服务器分离

本次技术栈

  • ECMAScript6 VUE3中大量使用ES6语法
  • Nodejs 前端项目运行环境
  • npm 依赖下载工具
  • vite 前端项目构建工具
  • VUE3 优秀的渐进式前端框架
  • router 通过路由实现页面切换
  • pinia 通过状态管理实现组件数据传递
  • axios ajax异步请求封装技术实现前后端数据交互
  • Element-plus 可以提供丰富的快速构建网页的组件仓库

2.ECMA6Script

  • 由于VUE3中大量使用了ES6的语法,所以ES6成为了学习VUE3的门槛之一

2.1es6的变量和模板字符串

  • ES6 新增了letconst,用来声明变量,使用的细节上也存在诸多差异

  • let 和var的差别

1、let 不能重复声明2、let有块级作用域,非函数的花括号遇见let会有块级作用域,也就是只能在花括号里面访问。3、let不会预解析进行变量提升4、let 定义的全局变量不会作为window的属性5、let在es6中推荐优先使用
  • let更像Java中声明变量的感觉,var可能更加随意了
        // 1.let生命变量不能重复声明let c =1;c = 100// let c = 99;// 2.let有作用域,只能在花括号访问{let i = 100}// console.log(i)      //ReferenceError: i is not defined// 3.let不会预解析进行变量提升console.log(m)var m=99// console.log(p)// let p=98// ReferenceError: Cannot access 'p' before initialization// at 01let和const.html:27:21// 4.let定义的变量不会作为全局变量 var可以console.log(window.a)// 5.const就是不可修改的let        有点像final修饰的变量一样,const修饰的量必须赋值// const b =1// b=2// 6.模板字符串对字符串进行处理 ``放入标签即可,避免了使用单双引号的难点        拼接和linux一样let city = "henan"let info = `    <ul><li></li><li></li><li>${city}</li><li></li><li></li></ul>`

2.2 es6的解构表达式

  • 解构表达式在数组上的使用在这里插入图片描述

  • 解构表达式进行 对象取值操作 并赋值给let变量

在这里插入图片描述

  • 解构表达式抓形参

    在这里插入图片描述

小结:
解构表达式目的是抓取对象,数组,形参列表的值
支持批量抓取//2. 使用特点 箭头函数this关键字// 在 JavaScript 中,this 关键字通常用来引用函数所在的对象,// 或者在函数本身作为构造函数时,来引用新对象的实例。// 但是在箭头函数中,this 的含义与常规函数定义中的含义不同,// 并且是由箭头函数定义时的上下文来决定的,而不是由函数调用时的上下文来决定的。// 箭头函数没有自己的this,this指向的是外层上下文环境的this

2.3 es6箭头函数

就是lambda表达式

  • 箭头函数声明
    let fun2 =()=>{}let fun3 = (x)=>{return x+1}
  • 2.箭头函数的各种省略
{--  小括号可省  参数仅1个--  花括号可省  代码仅一行--  return可省  代码仅一行且带return
}
  • 3.箭头函数的this

    在这里插入图片描述

  • 意义

普通函数的this表示调用者

箭头函数this表示外层的this

2.4 rest和spread

rest参数,形参上使用和java可变参数几乎一样

    <script>// 1 参数列表中多个普通参数  普通函数和箭头函数中都支持let fun1 = (a,b,c,d=100)=> console.log([a,b,c,d])fun1()// 2 ...作为参数列表,称之为rest参数 普通函数和箭头函数中都支持 ,因为箭头函数中无法使用arguments,rest是一种解决方案// let fun2 = (...args)=>{console.args}// fun2(1,2,3,4,5)// rest参数在一个参数列表中的最后一个只,这也就无形之中要求一个参数列表中只能有一个rest参数let arr  =[1,2,3]// let info = ...arr    这样写的是错的  ...arr  表示1,2,3let fun3 = (a,b,c)=>{console.log(a,b,c)}fun3(...arr)            //这样就可以将数组展开 放入方法形参供其使用// 3.spread可以快速合并数组let a =[1,2,3]      //总之一个道理...arr表示去括号的操作let b =[1,2,3]let c =[1,2,3]console.log(...a,...b,...c)//1 2 3 1 2 3 1 2 3//js的对象是{}包裹,spread同样适用</script>

Appendix

普通函数的this表示调用者

箭头函数this表示外层的this

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/22986.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

信号(上)

本节目标&#xff1a; 1. 掌握Linux信号的基本概念 2. 掌握信号产生的一般方式 3. 理解信号递达和阻塞的概念&#xff0c;原理。 4. 掌握信号捕捉的一般方式。 5. 重新了解可重入函数的概念。 6. 了解竞态条件的情景和处理方式 7. 了解SIGCHLD信号&#xff0c; 重新编写信号处理…

ChatGPT基本原理详细解说

ChatGPT基本原理详细解说 引言 在人工智能领域&#xff0c;自然语言处理&#xff08;NLP&#xff09;一直是研究的热点之一。随着技术的发展&#xff0c;我们见证了从简单的聊天机器人到复杂的语言模型的演变。其中&#xff0c;ChatGPT作为一项突破性技术&#xff0c;以其强大…

【Vue】自定义指令-v-loading指令的封装

场景 实际开发过程中&#xff0c;发送请求需要时间&#xff0c;在请求的数据未回来时&#xff0c;页面会处于空白状态 > 用户体验不好 需求 封装一个 v-loading 指令&#xff0c;实现加载中的效果 分析 本质 loading效果就是一个蒙层&#xff0c;盖在了盒子上 数据请求…

从零开始精通Onvif之设备发现

设备发现的意义 在复杂的网络环境中&#xff0c;如何快速而准确地识别网络上的Onvif设备&#xff0c;对于摄像头厂商、系统集成商、开发人员乃至最终用户来说&#xff0c;都显得至关重要。 首先&#xff0c;设备发现有效简化了集成的复杂度。在没有统一标准之前&#xff0c;每个…

2004NOIP普及组真题 2. 花生采摘

线上OJ&#xff1a; 【04NOIP普及组】花生采摘 核心思想&#xff1a; 1、本题为贪心即可。 2、因为本题严格限制了顺序&#xff0c;所以先把每个节点的花生数量按降序排序。然后逐一判断下一个花生是否需要去采摘即可 3、每一次采摘完&#xff0c;记录耗时 t 以及采集的花…

力扣第417题测试程序

题目描述&#xff1a; 有一个 m n 的矩形岛屿&#xff0c;与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界&#xff0c;而 “大西洋” 处于大陆的右边界和下边界。 这个岛被分割成一个由若干方形单元格组成的网格。给定一个 m x n 的整数矩阵 heights &#…

基于web的垃圾分类回收系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;公告管理&#xff0c;运输管理&#xff0c;基础数据管理 用户账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;运输管理&#xff0c;公告…

pyqt QlineEdit内部增加按钮方法

pyqt QlineEdit内部增加按钮方法 def addButton(self,lineEdit):btn QtWidgets.QPushButton("")icon1 QtGui.QIcon()icon1.addPixmap(QtGui.QPixmap(":/image/images/th.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)btn.setIcon(icon1)btn.setStyleShe…

全光谱led灯的危害有哪些?曝光低质量全光谱led灯产生的四大风险

眼睛是人类获取信息最重要的感官器官之一&#xff0c;而近视则会导致视力模糊&#xff0c;进而影响学习效果和生活品质。因此&#xff0c;如何保护眼睛&#xff0c;尤其是在学习和使用电子设备时&#xff0c;成为了一个迫切需要解决的问题。然而在护眼领域上&#xff0c;护眼台…

【DevOps】网络安全进阶之路:打造更安全、更可靠的网站

目录 一、网站面临的主要安全威胁 1、SQL注入攻击 2、跨站脚本攻击(XSS) 3、跨站请求伪造(CSRF) 4、文件上传漏洞 5、不安全的直接对象引用 6、安全配置错误 7、使用含有已知漏洞的组件 二、网站安全防护措施 1、输入验证与过滤 2、使用参数化查询 3、数据输出编码…

SCAU 数据结构 实验六 排序算法

![[Pasted image 20240 8638 直接插入排序 Description 用函数实现直接插入排序&#xff0c;并输出每趟排序的结果. 输入格式 第一行&#xff1a;键盘输入待排序关键的个数n 第二行&#xff1a;输入n个待排序关键字&#xff0c;用空格分隔数据 输出格式 每行输出一趟排序…

掌握Java设计模式的23种武器(全):深入解析与实战示例

目录 一、创建型模式 1. 单例模式 (Singleton Pattern) 2. 工厂模式 (Factory Pattern) 3. 抽象工厂模式 (Abstract Factory Pattern) 4. 建造者模式 (Builder Pattern) 5. 原型模式 (Prototype Pattern) 二、结构型模式 6. 适配器模式 (Adapter Pattern) 7. 桥接模式…

通信的本质是什么

通信的本质是信息的传递和交换。在通信过程中&#xff0c;信息从一个主体&#xff08;发送方&#xff09;传递到另一个主体&#xff08;接收方&#xff09;&#xff0c;目的是使接收方理解或使用发送方传递的信息。无论使用什么样的媒介或技术&#xff0c;通信的核心都是在不同…

十三、resultMap解析

分为两部分&#xff1a;解析和使用 解析 1.解析XML的时候单独解析所有的resultMap标签&#xff0c;封装成ResultMap对象存入configuration中 2.解析XML中的SQL语句&#xff0c;封装MappedStatement对象&#xff0c;这里会根据SQL的返回类型是resultMap还是resultType做处理。如…

C语言 | Leetcode C语言题解之第133题克隆图

题目&#xff1a; 题解&#xff1a; struct Node** visited; int* state; //数组存放结点状态 0&#xff1a;结点未创建 1&#xff1a;仅创建结点 2&#xff1a;结点已创建并已填入所有内容void bfs(struct Node* s) {if (visited[s->val] && state[s->val] 2…

【嵌入式系统实践】实验三EXTI按钮外部中断控制LED灯参考代码

此内容不属于实验内容&#xff0c;因自己手头有一STM32F103&#xff0c;故验证性的进行代码实验&#xff0c;按照老师课堂ppt进行了一下复现。 通过按钮控制LED灯的亮灭(状态取反)。 main.c代码&#xff1a; #include "STM32F10X.h" #include "stdio.h"…

Open3D Guided滤波(Python版本)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 Guided Filter原本主要用于2D图像的降噪等处理,但经过适当的修改后,它可以有效地应用于3D点云的降噪。这种方法能够保留点云中的细节信息,并且对边缘和曲面进行保护。 其具体计算过程如下所述: 1.局部线性假设:…

Python Lambda函数的应用实例教程

在Python编程中&#xff0c;lambda函数是一种简洁且强大的工具&#xff0c;用于创建小型匿名函数。它们在需要快速定义简单函数时特别有用。本文将详细介绍lambda函数的语法及其多种应用实例&#xff0c;帮助读者更好地理解和使用lambda函数。 一、lambda函数的基本概念 1.1 什…

c++(内存分配,构造,析构)

#include <iostream>using namespace std; class Per { private:string name;int age;double *height;double *weigh; public://无参构造Per(){cout << "Per::无参构造" << endl;}//有参构造Per(string name,int age,double height,double weigh):…

Nginx 的 stream 模块,配置转发redis和mysql

Nginx 的 stream 模块确实可以配置多个 upstream 块&#xff0c;用于定义多个后端服务器组。然而&#xff0c;需要注意的是&#xff0c;每个 upstream 块通常用于一种特定类型的服务&#xff0c;例如定义一组TCP服务器&#xff0c;可以是Redis服务器、MySQL服务器或其他任何TCP…