Vue3期末复习
1.什么是块元素、什么是行内元素?行内元素和块元素的区别有哪些?如何使用?
1.盒子模型(Box Model)
盒子模型是CSS中的一个核心概念,所有HTML元素都可以视为一个盒子。这个盒子由以下几个部分组成:
1. **内容(Content)**:元素的内容,如文本、图像等。
2. **内边距(Padding)**:内容与边框之间的空间。
3. **边框(Border)**:围绕内边距和内容的边框。
4. **外边距(Margin)**:元素与其他元素之间的空间。
2.盒子模型的属性
- **宽度(width)和高度(height)**:定义内容区域的宽度和高度。
- **内边距(padding)**:定义内容与边框之间的空间,可以单独设置上下左右(如 `padding-top`, `padding-right`, `padding-bottom`, `padding-left`),也可以简写(如 `padding: 10px 20px 10px 20px`)。
- **边框(border)**:定义元素的边框,可以设置宽度、样式和颜色(如 `border: 1px solid black`)。
- **外边距(margin)**:定义元素与其他元素之间的空间,可以单独设置上下左右(如 `margin-top`, `margin-right`, `margin-bottom`, `margin-left`),也可以简写(如 `margin: 10px 20px 10px 20px`)。
3.块级元素(Block-level Elements)
**典型代表**:`div`, `form`, `table`, `p`, `h1`-`h6`, `ul`, `ol`, `li` 等。
**主要特征**:
1. **能够识别宽高**:可以设置 `width` 和 `height` 属性。
2. **内外边距有效**:所有方向的 `margin` 和 `padding` 都有效。
3. **自动换行**:多个块级元素默认从上到下排列,每个块级元素都会自动换行。
4. **默认宽度**:默认宽度为父容器的100%。
**示例**:
<div style="width: 200px; height: 100px; margin: 10px; padding: 10px; border: 1px solid black;">这是一个块级元素(div)。
</div>
4.行内元素(Inline Elements)
**典型代表**:`span`, `a`, `img`, `input`, `label`, `select`, `textarea` 等。
**主要特征**:
1. **宽度和高度无效**:设置 `width` 和 `height` 属性无效。
2. **内外边距部分有效**:
- `margin` 仅左右方向有效,上下方向无效。
- `padding` 上下左右都有效,但不会影响行高。
3. **不自动换行**:多个行内元素默认从左到右排列,不会自动换行。
4. **默认宽度**:宽度由内容决定。
**示例**:
<span style="width: 100px; height: 50px; margin: 10px; padding: 10px; border: 1px solid black;">这是一个行内元素(span)。
</span>
**注意**:虽然 `img` 和 `input` 是行内元素,但它们可以设置宽度和高度。
4.行内块元素(Inline-block Elements)
**定义**:当元素的 `display` 属性设置为 `inline-block` 时,称为行内块元素。
**主要特征**:
1. **能够识别宽高**:可以设置 `width` 和 `height` 属性。
2. **不自动换行**:默认排列方式为从左到右。
3. **内外边距有效**:所有方向的 `margin` 和 `padding` 都有效。
**示例**:
<span style="display: inline-block; width: 100px; height: 50px; margin: 10px; padding: 10px; border: 1px solid black;">这是一个行内块元素(span)。
</span>
5.转换元素的显示类型
- **将块级元素转换为行内元素**:
.block-element {display: inline;
}
- **将行内元素转换为块级元素**:
.inline-element {display: block;
}
- **将元素转换为行内块元素**:
.element {display: inline-block;
}
6.一个总结图
2.前端开发常用的计量单位都有哪些? 哪些是服务于响应式布局,例如px在响应式布局里边尽量不要用?
1. **前端开发常用的计量单位**
#### a. **像素(px)**
- **定义**:绝对单位,代表屏幕上的一个物理点。
- **特点**:在不同设备上,1px的实际大小可能有所不同,但在同一设备上保持一致。
- **应用**:用于设置元素的固定大小,如边框、内边距、外边距、图标大小等。
#### b. **百分比(%)**
- **定义**:相对于父元素的百分比。
- **特点**:相对单位,根据父元素的尺寸动态变化。
- **应用**:用于设置元素的宽度、高度、内外边距等,实现灵活的布局。
#### c. **em**
- **定义**:相对于当前元素的字体大小(font-size)。
- **特点**:相对单位,根据当前元素的字体大小变化。
- **应用**:用于设置字体大小、内外边距、宽度、高度等。
#### d. **rem**
- **定义**:相对于根元素(`<html>`)的字体大小(font-size)。
- **特点**:所有使用rem单位的元素都相对于根元素的字体大小,便于统一管理。
- **应用**:用于设置字体大小、内外边距、宽度、高度等。
#### e. **vw 和 vh**
- **vw**:相对于视口宽度的1%。
- **vh**:相对于视口高度的1%。
- **特点**:相对单位,根据视口的大小动态变化。
- **应用**:用于设置元素的宽度、高度、字体大小等,实现响应式设计。
#### f. **vmin 和 vmax**
- **vmin**:相对于视口较小尺寸的1%(即宽度或高度的较小值)。
- **vmax**:相对于视口较大尺寸的1%(即宽度或高度的较大值)。
- **特点**:相对单位,根据视口的宽高比动态变化。
- **应用**:用于设置元素的宽度、高度、字体大小等,尤其适用于需要根据视口大小调整的元素。
#### g. **ch**
- **定义**:相对于字符“0”的宽度。
- **特点**:相对单位,根据字体中字符“0”的宽度变化。
- **应用**:用于设置包含文本的元素宽度,确保文本对齐。
#### h. **ex**
- **定义**:相对于字符“x”的高度。
- **特点**:相对单位,根据字体中字符“x”的高度变化。
- **应用**:用于设置文本的垂直对齐。
2. **哪些单位服务于响应式布局**
在响应式布局中,推荐使用以下单位:
#### a. **百分比(%)**
- **原因**:根据父元素的尺寸动态变化,适用于创建灵活的布局。
#### b. **em 和 rem**
- **原因**:根据字体大小动态变化,适用于创建可缩放的布局和字体。
#### c. **vw 和 vh**
- **原因**:根据视口的大小动态变化,适用于创建全屏或视口相关的布局。
#### d. **vmin 和 vmax**
- **原因**:根据视口的宽高比动态变化,适用于创建适应不同屏幕比例的布局。
3. **哪些单位在响应式布局中尽量不要用**
a. **像素(px)**
- **原因**:像素是绝对单位,无法根据视口或父元素的大小动态变化。在响应式布局中,使用px可能导致元素在不同设备上显示不一致,无法实现灵活的布局调整。
- **建议**:在需要固定大小的元素(如边框、图标)中使用px,但在布局和字体大小上尽量避免使用。
4.代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>响应式布局计量单位示例</title><style>/* 使用% */.container {width: 80%;margin: 0 auto;background-color: lightblue;}/* 使用rem */html {font-size: 16px;}.text-rem {font-size: 1.5rem; /* 24px */margin: 1rem; /* 16px */}/* 使用vw 和 vh */.box-vw {width: 50vw;height: 20vh;background-color: lightgreen;margin: 10px 0;}/* 使用em */.box-em {width: 15em;height: 5em;background-color: lightcoral;margin: 1em 0;}/* 使用px */.box-px {width: 200px;height: 100px;background-color: lightyellow;margin: 10px 0;}</style>
</head>
<body><div class="container"><div class="text-rem">使用rem</div><div class="box-vw">使用vw 和 vh</div><div class="box-em">使用em</div><div class="box-px">使用px</div></div>
</body>
</html>
3.javaScript里边作用域以及作用域链?
1.什么是作用域
作用域说的是变量的可访问性和可见性。
2.作用域:全局作用域,函数作用域,块级作用域
全局作用域:任何不在函数中或是大括号中声明的变量,都是在全局作用域下,全局作用域下声明的变量可以在程序的任意位置访问
// 全局变量
var greeting = 'Hello World!';
function greet() {console.log(greeting);
}
// 打印 'Hello World!'
greet();
函数作用域:果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问,不能在函数以外去访问
function greet() {var greeting = 'Hello World!';console.log(greeting);
}
// 打印 'Hello World!'
greet();
// 报错: Uncaught ReferenceError: greeting is not defined
console.log(greeting);
块级作用域:ES6引入了let
和const
关键字,和var
关键字不同,在大括号中使用let
和const
声明的变量存在于块级作用域中。在大括号之外不能访问这些变量
{// 块级作用域中的变量let greeting = 'Hello World!';var lang = 'English';console.log(greeting); // Prints 'Hello World!'
}
// 变量 'English'
console.log(lang);
// 报错:Uncaught ReferenceError: greeting is not defined
console.log(greeting);
3.作用域链
所谓作用域链,就是作用域嵌套下,由内向外,一层一层往上的链式规则,这就是作用域链。
作用域链的创建是在函数定义时确定的,它与函数的定义位置有关。当函数被调用时,会创建一个新的执行环境,其中包含一个新的变量对象,并将其添加到作用域链的前端。这样,函数内部就可以访问其所在作用域以及其外部作用域中的变量和函数,形成了一个作用域链。
4.前端开发的特征里面有模块化,组件化,自动化,标准化,分别解释一下,(es6)模块化里边的模块的导入导出有哪些方式,各有什么特点?
1.前端开发的四大特征
1. 模块化(Modularity)
定义:模块化是指将代码拆分成独立、可复用的模块,每个模块负责特定的功能或业务逻辑。通过模块化,可以将复杂的代码库分解成更小、更易管理的部分。
优势:
- 可维护性:每个模块职责单一,便于理解和维护。
- 复用性:模块可以在不同项目中重复使用。
- 隔离性:模块之间相互独立,减少了代码之间的耦合。
- 团队协作:不同团队成员可以并行开发不同的模块,减少冲突。
实现方式:
- ES6模块化:使用
import
和export
语法。 - CommonJS:使用
require
和module.exports
(主要用于Node.js)。 - AMD(Asynchronous Module Definition):适用于浏览器环境,如RequireJS。
- UMD(Universal Module Definition):兼容多种模块系统。
2. 组件化(Componentization)
定义:组件化是将用户界面拆分成独立的、可复用的组件,每个组件包含自己的结构、样式和逻辑。组件可以嵌套、组合,形成复杂的用户界面。
优势:
- 复用性:相同的组件可以在不同的地方重复使用。
- 可维护性:每个组件负责特定的UI部分,便于维护和更新。
- 可测试性:组件可以单独测试,确保其功能的正确性。
- 一致性:组件化有助于保持UI的一致性,提升用户体验。
实现方式:
- React:使用JSX语法定义组件。
- Vue.js:使用单文件组件(.vue文件)。
- Angular:使用组件装饰器(@Component)。
- Web Components:使用原生的自定义元素(Custom Elements)。
3. 自动化(Automation)
定义:自动化是指通过工具和脚本自动执行重复性任务,如代码编译、测试、构建、打包和部署等。自动化可以减少人工操作,提高开发效率,降低出错率。
优势:
- 效率提升:自动化工具可以快速执行任务,节省时间。
- 一致性:自动化确保每次构建和部署的一致性。
- 减少错误:自动化减少了人为操作带来的错误。
- 持续集成/持续部署(CI/CD):自动化是实现CI/CD的基础。
常见工具:
- 构建工具:Webpack, Parcel, Rollup。
- 任务运行器:npm scripts, Gulp, Grunt。
- 代码质量工具:ESLint, Prettier。
- 测试工具:Jest, Mocha, Chai, Cypress。
4. 标准化(规范化,Standardization)
定义:标准化是指遵循行业标准和最佳实践,确保代码的一致性和兼容性。标准化有助于团队协作,提升代码的可读性和可维护性。
优势:
- 一致性:统一的代码风格和结构便于团队协作。
- 可读性:遵循标准化的代码更易于理解和维护。
- 兼容性:标准化有助于确保代码在不同环境和浏览器中的兼容性。
- 最佳实践:遵循标准化的最佳实践可以提升代码质量和性能。
实现方式:
- 代码规范:如Airbnb JavaScript风格指南,Google JavaScript风格指南。
- 版本控制:使用Git进行版本控制,遵循Git Flow等最佳实践。
- 文档规范:如JSDoc,用于生成文档。
- 测试标准:如单元测试、集成测试、端到端测试等。
2、ES6模块化中的导入和导出
1. 导出方式(Export)
a. 命名导出(Named Exports)
特点:
- 导出多个变量或函数。
- 导入时需要使用相同的名称。
- 可以使用
as
关键字重命名。
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;// 或者使用大括号批量导出
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
export { multiply, divide };
导入:
// main.js
import { add, subtract, multiply, divide } from './math.js';
console.log(add(2, 3)); // 5
b. 默认导出(Default Export)
特点:
- 每个模块只能有一个默认导出。
- 导入时可以使用任意名称。
- 不需要使用大括号。
// logger.js
const logger = (message) => console.log(message);
export default logger;// 或者简写
export default (message) => console.log(message);
导出:
// main.js
import logger from './logger.js';
logger('Hello, world!'); // 输出: Hello, world!
c. 混合导出(Mixed Exports)
特点:
- 同时使用命名导出和默认导出。
- 导入时需要分别处理。
// utils.js
export const utilityFunction = () => { /* ... */ };
export default (a, b) => a + b;
导入:
// main.js
import defaultFunc, { utilityFunction } from './utils.js';
defaultFunc(1, 2); // 3
utilityFunction();
2. 导入方式(Import)
a. 命名导入(Named Imports)
特点:
- 使用大括号导入命名导出的变量或函数。
- 导入的名称必须与导出名称一致。
- 可以使用
as
关键字重命名。
// main.js
import { add, subtract as minus } from './math.js';
console.log(add(5, 3)); // 8
console.log(minus(5, 3)); // 2
b. 默认导入(Default Import)
特点:
- 导入默认导出的内容。
- 可以使用任意名称。
- 不需要使用大括号。
// main.js
import add from './math.js';
console.log(add(5, 3)); // 8
c. 混合导入(Mixed Imports)
特点:
- 同时导入默认导出和命名导出的内容。
- 需要分别处理。
// main.js
import defaultFunc, { utilityFunction } from './utils.js';
defaultFunc(1, 2); // 3
utilityFunction();
d. 全部导入(Namespace Import)
特点:
- 使用
*
导入模块的所有导出内容。 - 导入的内容被封装在一个对象中。
- 可以使用
as
关键字重命名。
// main.js
import * as math from './math.js';
console.log(math.add(5, 3)); // 8
console.log(math.subtract(5, 3)); // 2
3.动态导入(Dynamic Import)
特点:
- 使用
import()
函数进行动态导入。 - 返回一个Promise,可以进行异步操作。
- 适用于需要按需加载模块的场景。
// main.js
const moduleSpecifier = './math.js';
import(moduleSpecifier).then(math => {console.log(math.add(5, 3)); // 8}).catch(err => {console.error(err);});
1.js文件:export default方式导出
function A() {
console.log("1.js---A方法")
}
function B() {
console.log("1.js---B方法")
}
function Test() {
console.log("1.js---Test方法")
}
export default{
A, //等价于A:A
B,
Test
}
// 这种export default的导入的时候用法:import obj from "./1.js" (导出1.js文件中的A,B,Test方法,注意:obj这个名字谁便取)
2.js文件 export 方式导出
function C() {
console.log("2.js---C方法")
}
function D() {
console.log("2.js---D方法")
}
function Test() {
console.log("2.js---Test方法")
}
export {
C, //等价于C:C
D,
Test
}
// 这种export 的导入的时候用法:import {C} from "./2.js" (导出2.js文件中的E方法,注意:名称不能改变,必须是C)
// 这种export 的导入的时候用法:import {C,D,Test} from "./2.js" (导出2.js文件中的E和F方法,注意:名称不能改变,必须是C,D,Test)
// 这种export 的导入的时候用法:import {C,D} from "./2.js" (导出2.js文件中的C和D和Test方法,注意:名称不能改变,必须是C,D,Test)
// 这种export 的导入的时候用法:import * as myfun from "./2.js" (导出2.js文件中的所有方法,注意:* as myfun 取别名 然后用的时候就这样用: myfun.C,myfun.D,myfun.Test )
3.js文件:方法前加export
export function E() {
console.log("3.js---E方法")
}
export function F() {
console.log("3.js---F方法")
}
export function Test() {
console.log("3.js---Test方法")
}
//在方法前面加export相当于如下代码:
// export {
// E,
// F,
// Test
// }
// 这种单个方法前面加export 的导出在使用导入的时候的用法:import {E,F,Test} from "./3.js"
4.js文件function H() {
console.log("4.js---H方法")
}
function M() {
console.log("4.js---M方法")
}
function Z(){
console.log("4.js---Z方法")
}
//对H,M方法使用 export 导出方式
export {
H,
M,
}
//export default Z//单独导出一个Z方法,导入:import myz,{H,M} from "./4.js" 此时这个myz就是Z方法:直接执行myz()
export default
{
Z
}
//在对4.js进行导入的时候就这样导入:import myz,{H,M} from "./4.js" :注意这个Z是可以取别名的就myz都可以用的时候myz.Z(),但是H,与M别能取别名,必须是H,M且要放在{}里
运行使用
<template>
<div></div>
</template>
<script>
import obj from "./1.js" //导入1.js中的向外导出的所有方法。
import { C, D, Test } from "./2.js"
import * as myfun from "./2.js" //导入2.js中的向外导出的所有方法。
import { E, F, Test as Test3 } from "./3.js" //因为3.js中的Test方法与2.js中的Test方法重名,所以这里需要给Test方法取一个别名
import myz, { H, M } from "./4.js"
// 1.js中的方法
obj.A();
obj.B();
obj.Test();
//2.js中的方法
C();
D();
Test();
myfun.C();
myfun.D();
myfun.Test();
//3.js中的方法
E();
F();
Test3();
//4.js中的方法
H();
M();
myz.Z();
</script>
5.我们通过面向对象的分治思想和封装性的思想谈一下模块化、组件化必要性,以及模块化、组件化的意图是什么?做模块化和组件化的时候主要要遵循哪些原则?
一、面向对象与分治思想
1. 面向对象(OOP)
面向对象编程是一种编程范式,它通过对象来设计应用程序和计算机程序。OOP的核心概念包括:
- 类(Class):定义对象的蓝图。
- 对象(Object):类的实例,具有状态(属性)和行为(方法)。
- 封装(Encapsulation):将数据和操作数据的方法绑定在一起,隐藏内部实现细节。
- 继承(Inheritance):一个类可以继承另一个类的属性和方法。
- 多态(Polymorphism):不同对象可以以不同方式响应同一方法调用。
2. 分治思想(Divide and Conquer)
分治思想是将一个复杂的问题分解成更小、更易管理的子问题,分别解决这些子问题,然后将结果组合起来得到最终解决方案。在编程中,分治思想体现为:
- 模块化:将系统分解成独立的模块。
- 组件化:将用户界面分解成独立的组件。
- 函数分解:将复杂函数分解成多个更小的函数。
二、模块化与组件化的必要性
1. 模块化的必要性
模块化是指将代码拆分成独立、可复用的模块,每个模块负责特定的功能或业务逻辑。其必要性体现在以下几个方面:
- 复杂性管理:随着项目规模的扩大,代码的复杂性增加。模块化可以将复杂系统分解成更小的部分,便于管理和维护。
- 复用性:模块可以在不同项目中重复使用,减少重复劳动,提高开发效率。
- 团队协作:不同团队成员可以并行开发不同的模块,减少冲突,提高协作效率。
- 可维护性:模块职责单一,代码更易理解和维护。
- 隔离性:模块之间相互独立,减少了代码之间的耦合,增强了系统的稳定性。
2. 组件化的必要性
组件化是指将用户界面拆分成独立的、可复用的组件,每个组件包含自己的结构、样式和逻辑。其必要性体现在:
- 复用性:相同的组件可以在不同的地方重复使用,减少重复开发。
- 一致性:组件化有助于保持UI的一致性,提升用户体验。
- 可维护性:每个组件负责特定的UI部分,便于维护和更新。
- 可测试性:组件可以单独测试,确保其功能的正确性。
- 可组合性:组件可以嵌套、组合,形成复杂的用户界面。
三、模块化与组件化的意图
1. 模块化的意图
- 职责单一:每个模块负责一个特定的功能或业务逻辑,确保职责单一。
- 高内聚、低耦合:模块内部高度内聚,模块之间低耦合,增强系统的稳定性和可维护性。
- 可复用性:模块可以在不同项目中重复使用,提高开发效率。
- 可维护性:模块化使得代码更易理解和维护,降低维护成本。
- 团队协作:不同团队成员可以并行开发不同的模块,减少冲突,提高协作效率。
2. 组件化的意图
- 用户界面分解:将用户界面分解成独立的、可复用的组件,每个组件负责特定的UI部分。
- 可复用性:相同的组件可以在不同的地方重复使用,减少重复开发。
- 一致性:组件化有助于保持UI的一致性,提升用户体验。
- 可组合性:组件可以嵌套、组合,形成复杂的用户界面。
- 可维护性:每个组件职责单一,代码更易理解和维护。
- 可测试性:组件可以单独测试,确保其功能的正确性。
四、模块化与组件化应遵循的原则
1. 模块化应遵循的原则
a. 单一职责原则(Single Responsibility Principle, SRP)
- 定义:每个模块应该只有一个职责。
- 应用:确保模块只负责一个特定的功能或业务逻辑,避免模块过于庞大和复杂。
b. 开放封闭原则(Open/Closed Principle, OCP)
- 定义:模块应对扩展开放,对修改封闭。
- 应用:通过扩展模块的功能,而不是修改现有代码,实现新需求。
c. 依赖倒置原则(Dependency Inversion Principle, DIP)
- 定义:高层模块不应该依赖低层模块,两者都应该依赖抽象。
- 应用:通过依赖注入和接口实现,降低模块之间的耦合度。
d. 接口隔离原则(Interface Segregation Principle, ISP)
- 定义:客户端不应该依赖它不需要的接口。
- 应用:为不同的客户端提供不同的接口,避免接口过于庞大和复杂。
e. 复用性原则(Reusability Principle)
- 定义:模块应设计为可复用的。
- 应用:通过封装和抽象,提高模块的可复用性。
2. 组件化应遵循的原则
a. 单一职责原则(Single Responsibility Principle, SRP)
- 定义:每个组件应该只有一个职责。
- 应用:确保组件只负责一个特定的UI部分,避免组件过于庞大和复杂。
b. 可复用性原则(Reusability Principle)
- 定义:组件应设计为可复用的。
- 应用:通过封装和抽象,提高组件的可复用性。
c. 可组合性原则(Composability Principle)
- 定义:组件应设计为可组合的。
- 应用:组件可以嵌套、组合,形成复杂的用户界面。
d. 可维护性原则(Maintainability Principle)
- 定义:组件应易于维护和更新。
- 应用:通过模块化、封装和抽象,提高组件的可维护性。
e. 一致性原则(Consistency Principle)
- 定义:组件应保持UI的一致性。
- 应用:通过统一的样式和结构,确保UI的一致性,提升用户体验。
f. 可测试性原则(Testability Principle)
- 定义:组件应易于测试。
- 应用:通过模块化和封装,组件可以单独测试,确保其功能的正确性。
五、总结
- 模块化和组件化是现代软件开发中的核心概念,通过结合面向对象的分治思想和封装性,可以有效提升代码的可维护性、可复用性、可测试性和团队协作效率。
- 模块化的意图是实现职责单一、高内聚、低耦合和可复用性;组件化的意图是实现用户界面的分解、可复用性、可组合性、可维护性和一致性。
-
分治思想,降低模块的复杂度,其次提高它的复用性,
封装性思想,把自己一些内部的东西封装到组件内部,当组件内部发生变化时,并不影响其他模块对组件的使用
- 遵循的原则包括单一职责原则、开放封闭原则、依赖倒置原则、接口隔离原则、可复用性原则、可组合性原则、可维护性原则和一致性原则。
通过合理运用这些原则,前端开发者可以构建出高效、可维护、可扩展的现代Web应用。