🖥️ NodeJS专栏：Node.js从入门到精通
🖥️ 博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长的万字自述）
🖥️ TypeScript知识总结：TypeScript从入门到精通（十万字超详细知识点总结）
🧑‍💼个人简介：大三学生，一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！
🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站，点击跳转🍬

文章目录

前言
1、选择器组件
- 效果演示
- 案例需求
- JavaScript实现
2、简易计算器
- 效果演示
- 案例需求
- JavaScript实现
结语

前言

最近博主一直在牛客网刷题巩固基础知识，牛客网不仅具有公司真题、专项练习、面试题库、在线编程等功能，还具有非常强大的AI模拟面试功能，简直是求职者的福音！

牛客网里的题库非常全面的，无论你是前端还是后端，是想要备考还是准备面试又或者是想要提高自己，你都能在牛客网上找到适合自己的题，赶快点击链接去注册登录吧：点我进入牛客网

牛客网	牛客网

本篇文章所有示例来自于牛客网题库/在线编程/JS篇，这些都是前端开发中常用的功能，借此记录一下刷题过程，巩固基础！

1、选择器组件

效果演示

在这里插入图片描述

有以下HTML和CSS：

HTML结构

<div id="jsCheckGroup">
    <div class="checkgroup radius">
        <div data-val="a" class="item selected">选项a</div>
        <div data-val="b" class="item">选项b</div>
        <div data-val="c" class="item">选项c</div>
        <div data-val="d" class="item">选项d</div>
    </div>
</div>

CSS样式

.checkgroup .item{
    height: 42px;
    line-height: 42px;
    padding: 0 10px;
    margin: 10px 0;
    border: 1px solid #c7c7c7;
    border-radius: 6px;
}
.checkgroup.radius .item{
    border-radius: 21px;
}
.checkgroup .item.selected{
    border: 1px solid #08b292;
    background: #08b292;
    color: #ffffff;
}

案例需求

CheckGroup是一个选择组件类，支持单选和多选选项参数格式、调用方式如下

选项参数格式：

var options = [{text: '选项a', value: 'a'}, {text: '选项b', value: 'b'}, {text: '选项c', value: 'c'}, {text: '选项d', value: 'd'}];

实例化单选组件：

var item = new CheckGroup(document.getElementById('jsCheckGroup'), options);
item.val(['a']);

实例化多选组件：

var item = new CheckGroup(document.getElementById('jsCheckGroup'), options, true);
item.val(['a']);

具体功能和需求如下：

单选组件请在 div.checkgroup 元素加上class radius。
选中时，请在对应选项dom元素加上class selected。
点击单选选项，如果未选中当前选项则选中当前选项并取消其他选项，否则取消当前选项。
点击多选选项，如果未选中当前选项则选中当前选项，否则取消当前选项。
给定的options中, text和value属性的值均为非空字符串。
val方法的参数和返回值均为数组(单选时数组长度不超过)。

JavaScript实现

// renderTo代表父容器，options为配置对象，isMultiple是否多选
function CheckGroup(renderTo, options, isMultiple) {
    var that = this;
    that.renderTo = renderTo;
    that.options = options;
    that.isMultiple = !!isMultiple;
    // 初始化模板
    that.initHtml();
    // 初始化事件
    that.initEvent();
}

// 挂载方法
CheckGroup.prototype.initHtml = fInitHtml;
CheckGroup.prototype.initEvent = fInitEvent;
CheckGroup.prototype.toggleEl = fToggleEl;
CheckGroup.prototype.isSelected = fIsSelected;
CheckGroup.prototype.val = fVal;

// 初始化模板
function fInitHtml() {
    var that = this;
    // 请补全代码，拼接html字符串
    var sHtml = `
    <div class="checkgroup${!that.isMultiple ? ' radius' : ''}">
        ${that.options.map(item => `<div data-val="${item.value}" class="item">${item.text}</div>`).join('')}
    </div>
        `
    that.renderTo.innerHTML = sHtml;
    // 请补全代码，获取checkgroup的dom元素引用
    that.el = document.getElementsByClassName('checkgroup')[0];
}

// 初始化事件
function fInitEvent() {
    var that = this;
    // 添加点击事件
    that.el && that.el.addEventListener('click', function (event) {
        var item = event.target;
        item.classList.contains('item') && that.toggleEl(item);
    });
}

// 点击事件处理函数
function fToggleEl(item) {
    // 根据当前是单选还是多选，以及当前元素是否选中，高亮/取消���亮指定的选项dom元素
    var that = this;
    if (that.isSelected(item)) {
        // 请补全代码
        // 当前元素以及被选中，则取消选中
        item.classList.remove('selected')
    } else if (that.isMultiple) {
        // 请补全代码
        // 多选时直接添加selected
        item.classList.add('selected')
    } else {
        // 请补全代码
        // 单选时先遍历取消所有的选中再选中当前元素
        var sel = that.el.getElementsByClassName('selected')[0]
        sel && sel.classList.remove('selected')
        item.classList.add('selected')
    }
}

// 判断item是否选中
function fIsSelected(item) {
    // 请补全代码，判断item是否选中
    // Element.classList 是一个只读属性，返回一个元素 class 属性的动态 DOMTokenList 集合。
    // DOMTokenList接口的 contains() 方法返回 Boolean (en-US) 类型。若传入的参数 token 包含在列表中时则返回true，否则返回 false。
    return item.classList.contains('selected');
}

// 设置/返回选中元素
function fVal(values) {
    var that = this;
    // 没有接受参数时该函数的作用是返回选中的数组
    if (arguments.length === 0) {
        // 请补全代码，获取高亮的选项元素
        var items = that.el.getElementsByClassName('selected');
        // 请补全代码，获取高亮的选项元素的data-val
        return [].map.call(items, item => item.getAttribute('data-val'))

    }
    // 接收参数时，该函数表示设置选中
    !that.isMultiple && values.length > 1 && (values.length = 1);
    // 请补全代码，获取所有的选项元素
    var its = that.el;
    // 请补全代码，在指定元素上加上高亮的class
    values.forEach(val => {
        let el = its.querySelector(`.item[data-val="${val}"]`);
        // 交给点击事件处理函数
        that.toggleEl(el);
    });
}


// 测试
var options = [{ text: '选项a', value: 'a' }, { text: '选项b', value: 'b' }, { text: '选项c', value: 'c' }, { text: '选项d', value: 'd' }];
// var item = new CheckGroup(document.getElementById('jsCheckGroup'), options);
// 多选
var item = new CheckGroup(document.getElementById('jsCheckGroup'), options, true);
item.val(['a', 'c']);
console.log(item.val());

这个案例中多次用到call来改变方法的this指向，因为获取的DOM集合是一种伪数组并不是真正的数组，不具有数组的方法，所以我们想要在它上面使用数组的方法时就需要先在一个确定的数组上调用方法再通过call将方法的this指向到它。

知识点：

修改this指向，call，bind，apply方法的使用，在前几期JS题解中我们对其讲解过，具体可见：https://ailjx.blog.csdn.net/article/details/126730075
Element.classList 是一个只读属性，返回一个元素 class 属性的动态 DOMTokenList 集合。
DOMTokenList.contains() 方法返回 Boolean 类型。若传入的参数包含在列表中时则返回true，否则返回 false。

2、简易计算器