js写一个弹窗消息提醒插件_js好看的消息提示框

/* 这个动画规则我们就叫做message-move-in吧，随后我们会用animation属性在某个元素上应用这个动画规则。 /
@keyframes message-move-in {
0% {
/ 前边分析过了，弹出动画是一个自上而下的淡入过程 /
/ 所以在动画初始状态要把元素的不透明度设置为0，在动画结束的时候再把不透明度设置1，这样就会实现一个淡入动画 /
opacity: 0;
/ 那么“自上而下”这个动画可以用“transform”变换属性结合他的“translateY”上下平移函数来完成 /
/ translateY(-100%)表示动画初始状态，元素在实际位置上面“自身一个高度”的位置。 /
transform: translateY(-100%);
}
100% {
opacity: 1;
/ 平移到自身位置 */
transform: translateY(0);
}
}

然后我们再定义一个和`message`元素同级的类`move-in`，把`message-move-in`这个动画规则给应用到`move-in`类上，这样我们需要让哪个消息弹出，就只需要在消息的类上加一个`move-in`就行。

/* message.css */

#message-container .message.move-in {
/* animation属性是用来加载某个动画规则 请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */
animation: message-move-in 0.3s ease-in-out;
}

用这个`move-in 的效果如下：`


![弹出动画](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yOTE1ODQ4LWU0ZTQ1ZjFlMjlmNjk3MDUuZ2lm)


 可以看到，只需要在某个message上追加一个`move-in`就能实现弹出动画。  
 那么，消失动画也是一个套路，只不过跟弹出动画反过来而已。

/* message.css */

@keyframes message-move-out {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100%);
}
}

#message-container .message.move-out {
animation: message-move-out 0.3s ease-in-out;
/* 让动画结束后保持结束状态 */
animation-fill-mode: forwards;
}

`animation-fill-mode: forwards;`这个是干嘛的呢？因为动画结束后默认会回到元素的最初状态，在这里表现的是消失后又出现了，如图：


![动画结束后的状态](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yOTE1ODQ4LTk0NmI4YWY4NDhmNTFkMWEuZ2lm)


所以`animation-fill-mode: forwards;`是为了让动画结束后保持这个结束状态，也就是不在显示了。


![动画结束后保持结束的状态](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yOTE1ODQ4LTg0MTU3MDZjMzI0M2MyYzMuZ2lm)



## 4. 编写js插件


那么，在写js之前呢，我们先来思考一下，如果你是插件的使用者，你想怎么来调用这个插件？  
 我们的插件很简单，就是在需要的时候弹出一个消息，假设插件他提供给我们的是一个类，就叫做`Message`吧，并且他内部有一个`show`方法，那么只要使用者实例化这个类后，调用他的`show`方法，然后传入不同的参数就可以弹出一个消息了。而且我们所实例化的对象可以是全局唯一的。

 所以呢，我们要先写一个Message类，并且必须要实现一个show方法。

/* message.js */

class Message {
constructor() {

}

show({ type = 'info', text = '' }) {

}

}

这里我直接用了es6的`class`关键词，其实他的内部还是原型链的形式。用`class`呢，可以让我们更直观的了解这个类。


根据我们在第一部分的分析，所有的消息元素都是需要在js中创建的，所以我们不需要使用者来写任何html代码，那么我们只需要在对象被实例化`new Message()`的时候，就去创建消息容器`message-container`，后续在调用`show`方法时候，直接把消息插入到`message-container`内部即可。

/* message.js */

class Message {

/**
 * 构造函数会在实例化的时候自动执行
 */
constructor() {
    const containerId = 'message-container';
    // 检测下html中是否已经有这个message-container元素
    this.containerEl = document.getElementById(containerId);

    if (!this.containerEl) {
        // 创建一个Element对象，也就是创建一个id为message-container的dom节点
        this.containerEl = document.createElement('div');
        this.containerEl.id = containerId;
        // 把message-container元素放在html的body末尾
        document.body.appendChild(this.containerEl);
    }
}

show({ type = 'info', text = '' }) {

}

}

这样，我们调用`const message = new Message()`的时候会在dom中自动的插入一个`message-container`节点。  
 那么，最重要的还是我们的`show`方法：



> 
> 1. **创建一个消息节点**，并把它追加到`message-container`容器的末尾。
> 2. **设定一个时间**，在这个时间结束后自动的将消息移除。
> 3. **监听“关闭按钮”的`click`事件**，来让用户可以手动的移除消息。
> 
> 
> 


我们一步一步来。


**4.1 创建一个消息节点，并把它追加到`message-container`容器的末尾。**

class Message {

// 省略...

show({ type = 'info', text = '' }) {
    // 创建一个Element对象
    let messageEl = document.createElement('div');
    // 设置消息class，这里加上move-in可以直接看到弹出效果
    messageEl.className = 'message move-in';
    // 消息内部html字符串
    messageEl.innerHTML = `
        <span class="icon icon-${type}"></span>
        <div class="text">${text}</div>
        <div class="close icon icon-close"></div>
    `;
    // 追加到message-container末尾
    // this.containerEl属性是我们在构造函数中创建的message-container容器
    this.containerEl.appendChild(messageEl);
}

}

我们来调用下试试~

<button class="btn">弹窗消息提醒</button>

<script>
    // message可以定义为全局对象，项目中可以直接调用。
    const message = new Message();
    document.querySelector('.btn').addEventListener('click', () => {
        message.show({
            type: 'success',
            text: '点个关注不迷路~'
        });
    });

</script>

![弹出成功](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yOTE1ODQ4LTJiYTk4ZWQ5OTdlODc4NjguZ2lm)


**4.2 设定一个时间，在这个时间结束后自动的将消息移除。**

// message.js

class Message {

// 省略...

show({ type = 'info', text = '', duration = 2000 }) {
    // 省略...

    // 用setTimeout来做一个定时器
    setTimeout(() => {
        // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
        messageEl.remove();
    }, duration);
}

}

![消息自动移除](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yOTE1ODQ4LWJhZTA1Mjc0NDg2MzA5YjEuZ2lm)


可以看到，消息在过了2秒后，自动的从dom树中移除了，不过呢并没有动画，还记得前边我们写了`move-out`类吗？这个类和`message`是同级的。现在我们只需要在定时结束后把这个类应用到`message`元素上就行。

// message.js

class Message {

// 省略...

show({ type = 'info', text = '', duration = 2000 }) {
    // 省略...

    // 用setTimeout来做一个定时器
    setTimeout(() => {
        // 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下
        messageEl.className = messageEl.className.replace('move-in', '');
        // 增加一个move-out类
        messageEl.className += 'move-out';

        // 这个地方是监听动画结束事件，在动画结束后把消息从dom树中移除。
        // 如果你是在增加move-out后直接调用messageEl.remove，那么你不会看到任何动画效果
        messageEl.addEventListener('animationend', () => {
            // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
            messageEl.remove();
        });
    }, duration);
}

}

 注意观察dom树的变化：


![消失动画](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yOTE1ODQ4LTU3MWUyYmU1NzdlMGU1YmQuZ2lm)


**4.3 监听“关闭按钮”的`click`事件，来让用户可以手动的移除消息。**


有时候呢，我们希望消息能够一直展示，直到用户来手动的关闭掉，那么首先我们要加一个参数，用来控制是否展示这个关闭按钮。

// message.js

class Message {

// 省略...

show({ type = 'info', text = '', duration = 2000, closeable = false }) {
    // 创建一个Element对象
    let messageEl = document.createElement('div');
    // 设置消息class，这里加上move-in可以直接看到弹出效果
    messageEl.className = 'message move-in';
    // 消息内部html字符串
    messageEl.innerHTML = `
        <span class="icon icon-${type}"></span>
        <div class="text">${text}</div>
    `;

    // 是否展示关闭按钮
    if (closeable) {
        // 创建一个关闭按钮
        let closeEl = document.createElement('div');
        closeEl.className = 'close icon icon-close';
        // 把关闭按钮追加到message元素末尾
        messageEl.appendChild(closeEl);

        // 监听关闭按钮的click事件，触发后将调用我们的close方法
        // 我们把刚才写的移除消息封装为一个close方法
        closeEl.addEventListener('click', () => {
            this.close(messageEl)
        });
    }

    // 追加到message-container末尾
    // this.containerEl属性是我们在构造函数中创建的message-container容器
    this.containerEl.appendChild(messageEl);

    // 只有当duration大于0的时候才设置定时器，这样我们的消息就会一直显示
    if (duration > 0) {
        // 用setTimeout来做一个定时器
        setTimeout(() => {
            this.close(messageEl);
        }, duration);
    }
}

/**
 * 关闭某个消息
 * 由于定时器里边要移除消息，然后用户手动关闭事件也要移除消息，所以我们直接把移除消息提取出来封装成一个方法
 * @param {Element} messageEl
 */
close(messageEl) {
    // 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下
    messageEl.className = messageEl.className.replace('move-in', '');
    // 增加一个move-out类
    messageEl.className += 'move-out';

    // 这个地方是监听动画结束事件，在动画结束后把消息从dom树中移除。
    // 如果你是在增加move-out后直接调用messageEl.remove，那么你不会看到任何动画效果
    messageEl.addEventListener('animationend', () => {
        // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
        messageEl.remove();
    });
}

}

 我们来调用下试试~

<button class="btn">弹窗消息提醒</button>

<script>
    // message可以定义为全局对象，项目中可以直接调用。
    const message = new Message();
    document.querySelector('.btn').addEventListener('click', () => {
        message.show({
            type: 'warning',
            text: '点我旁边的叉叉试试',

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。