手动实现超级实用的Tab插件

朴灿烈づ我的快乐病毒、 2022-10-22 11:57 215阅读 0赞

工作之余训练js的基本功还是挺重要的一件事，所以就动手写了一个简单的js插件。  
首先写一个东西，在脑子里要先有一个模型，然后功能点，最后是有一个完整的思路，这三个必不可少。至少我是这么觉得的，虽然这只是一个非常基础的东西。  
那接下来就是说说我的思路吧，

1.  提供接口给外面，让用户传入数据 包括有 \{宽度，高度，Tab的模式(提供了slide和fade)，data数据，el元素\}
2.  获取被渲染的元素el，挂载Dom
3.  创建Tab，根据data数据来创建Item的数量,
4.  初始化事件绑定
5.  最后就跟据事件处理函数来实现效果

代码如下  
Html  
基本的样式先写

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Document</title>
        <style>
            .tab .tab_title { 
                height: 50px;
                display: flex;
                border-bottom: 1px solid #000;
            }
            
            .tab .tab_title .tab_item { 
                color: #000;
                flex-grow: 1;
                text-align: center;
                cursor: pointer;
                line-height: 50px;
                border-right: 1px solid #000;
            }
            
            .tab .tab_title .active { 
                color: #fff;
                background-color: #aaa;
            }
            
            .tab .tab_title .tab_item:nth-last-child(1) { 
                border-right: 0;
            }
            
            .tab .tab_content { 
                width: 100%;
                height: 450px;
                position: relative;
                overflow: hidden;
            }
            
            .tab .tab_content .tab_block { 
                position: absolute;
                height: 100%;
                left: 0;
                transition: left .2s ease-in-out;
            }
            
            .tab .tab_content .tab_content_item { 
                opacity: 0;
                transition: opacity .3s ease-in-out;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
    
        </div>
        <script type="text/javascript " src="tab.js "></script>
    </body>
    
    </html>

tab.js

!(function(doc) { 
    
        class Tab { 
    
            constructor(options) { 
                this.options = options || { };
                this.width = options.width || 300;
                this.height = options.height || 300;
                this.el = doc.querySelector(options.el) || doc.body;
                this.mode = options.mode || 'fade';
                this.data = options.data || [];
                this.init(this.el)
            }
            init(el) { 
                this.initDom(el);
                this.initStyle(this.mode);
                this.initEvent();
            }
            initEvent() { 
                let tar = doc.querySelectorAll('.tab_item');
                [...tar].forEach((item, index, arr) => { 
                    item.addEventListener('click', this.handleClick.bind(this, index, arr), false);
                })
            }
    		//初始化Dom
            initDom(el) { 
                let con = this.initTemplate(el, this.data);
                let tar = doc.createElement('div');
                tar.style.cssText = ` width: ${ this.width}px; height: ${ this.height}px; margin: 0 auto; border: 1px solid #000; `
                tar.className = 'tab';
                tar.appendChild(con);
                el.appendChild(tar);
            }
            //初始化样式
            initStyle(mode) { 
                let titleHeight = doc.querySelector('.tab .tab_title').clientHeight;
                let ContentItem = [...doc.querySelectorAll('.tab_content_item')];
                switch (mode) { 
                    case 'slide':
                        this.slideStyle(ContentItem, titleHeight)
                        break;
                    case 'fade':
                        this.fadeStyle(ContentItem, titleHeight)
                        break;
                    default:
                        this.fadeStyle(ContentItem, titleHeight);
                        break;
                }
    
            }
           //平滑模式
            slideStyle(ContentItem, titleHeight) { 
                ContentItem.forEach((item, index) => { 
                    item.style.cssText = ` position : absolute; box-sizing : border-box; left : ${ this.width * index}px; width : ${ this.width}px; height : ${ this.height - titleHeight}px; `
                })
            }
            //渐入模式
            fadeStyle(ContentItem, titleHeight) { 
                ContentItem.forEach((item, index, arr) => { 
                    item.style.cssText = ` position : absolute; box-sizing : border-box; left :0; width : ${ this.width}px; height : ${ this.height - titleHeight}px; `;
                    arr[0].style.opacity = 1;
                })
            }
            //模板拼接
            initTemplate(el, data) { 
                let fragment = doc.createDocumentFragment(),
                    eleTitle = doc.createElement('div'),
                    eleContent = doc.createElement('div'),
                    eleBlock = doc.createElement('div');
                eleTitle.className = 'tab_title';
                eleContent.className = 'tab_content';
                eleBlock.className = 'tab_block'
                eleBlock.style.width = this.width * data.length + 'px';
                let titleChild = '',
                    contentChild = '';
                data.map((item, index) => { 
                    titleChild += `<div class="tab_item ${ index==0? 'active':''}">${ item.title}</div>`;
                    contentChild += `<div class="tab_content_item ">${ item.content}</div>`;
                })
                eleTitle.innerHTML = titleChild;
                eleBlock.innerHTML = contentChild;
                eleContent.appendChild(eleBlock);
                fragment.appendChild(eleTitle);
                fragment.appendChild(eleContent);
                return fragment;
            }
            //点击事件处理函数
            handleClick(index, arr, e) { 
                let ContentItem = [...doc.querySelectorAll('.tab_content_item')];
                arr.forEach(item => { 
                    let classList = item.className.split(' ').includes('active');
                    classList && item.classList.remove("active");
                })
                e.target.classList.add("active")
                if (this.mode == "fade") { 
                    ContentItem.forEach((item, i, arr2) => { 
                        item.style.opacity = 0;
                        arr2[index].style.opacity = 1;
                    })
                } else { 
                    let tabBlock = doc.querySelector(".tab_block");
                    tabBlock.style.left = -this.width * index + 'px';
                }
            }
        }
        
        new Tab({ 
            el: '#app',
            mode: 'fade', //可以是fade或者是slide
            width: 500,
            height: 800,
            data: [{ 
                    title: "选项0",
                    content: '<h1>内容1</h1>'
                }, { 
                    title: "选项1",
                    content: '内222容1'
                },
                { 
                    title: "选项2",
                    content: '内333容2'
                },
                { 
                    title: "选项3",
                    content: '内13131容3'
                },
                { 
                    title: "选项4",
                    content: '内1313131容4'
                },
                { 
                    title: "选项5",
                    content: '内1311111111111容5'
                },
    
            ]
        })
    
    })(document);

### 技术点 ###

*  使用es6的class类
 *  模板拼接得时候只是创建了Dom，然后放入了文档碎片fragment中，然后再一次性的插入到文档中，减少了Dom的操作。
 *  根据用户传递的mode可以切换效果，后期只要添加其他参数，可以再添加一个效果函数就ok了，方便了以后扩展。

最后这个效果其实挺简单的，主要是学习思路吧。