前端学习备忘记录
HTML技巧
使用语义化标签
例如，<header>、<nav>、<section>、<footer>等语义化标签，可以让页面结构更清晰，有利于搜索引擎优化。
自定义数据属性
可以使用data-前缀的自定义属性，存储额外的信息。例如：<div data-role="user" data-id="123"></div>，然后可以通过JavaScript获取这些属性。
<div data-role="user" data-id="123"></div>
document.querySelector('div').getAttribute('data-id'); // 获取data-id属性的值
CSS技巧
使用CSS变量
可以在根元素中定义变量，然后在页面中重复使用。例如：:root { --main-color: #333; }，然后在其他地方使用color: var(--main-color);。
CSS选择器组合
可以组合使用选择器来精确选择元素。例如，div.class1.class2选择同时具有class1和class2类的div元素；div > p选择div元素下的直接子元素p。
:root {
--main-color: #333;
}
.container div.class1.class2 {
color: var(--main-color);
}
div布局技巧
可以使用flex布局来创建灵活的div布局。例如，设置display: flex;可以让div内的子元素水平排列，并且可以通过justify-content和align-items属性来控制子元素的对齐方式。
还可以使用grid布局来创建复杂的网格布局。通过设置display: grid;和定义网格的行和列，可以精确地控制元素的位置。
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
}
JavaScript技巧
事件委托
可以将事件监听器绑定到父元素上，利用事件冒泡的特性来处理子元素的事件。这样可以提高性能，尤其是在有大量子元素时。
闭包
闭包可以捕获外部函数的局部变量，创建私有的作用域。例如，可以使用闭包来创建计数器。
document.getElementById('parent').addEventListener('click', function(event) {
if(event.target.tagName === 'LI') {
// 处理li元素的点击事件
}
});
function createCounter() {
let count = 0;
return function() {
count++;
console.log(count);
}
}
const counter = createCounter();
counter(); // 输出1
counter(); // 输出2