社交页面设计与架构解析

document.addEventListener('DOMContentLoaded', function() {
    const tabItems = document.querySelectorAll('.tab-item');
    const panels = document.querySelectorAll('.content-panel');

    tabItems.forEach(function(item) {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            var targetTab = this.getAttribute('data-tab');
            
            // 更新Tab状态
            tabItems.forEach(function(tab) { 
                tab.classList.remove('active'); 
            });
            this.classList.add('active');
            
            // 切换内容面板
            panels.forEach(function(panel) {
                panel.classList.remove('active');
            });
            const activePanel = document.getElementById(targetTab + '-panel');
            if (activePanel) activePanel.classList.add('active');
            
            // 更新URL Hash
            history.pushState(null, null, '#' + targetTab);
        });
    });
});

// 使用loading="lazy"属性
<img src="..." loading="lazy" alt="...">

// 或Intersection Observer实现
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
});

function loadMore(listId) {
    const list = document.getElementById(listId);
    const hiddenItems = Array.from(list.querySelectorAll('.expandable-item'))
        .filter(el => el.style.display === 'none');
    
    // 每次加载10条
    for (let i = 0; i < Math.min(hiddenItems.length, 10); i++) {
        hiddenItems[i].style.display = '';
    }
    
    // 隐藏按钮如果全部加载完成
    const remaining = list.querySelectorAll('.expandable-item[style*="display: none"]');
    if (remaining.length === 0) {
        const btn = list.parentElement.querySelector('.load-more-btn');
        if (btn) btn.style.display = 'none';
    }
}

// 面板配置
const panels = {
    'posts': { 
        title: 'Broadcast',
        dataSource: 'douban',
        template: 'feed-item'
    },
    'blogs': { 
        title: 'Blogs',
        dataSource: 'blogs',
        template: 'blog-card'
    },
    'patents': { 
        title: 'Patents',
        dataSource: 'patents',
        template: 'patent-card'
    },
    'media': { 
        title: 'Media',
        dataSource: ['books', 'movies', 'games'],
        template: 'media-grid'
    }
};

// 动态注册面板
function registerPanel(key, config) {
    panels[key] = config;
    renderTab(key, config);
}