文章目录
- 画一个三角形
- 实现三栏布局
- 通过position和margin
- 通过float和margin
- 通过flex实现
- 变量提升题
- 实现边框0.5px
- 深拷贝
- 快速排序
- 手写发布订阅/事件总线
画一个三角形
.box1 {
width: 0;
height: 0;
border: 10px solid;
border-color: red transparent transparent transparent;
}
实现三栏布局
- 三栏布局是两边固定，中间自适应
通过position和margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
position: relative;
}
.left,
.right {
position: absolute;
height: 100%;
top: 0;
background-color: #ff69b4;
}
.left {
left: 0;
width: 100px;
}
.right {
right: 0;
width: 200px;
}
.main {
height: 100%;
margin: 0 200px 0 100px;
background-color: #659;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
</body>
</html>
通过float和margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
width: 100%;
height: 100%;
}
.left {
float: left;
height: 100%;
width: 100px;
background-color: pink;
}
.right {
float: right;
height: 100%;
width: 200px;
background-color: pink;
}
.main {
height: 100%;
margin: 0 200px 0 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
</body>
</html>
通过flex实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
}
.left {
width: 200px;
background-color: red;
}
.main {
flex: 1;
background-color: pink;
}
.right {
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
变量提升题
- 变量提升，声明式函数比var的优先级更高，后创建的函数覆盖前面的函数
- 当JavaScript代码执行时，会进行两个阶段的处理：编译阶段和执行阶段。在编译阶段，JavaScript会将函数声明和变量声明(但是还没有赋值)提升到作用域的顶部。这意味着无论函数声明和变量声明在代码中的位置如何，它们都会在执行阶段之前被处理。
- 函数声明的优先级高于变量声明
- 输出fn(){console.log(400)},100,100,300，400
实现边框0.5px
原理：
方法1：高度1px，背景渐变，一半有颜色，一半没颜色
linear-gradient(0deg, #f00 50%, transparent 50%);
方法2：通过transform：scaleY(.5)进行缩放垂直尺寸
深拷贝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
//判断是不是对象
function isObject(value) {
const valueType = typeof value; // null,object,function,array
return (
value !== null && (valueType === "object" || valueType === "function")
);
}
function deepCopy(originValue, map = new WeakMap()) {
//通过map解决循环引用，
//1.如果是原始类型，直接返回
if (!isObject(originValue)) {
return originValue;
}
//2.如果是对象类型，才需要创建对象
if (map.get(originValue)) {
return map.get(originValue);
}
const newObj = Array.isArray(originValue) ? [] : {};
map.set(originValue, newObj);
for (const key in originValue) {
newObj[key] = deepCopy(originValue[key], map);
}
return newObj;
}
const info = {
name: "why",
age: 18,
friend: {
name: "kobe",
address: {
name: "洛杉矶",
detail: "lmp",
},
},
};
info.self = info;
const newObj = deepCopy(info);
console.log(newObj);
</script>
</body>
</html>
快速排序
/**
* LeetCode 912: 排序数组
* @param {number[]} nums 数组
* @return {number[]} 排序后的数组
*/
const sortArray = function(nums) {
// 使用内置的快速排序算法进行排序
const quickSort = (nums, start, end) => {
if (start >= end) {
return;
}
// 选择基准元素
const pivot = nums[start];
let left = start + 1;
let right = end;
while (left <= right) {
// 找到左侧大于等于基准元素的值
while (left <= right && nums[left] < pivot) {
left++;
}
// 找到右侧小于等于基准元素的值
while (left <= right && nums[right] > pivot) {
right--;
}
// 交换左侧和右侧的值
if (left <= right) {
[nums[left], nums[right]] = [nums[right], nums[left]];
left++;
right--;
}
}
// 将基准元素放到正确的位置
[nums[start], nums[right]] = [nums[right], nums[start]];
// 递归排序左右两部分
quickSort(nums, start, right - 1);
quickSort(nums, right + 1, end);
};
// 调用快速排序函数进行排序
quickSort(nums, 0, nums.length - 1);
return nums;
};
// 测试用例
const nums = [5, 2, 3, 1];
console.log(sortArray(nums)); // 输出 [1, 2, 3, 5]
手写发布订阅/事件总线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button class="nav-btn">nav button</button>
<script>
class HYEventBus {
constructor() {
this.eventMap = {};
}
on(eventName, eventFn) {
let eventFns = this.eventMap[eventName];
if (!eventFns) {
eventFns = [];
this.eventMap[eventName] = eventFns;
}
eventFns.push(eventFn);
}
emit(eventName, ...args) {
let eventFns = this.eventMap[eventName];
if (!eventFns) return;
eventFns.forEach((fn) => {
fn(...args);
});
}
off(eventName, eventFn) {
let eventFns = this.eventMap[eventName];
if (!eventFns) return;
for (let i = 0; i < eventFns.length; i++) {
const fn = eventFns[i];
if (fn === eventFn) {
eventFns.splice(i, 1);
break;
}
}
//如果eventFns已经清空了
if (eventFns.length === 0) {
delete this.eventMap[eventName];
}
}
}
const eventBus = new HYEventBus();
eventBus.on("navclick", (name, age, height) => {
console.log("navclick listener 01", name, age, height);
});
const click = () => {
console.log("navclick listener 02");
};
eventBus.on("navclick", click);
setTimeout(() => {
eventBus.off("navclick", click);
}, 5000);
eventBus.on("asideclick", () => {
console.log("asideclick listener");
});
const navBtnEl = document.querySelector(".nav-btn");
navBtnEl.onclick = () => {
console.log("自己监听到");
eventBus.emit("navclick", "why", 18, 1.88);
};
</script>
</body>
</html>
