前端 | Winter

1 微信小程序

1.1 rpx

rpx是处理不同设备，元素大小的一种方法。

微信小程序的宽度固定是750rpx ，高度的rpx由长宽比决定。

其他处理相对大小的方法：

使用百分比（%），这种方式相对于父容器来定义高度，可以适用于一些需要相对高度的场景。
使用视窗高度（vh）来设置元素的高度。vh是CSS中的单位，其中1vh等于1%的视窗（viewport）高度（即浏览器高度）。

1.2 wxml 与html 区别

标签和属性：
- WXML为微信小程序特有的标记语言，它提供了一些自定义组件（如 <view>、<text> 等）来替代HTML中的标签（如 <div>、<span>）。
- WXML中，class和style等属性可以动态绑定数据（使用{{}}语法，括号内加js语句），从而实现动态的样式和内容。
数据绑定：
- WXML提供类似Vue数据绑定，通过{{}}进行变量插值，很方便地将页面数据与逻辑层数据连接。
事件处理：
- WXML中的事件绑定使用bind或catch前缀（如bindtap、catchtap），而HTML中则使用on前缀（如onclick）。
- 微信小程序中的事件绑定允许开发者直接在WXML标签中定义处理函数，而不需要在页面加载后单独进行事件监听的设置。
条件渲染和列表渲染：
- WXML提供了类似Vue的wx:if、wx:elif、wx:else属性用于条件渲染，以及wx:for用于循环列表渲染。这些指令能够简化页面的动态内容生成。

1.3 跳转页面

1.3.1 微信小程序跳转页面

在微信小程序中，跳转页面主要通过API实现，有以下几种常见的方法：

navigateTo：保留当前页面，跳转到应用内的某个页面，但不能跳转到 tabBar 页面。
redirectTo：关闭当前页面，跳转到应用内某个页面。
switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
reLaunch：关闭所有页面，跳转到应用内某个页面。

1.3.2 html5跳转页面

在HTML5中，页面跳转可以通过以下几种常见的方法来实现：

**使用HTML链接标签 <a>**：非常简单直接的方法。

使用 JavaScript：

设置 window.location.href
使用 window.location.replace
使用 window.location.assign

使用表单的 action

2 CSS

2.1 display属性

**none**：
元素不会被显示，并从文档流中移除，就好像它从来没有存在过一样。元素不占空间，它后面的元素会填补它原来的位置。
**block**：
块级元素。这意味着元素会新起一行显示，并尽可能填满其父容器的宽度。块级元素可以设置宽度、高度、外边距（margin）和内边距（padding）。
**inline**：
行内元素。元素不会新起一行，而是会和其他行内元素一样，在文本中同一行排列，只能在元素的前后添加内容。行内元素不能设置宽度和高度。
**inline-block**：
结合了inline和block的特性。元素同行内元素一样水平排列，但它可以像块级元素一样设置宽度、高度、外边距和内边距。
**flex**：
元素将变为弹性容器（flex container），其子元素（flex items）能使用弹性布局的属性。这是CSS3中引入的一种布局模式，能够简化复杂的布局设计。
**grid**：
类似于flex，grid也是CSS3引入的一种现代布局模式。元素将变为网格容器，其内部子元素可以放在网格布局中。它为复杂的二维布局提供了更为强大和灵活的解决方案。
**table**、table-row、table-cell等：
这一系列属性值将元素表现得像HTML中的表格元素一样。例如，display: table;可以将一个元素变为类似<table>的块级表格容器，而display: table-cell;则模仿了<td>的单元格盒子效果。

(注:需要使用表格，尽量用div元素再设置display为table)

2.2 position属性定位

2.2.1 static

默认值：所有元素默认都是static定位。

特性：

元素按照正常的文档流进行排列。
left、top、right、bottom属性对static元素无效。

2.2.2 relative

相对定位：相对于元素在文档流中的初始位置进行偏移。

特性：

元素仍然保留在文档流中，原来位置占据空间。
使用left、top、right、bottom属性可以相对于初始位置进行偏移。

2.2.3 absolute

绝对定位：相对于最近的已定位祖先元素（非static）进行偏移。如果不存在已定位祖先元素，则相对于初始包含块（通常是<html>元素）进行偏移。

特性：

元素脱离文档流，不占用原来的空间。
使用left、top、right、bottom属性进行定位。

2.2.4 fixed

固定定位：相对于浏览器视口（viewport）进行偏移，与滚动条无关。

特性：

元素脱离文档流，不占用原来的空间。
使用left、top、right、bottom属性进行定位。
滚动页面时，元素的位置不变。

2.2.5 sticky

黏性定位：根据用户的滚动位置，在相对和固定定位之间切换。

特性：

元素根据滚动位置，在relative和fixed定位之间切换。
使用top、right、bottom和left属性指定粘性定位的边界。
只在其祖先元素的滚动区域内有效。

2.2.6 left right top bottom

使用left、right、top、bottom属性取决于position属性的值

例如：

相对定位时left：20px;相对原先位置的左端右移20个像素。left:-20px;相对于原先位置的左端左移20px

绝对定位时left:20px相对于最近的父非static元素右移20个像素。

2.3 flex弹性布局

属性

flex-direction
flex-wrap
justify-content
align-items

2.3.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.3.2 flex-wrap属性

flex-wrap属性决定换行

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

2.3.3 justify-content属性

justify-content决定水平方向的对齐

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2.3.4 align-items属性

align-items决定垂直方向的对齐

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3 JS

3.1 DOM操作

3.1.1 选择元素

通过id选择 var element = document.getElementById('myElement');

通过类class选择

选一个 var singleElement = document.querySelector('.myClass');

选所有 var multipleElements = document.querySelectorAll('.myClass');

jQuery写法

1
2
3

var $element = $('#myElement'); // 使用ID选择器
var $singleElement = $('.myClass'); // 使用类选择器,返回的是jQuery 对象集合
var $multipleElements = $('.myClass'); // 使用类选择器，返回的是jQuery 对象集合

3.1.2 修改元素内容

修改文本内容

1 2	var element = document.getElementById('myElement'); element.textContent = '新的文本内容';

修改html内容

1 2	var element = document.getElementById('myElement'); element.innerHTML = '<strong>新的HTML内容</strong>';

jQuery写法

var $element = $('#myElement');
$element.text('新的文本内容');
var $element = $('#myElement');
$element.html('<strong>新的HTML内容</strong>');

3.1.3 修改属性与样式

修改属性

1
2
3

var element = document.getElementById('myElement');
element.setAttribute('src', 'newImage.jpg');
element.src = 'newImage.jpg'; // 等效操作

修改样式

1
2
3

var element = document.getElementById('myElement');
element.style.color = 'red';
element.style.backgroundColor = 'blue';

jQuery写法

var $element = $('#myElement');
$element.attr('src', 'newImage.jpg'); // 设置属性
var srcValue = $element.attr('src'); // 获取属性
var $element = $('#myElement');
$element.css('color', 'red');
$element.css('background-color', 'blue');

3.1.4 事件处理

添加事件监听器

var element = document.getElementById('myElement');
element.addEventListener('click', function() {
  alert('元素被点击了!');
});

3.1.5 jQuery其他操作

追加内容

1
2
3

var $parentElement = $('#myElement');
$parentElement.append('<div>新内容</div>'); // 在元素内的末尾插入新内容
$parentElement.prepend('<div>新内容</div>'); // 在元素内的开头插入新内容

移除元素

1 2	var $element = $('#myElement'); $element.remove(); // 移除元素

3.2 es6+新特性

3.2.1 块级作用域 let const

变量声明可以用var const let 先来介绍下var为什么不行

特点

函数作用域：使用var声明的变量是函数作用域的，这意味着它只能在声明它的函数内访问到。
变量提升：var声明的变量在作用域内会被提升到作用域的顶部（hoisted），但变量提升只会提升声明，不会提升赋值。会被初始化为undefined
可重新赋值：var声明的变量可以重新赋值

坏处

变量提升导致不小心在变量声明之前就使用它
缺乏块级作用域导致变量的修改意外地跨越代码块发生

let的特点

块级作用域：let声明的变量在它们所在的任何块级作用域内有效。
不可重复声明：在同一作用域内使用let声明的变量不能重新声明。
变量提升但不初始化到undefined：let声明的变量会被提升到所在块的顶部，但不会初始化为undefined，在声明之前访问这些变量会导致ReferenceError。

const 的特点

块级作用域：const声明的变量在它们所在的任何块级作用域内有效。
不可重新赋值：const声明的变量在初始化之后无法重新赋值。注意，const声明的对象可以修改其属性。
不可重复声明：与let相似，在同一作用域内使用const声明的变量不能重新声明。
变量提升但不初始化到undefined：与let相似，const声明的变量会被提升到所在块的顶部，但不会初始化为undefined，在声明之前访问这些变量会导致ReferenceError。

总结和区别

作用域：
- var：函数作用域
- let：块级作用域
- const：块级作用域
变量提升：
- var：变量提升并初始化为undefined
- let：变量提升但不初始化
- const：变量提升但不初始化
可重新赋值性：
- var：可以重新赋值
- let：可以重新赋值
- const：不可重新赋值，但对象的属性可以修改
不可重复声明：
- var：在同一作用域内可重复声明（会覆盖之前的声明）
- let：在同一作用域内不可重复声明
- const：在同一作用域内不可重复声明

3.2.2 箭头函数

示例

1	const add = (a, b) => a + b;

res => {
    if (res.success) {
        console.log(res.message);
        alert('短信发送成功');
    } else {
        console.error(res.message);
        alert('短信发送失败');
    }
}

箭头函数主要特点

简洁的语法：
- 比传统的匿名函数语法简短，特别适合用于简短的回调函数。
**词法的this**：
- 箭头函数不会创建它自己的this上下文，this将保持为定义该箭头函数的上下文中的值。这在处理回调函数时特别有用，避免this值在不同上下文中的意外变化问题。

3.2.3 模板字符串

使用反引号（```）定义多行字符串和内插变量。

1 2	const name = 'John'; const greeting = `Hello, ${name}!`;

3.3 JS变量类型及判定

3.3.1 基本类型

Number：
- 表示数字类型，包括整数和浮点数。
- 示例：let a = 42;，let b = 3.14;
String：
- 表示文本数据，字符串是不可变的。
- 示例：let name = "Alice";
Boolean：
- 只有两个值：true 和 false。
- 示例：let isValid = true;
Null：
- 表示一个空值（空对象引用），是JavaScript中有意表示空值的对象。
- 示例：let empty = null;
Undefined：
- 表示尚未赋值的变量。
- 示例：let value;（value 的值是 undefined）
Symbol：
- 用于创建唯一的标识符。
- 示例：let sym = Symbol('description');
BigInt：
- 表示任意精度的整数。
- 示例：let bigInt = 12345678901234567890n;

3.3.2 引用类型

Object：
- JavaScript 中最基本的引用类型，可以包含多个键值对。
- 示例：let person = { name: "Alice", age: 25 };
Array（本质上是对象的一种特殊形式）：
- 一种特殊的对象类型，用于存储有序的值集合。
- 示例：let numbers = [1, 2, 3, 4, 5];
Function（也是对象的一种）：
- 函数是可调用的对象，可以保存和执行代码块。
- 示例：let greet = function() { console.log("Hello!"); };
Date：
- 用于处理日期和时间。
- 示例：let now = new Date();
RegExp：
- 用于匹配正则表达式。
- 示例：let pattern = /abc/;

3.3.3 判定方法

3.3.3.1 `typeof` 运算符

typeof 是一个一元运算符，用于检测变量的数据类型。它适用于基本类型和一些特殊对象类型（如函数），但对某些复杂对象类型（如 Array、null）不够精确。

示例：

console.log(typeof 42);             // "number"
console.log(typeof "Hello");        // "string"
console.log(typeof true);           // "boolean"
console.log(typeof undefined);      // "undefined"
console.log(typeof null);           // "object"   // 特殊情况，历史遗留问题
console.log(typeof Symbol());       // "symbol"
console.log(typeof 12345678901234567890n); // "bigint"

console.log(typeof { name: "Alice" }); // "object"
console.log(typeof [1, 2, 3]);         // "object"  // 不够精确
console.log(typeof function() {});     // "function"

3.3.3.2 `instanceof` 运算符

instanceof 运算符用于检测对象是否为指定构造函数的实例，常用于引用类型的判定。

示例：

let arr = [1, 2, 3];
console.log(arr instanceof Array);   // true
console.log(arr instanceof Object);  // true

let date = new Date();
console.log(date instanceof Date);   // true
console.log(date instanceof Object); // true

let person = { name: "Alice" };
console.log(person instanceof Object); // true

3.3.3.3 `Object.prototype.toString.call`

使用 Object.prototype.toString.call 可以更精确地判断对象类型，特别在判定 Array 和 Null 等特殊对象时非常有效。

示例：

console.log(Object.prototype.toString.call(42));              // "[object Number]"
console.log(Object.prototype.toString.call("Hello"));         // "[object String]"
console.log(Object.prototype.toString.call(true));            // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined));       // "[object Undefined]"
console.log(Object.prototype.toString.call(null));            // "[object Null]"
console.log(Object.prototype.toString.call(Symbol()));        // "[object Symbol]"
console.log(Object.prototype.toString.call(12345678901234567890n));  // "[object BigInt]"

console.log(Object.prototype.toString.call({ name: "Alice" }));  // "[object Object]"
console.log(Object.prototype.toString.call([1, 2, 3]));          // "[object Array]"
console.log(Object.prototype.toString.call(function() {}));      // "[object Function]"
console.log(Object.prototype.toString.call(new Date()));         // "[object Date]"
console.log(Object.prototype.toString.call(/abc/));              // "[object RegExp]"

以下是一个综合使用 typeof、instanceof 和 Object.prototype.toString.call 来判定变量类型的示例函数：

function getType(value) {
  if (value === null) {
    return 'null';
  }
  if (typeof value === 'undefined') {
    return 'undefined';
  }
  if (typeof value === 'object') {
    if (value instanceof Array) {
      return 'array';
    }
    if (value instanceof Date) {
      return 'date';
    }
    if (value instanceof RegExp) {
      return 'regexp';
    }
    return 'object';
  }
  return typeof value;
}

// 测试
console.log(getType(42));           // "number"
console.log(getType("Hello"));      // "string"
console.log(getType(true));         // "boolean"
console.log(getType(undefined));    // "undefined"
console.log(getType(null));         // "null"
console.log(getType(Symbol()));     // "symbol"
console.log(getType(12345678901234567890n)); // "bigint"
console.log(getType({ name: "Alice" }));  // "object"
console.log(getType([1, 2, 3]));          // "array"
console.log(getType(function() {}));      // "function"
console.log(getType(new Date()));         // "date"
console.log(getType(/abc/));              // "regexp"

3.3.3.4 总结

JavaScript 变量类型包括基本类型和引用类型。为了正确判断变量的类型，可以使用多种方法：

typeof：适用于基本类型和一些特殊情况。
instanceof：适用于引用类型的判定。
Object.prototype.toString.call：适用于更精确的类型判定，包括特殊对象类型如 Array 和 Null。

1 微信小程序

1.1 rpx

1.2 wxml 与html 区别

1.3 跳转页面

1.3.1 微信小程序跳转页面

1.3.2 html5跳转页面

2 CSS

2.1 display属性

2.2 position属性定位

2.2.1 static

2.2.2 relative

2.2.3 absolute

2.2.4 fixed

2.2.5 sticky

2.2.6 left right top bottom

2.3 flex弹性布局

2.3.1 flex-direction属性

2.3.2 flex-wrap属性

2.3.3 justify-content属性

2.3.4 align-items属性

3 JS

3.1 DOM操作

3.1.1 选择元素

3.1.2 修改元素内容

3.1.3 修改属性与样式

3.1.4 事件处理

3.1.5 jQuery其他操作

3.2 es6+新特性

3.2.1 块级作用域 let const

3.2.2 箭头函数

3.2.3 模板字符串

3.3 JS变量类型及判定

3.3.1 基本类型

3.3.2 引用类型

3.3.3 判定方法

3.3.3.1 typeof 运算符

3.3.3.2 instanceof 运算符

3.3.3.3 Object.prototype.toString.call

3.3.3.4 总结

3.3.3.1 `typeof` 运算符

3.3.3.2 `instanceof` 运算符

3.3.3.3 `Object.prototype.toString.call`