JavaScript 核心语法与高级实践

function runHello() {
    const message = "Hello, XiaoYu Tech JavaScript World!";
    console.log(message); // 将调试日志输出至浏览器的开发者工具台
    // 动态检索DOM节点并重写网页节点内的纯文本，向用户展示直观反馈
    document.getElementById('app').textContent = message;
}

async function fetchRemotePayload(endpoint) {
    try {
        // 遇到 await 关键字，单线程引擎会暂时交出控制权挂起，绝不发生物理线程死锁阻塞
        const response = await fetch(endpoint);
        if (!response.ok) throw new Error('网络通讯发生异常状态码');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('拦截异步调用链条异常:', error);
    }
}

const techProducts = [
    { name: 'MacBook Pro', price: 19999, category: 'PC' },
    { name: 'iPhone 15 Pro', price: 8999, category: 'Mobile' },
    { name: 'iPad Pro', price: 6999, category: 'Tablet' }
];

// 过滤高客单价电子产品 -> 独立抽出全部价格 -> 链式累加计算总营业额
const premiumTotalRevenue = techProducts
    .filter(item => item.price > 7000)
    .map(item => item.price)
    .reduce((accumulator, currentPrice) => accumulator + currentPrice, 0);

function createSecureCounter() {
    let secureCount = 0; // 该局部内部变量被彻底常驻锁定在当前的闭包作用域中，外部无权暴力篡改
    return {
        increment: function() {
            secureCount++;
            return secureCount;
        },
        getValue: function() { return secureCount; }
    };
}
const counter = createSecureCounter();

function debounce(fn, delayMs) {
    let timerId = null;
    return function(...args) {
        // 每次触发，立即无条件绞杀上一个尚未执行完的定时器，重新开启倒计时计数
        if (timerId) clearTimeout(timerId);
        timerId = setTimeout(() => {
            fn.apply(this, args);
        }, delayMs);
    };
}

class SoftwareEngineer {
    constructor(name, lang) {
        this.name = name;
        this.mainLanguage = lang;
    }
    introduce() {
        return `我是工程师 ${this.name}, 擅长 ${this.mainLanguage}`;
    }
}

class WebArchitect extends SoftwareEngineer {
    introduce() {
        return `${super.introduce()}，目前全职负责全栈架构演进。`;
    }
}

const systemConfig = { host: '127.0.0.1', port: 9000, auth: { role: 'root' } };
// 一行代码深度提取嵌套属性，并重命名别名变量，赋初始默认防崩溃初值值
const { host, port: servicePort, auth: { role }, status = 'active' } = systemConfig;

console.log('1');
setTimeout(() => console.log('2'), 0); // 宏任务：会被挂载到宏任务队列尾部调度
Promise.resolve().then(() => console.log('3')); // 微任务：会在当前轮次执行栈排空后立即插队抢占执行
console.log('4');
// 输出流顺序依次为: 1 -> 4 -> 3 -> 2

const ulElement = document.querySelector('#tech-list');
// 不去对上万个 li 子节点单独设立监听器，而是将网捕向它们共同的物理父节点
ulElement.addEventListener('click', (event) => {
    if (event.target && event.target.nodeName === 'LI') {
        console.log('成功捕获到指定子列表项点击行为，内容:', event.target.innerText);
    }
});

// utils.js 文件模块
export const formatCurrency = (amount) => `$${amount.toFixed(2)}`;
export default class Logger { log(msg) { console.log(msg); } }

// main.js 应用文件入口
import Logger, { formatCurrency } from './utils.js';