抖音短視頻系統開發這麼火，開源一個消息UI組件如何？

功能點
（1）消息發送支持單個或一次發送多個
（2）消息進入有漸變動畫
（3）消息內容支持自定義html
（4）往上瀏覽歷史時自動關閉滾動到最新消息
（5）消息區域頂部半透明（這個暫未實現，還沒想到好的實現辦法）
實現
組件本身代碼只有80行，一個構造函數liveMessage，一個消息發送函數send；實在沒太多可講的，你如果感興趣可以花5分鐘讀一下哦；附上代碼,本文主要介紹使用爲主

(function (win, doc) {
    "use strict";
    function liveMessage(container, options) {
        if (!container) {
            throw 'parent element is null'
        }
        var myParentEle = document.createElement('div');
        myParentEle.className = 'mobile-live-message-box';
        myParentEle.style.width = '100%';
        myParentEle.style.height = '100%';
        myParentEle.style.overflow = 'auto';
        container.appendChild(myParentEle)
        var contentBox = document.createElement('div');
        contentBox.className = 'mobile-live-message-content-box';
        myParentEle.appendChild(contentBox);
        this.parentElement = contentBox;
        this.options = {...options};
        this.stopScroll = false;
        myParentEle.addEventListener('touchend', (e) => {
            var bottomLen = Math.abs(myParentEle.scrollTop - (contentBox.offsetHeight - myParentEle.offsetHeight));
            if (bottomLen > 30) {
                console.log('停止自動滾動底部')
                this.stopScroll = true;
                setTimeout(() => {
                    this.stopScroll = false;
                }, 50000)
            } else {
                console.log('開啓滾動')
                this.stopScroll = false;
            }
        })
    }

    liveMessage.prototype.send = function (data) {
        var div = document.createElement('div');
        div.className = 'mobile-live-message-item'
        let str = '';
        if (data instanceof Array) {
            for (let index = 0; index < data.length; index++) {
                const mesItem = data[index];
                let content = mesItem;
                if (mesItem instanceof Object) {
                    content = mesItem.text;
                }
                if (this.options.format) {
                    content = this.options.format(mesItem);
                }
                str += `<div class="mobile-live-message-item-text">${content}</div>`
            }
        } else if (data instanceof Object) {
            let content = data.text;
            if (this.options.format) {
                content = this.options.format(data)
            } 
            str = `<div class="mobile-live-message-item-text">${content}</div>`
        } else {
            str = `<div class="mobile-live-message-item-text">${data || ''}</div>`
        }
        div.innerHTML = str;
        this.parentElement.appendChild(div);
        if (this.stopScroll) {
            return;
        }
        this.parentElement.parentElement.scroll({ top: div.offsetTop, left: 0, behavior: 'smooth' });
    }
    // smoothscroll-polyfill
    // 此處省略smoothscroll-polyfill源代碼，具體可以去github查看全部代碼
    if (typeof module !== 'undefined' && module.exports) {
      module.exports = liveMessage;
    };
    if (typeof define === 'function') define(function() { 
      return liveMessage; 
    });
    win.liveMessage = liveMessage;
 })(window, document)

安裝插件

//npm
npm i mobile-live-message --save;
//cdn
<script src="./src/lib/index.js"></script>

複製代碼初始化插件

var parentBox = document.querySelector('#container')
var Mes = new liveMessage(parentBox,{})

複製代碼發送單條消息

var mesStr = '你好';
var mesObj = {
    text: '你好'
}
Mes.send(mesStr);
Mes.send(mesObj);

發送多條消息

var mesArrayStr = ['你好','你好'];
var mesArrayObj = [
    {
        text: '你好'
    },
    {
        text: '你好'
    }
]
Mes.send(mesArrayStr);
Mes.send(mesArrayObj);

消息自定義

初始化插件的時候可以傳入fotmat參數，如下
var Mes = new liveMessage(parentBox, {
    format: function(mesItem) {
        if (mesItem.type === 'rocket') {
            return `<img src="${RocketIcon}" class="icon icon-rocket"/><span>${mesItem.text}</span>`
        } else if (mesItem.type === 'flower') {
            return `<img src="${FlowerIcon}" class="icon icon-flower"/><span>${mesItem.text}</span><img src="${FlowerIcon}" class="icon icon-flower"/>`
        } else if (mesItem.type === 'face') {
            return `<img src="${FaceIcon}" class="icon icon-face"/><span>${mesItem.text}</span>`
        }
        
    }
});
 var data = [
            {
                type: 'rocket',
                text: '小火箭飛一個'
            }
        ]
Mes.send(data);