原生js用MVVM的思想实现简易滑动条

接上一节进度条的demo，这节实现的是滑动条

div {
            margin-bottom: 10px;
            height: 40px;
        }

        .third,
        .first,
        .second {
            background: green;
            margin-top: 30px;
            position: relative;
        }

        .first b,
        .second b {
            position: absolute;
            top: -20px;
        }

        .ui-progressbar {
            background: red;
            height: inherit;
            color: #fff;
            line-height: 40px;
            text-align: center;

        }

        .progressText {
            position: absolute;
            top: -20px;
        }

        .progress {
            background: gray;
        }

        .bar {
            display: inline-block;
            width: 20px;
            height: 40px;
            background: red;
            position: absolute;
            top: 0;
            cursor: pointer;
        }

    <div class="first" data-bind="type:'slider',data:demo2">1</div>
    <div class="second" data-bind="type:'slider',data:demo2"></div>
    <div class="third" data-bind="type:'progressBar',data:demo1"></div>
    <div class="third" data-bind="type:'progressBar',data:demo3"></div>

~(function () {
            //(0, eval)('this')其实这里的this就是指向全局对象
            var window = this || (0, eval)('this')
            var FONTSIZE = function () {
                return parseInt(document.body.currentStyle ? document.body.currentStyle['fontSize'] : getComputedStyle(document.body, false)['fontSize'])
            }()
            var VM = function () {
                var Method = {
                    progressBar(dom, data) {
                        var progress = document.createElement('div')
                        let timer = null
                        params = data.data
                        progress.style.width = (params.position || 100) + '%'
                        if (params.flag) {
                            timer = setInterval(() => {
                                console.log(params.position, 'params.position');
                                if (params.position == 100) {
                                    alert("加载完毕")
                                    clearInterval(timer)
                                } else {

                                    params.position += 1
                                    progress.style.width = params.position + '%'
                                    progress.innerHTML = params.position + '%'
                                }

                            }, 100)
                        }
                        progress.className = 'ui-progressbar'
                        dom.appendChild(progress)
                    },
                    slider(dom, data) {
                        //小拨片
                        var bar = document.createElement('span'),
                            progress = document.createElement('div'),
                            totalText = null,
                            progressText = null,
                            param = data.data,
                            width = dom.clientWidth,
                            left = dom.offsetLeft,
                            realWidth = (param.position || 100) * width / 100;
                        dom.innerHTML = ''
                        if (param.totle) {
                            //容器总量的提示文案
                            text = document.createElement('b')
                            //拨片位置提示文案
                            progressText = document.createElement('em')
                            progressText.className = 'progressText'
                            text.innerHTML = param.totle
                            // dom.appendChild(text)
                            dom.appendChild(progressText)

                        }
                        bar.className = "bar"
                        setStyle(realWidth)
                        dom.className += ' ui-slider'
                        progress.className = 'progress'
                        dom.appendChild(progress)
                        dom.appendChild(bar)
                        bar.onmousedown = function () {
                            document.onmousemove = function (e) {
                                var e = e || window.event;
                                var w = e.clientX - left;
                                setStyle(w < width ? (w > 0 ? w : 0) : width)
                            }
                            document.onmouseup = function () {
                                // bar.onmousedown = null
                                document.onmousemove = null
                            }
                            document.onselectstart = function () {
                                return false
                            }
                        }
                        function setStyle(w) {
                            progress.style.width = w + 'px'
                            bar.style.left = w - FONTSIZE / 2 + 'px'
                            if (progressText) {
                                progressText.style.left = w - FONTSIZE / 2 * 2.4 + 'px'
                                progressText.innerHTML = parseFloat(w / width * 100).toFixed(2) + '%'
                            }
                        }
                    }
                }
                // debugger
                function getBindData(dom) {
                    var data = dom.getAttribute('data-bind')
                    console.log(data, '9999')
                    return !!data && (new Function("return ({" + data + "})"))()
                    // return !!data && { data }
                }
                return function () {
                    var doms = document.body.getElementsByTagName("*"), ctx = null
                    for (var i = 0; i < doms.length; i++) {
                        ctx = getBindData(doms[i])
                        console.log(ctx, '00');
                        ctx.type && Method[ctx.type] && Method[ctx.type](doms[i], ctx)
                    }
                }
            }()
            window.VM = VM

        })()
        var demo1 = {
            position: 20,
            total: 200,

        }
        var demo3 = {
            position: 10,
            total: 200,
            flag: true
        }

        var demo2 = {
            position: 20,
            totle: 200
        }
        window.onload = function () {
            VM()
        }

这样就实现了mvvm的实现创建组件的方法~~~