coderwhy深入前端就业指导+八股文（高の青）

/* CSS盒模型 */
.box {
    width: 300px; /* 内容宽度 */
    padding: 20px; /* 内边距 */
    border: 5px solid #000; /* 边框 */
    margin: 15px; /* 外边距 */
}

/* 优先级从高到低 */
#id { }          /* ID选择器 */
.class { }       /* 类选择器 */
element { }      /* 元素选择器 */

function outerFunction() {
    let outerVariable = 'I am outside!';
    
    function innerFunction() {
        console.log(outerVariable); // 可以访问外部作用域的变量
    }
    
    return innerFunction;
}

const myInnerFunc = outerFunction();
myInnerFunc(); // 输出 "I am outside!"

// Promise示例
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('数据获取成功');
        }, 2000);
    });
};

fetchData().then(data => {
    console.log(data); // 输出 "数据获取成功"
});

// 添加元素
const newDiv = document.createElement('div');
newDiv.innerText = 'Hello, World!';
document.body.appendChild(newDiv);

// 删除元素
const elementToRemove = document.querySelector('.remove-me');
if (elementToRemove) {
    elementToRemove.remove();
}

<!-- 合并多个CSS文件 -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="responsive.css">

<!-- 使用webpack或gulp合并 -->

<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazy-load" alt="Lazy loaded image">

<script>
document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('.lazy-load');
    const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    };

    const lazyLoad = (image) => {
        image.src = image.dataset.src;
        image.classList.remove('lazy-load');
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                lazyLoad(entry.target);
                observer.unobserve(entry.target);
            }
        });
    }, options);

    lazyImages.forEach(image => {
        observer.observe(image);
    });
});
</script>

<!-- 示例：使用CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.com;">

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

import React from 'react';

function App() {
  const [message, setMessage] = React.useState('Hello React!');

  return <div>{message}</div>;
}

export default App;