[Javascript]JQ点击svg的某一区域后根据区域的id和后台传来的数据做对比/和一些总结

 

• 关于Flex布局

大名鼎鼎的flex布局，做PC自适应的话真的棒呆了，你不需要在套div做媒体查询

但是不细说吧，可以去看其他总结，我本人觉得最常见第一就是居中，中线对其，懂自动换行

父：

    justify-content: center;//在主轴中线对其
    align-items: center;//在交叉轴对齐
    display: flex;
    flex-wrap: wrap;//自动换行

子：给宽高即可

• 关于居中

这里说的position:flexd的居中，它普通的margin 0 auto满足不了，应该

    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

• 关于阿里icon的使用

最最最推荐应该是svg的形成==》symbol，其他多多少少会有bug，用unicode的时候居然缩放窗口就不断请求……醉人

具体看官网下个包里面一应俱全

• svg的刷新

多操作dom.innerHtml（前提是你执行了方法却死都刷新不了的情况下..

        levelMapList = $('.level')
        floorShowSvg.innerHTML = levelMapList[selectedLevel].innerHTML;

• 关于svg+JQ

svg是有层级关系的，因为我需要用到后台传来的图添加点击事件（推荐冒泡），但是后台的图美工搞得乱七八糟的，有些text在图的上方就会将我要点击的区域覆盖掉，所以要用JQ操作dom

• 后台获取svg

先创建一份父级的dom，调用回调的话很方便操作pro

  $("#floor-show-svg").load("http://v5.sh-fengze.com:8007/bi/api/file/floor/PD01T1",
            function (responseText, textStatus) {
                if (textStatus === 'success') {
                    let svg = $("#floor-show-svg").find('svg')[0];
                    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')
                    svg.setAttribute('width', '100%')
                    svg.setAttribute('height', '100%')

                    $($(svg).find('style')[0]).remove()
                    fillSvgClass(svg)
                    fetchData.initMainSvg()
                    Tool.setNavigationState()
                } else {
                    alert("请求失败")
                }
            });

• 关于JQ的find

第一个是查找svg所有id包含-的图像

第二个是第一个的非

    let fillterSvg = $(svg).find("rect[id*='-'],path[id*='-'],polygon[id*='-']")
    let SvgBG = $(svg).find("rect:not([id*='-']),path:not([id*='-']),polygon:not([id*='-'])")
    let TextList = $(svg).find('text')

• 关于JQ的prepend

我当时还苦恼怎么操作svg的层级，但是JQ的这个方法是直接对dom操作，它找到我要的dom直接移动了……good

    $($(svg).find('g')[0]).prepend(SvgBG)
    $($(svg).find('g')[0]).prepend(TextList)

• SVG每个图的点击事件（冒泡处理）+数据对比

我需要点击svg的某一区域后根据区域的id和后台传来的数据做对比，最好的方法就是冒泡了

而这里有ES6写法

yourarrays.find(obj => obj.id === target.getAttribute('id')能快速找到后台数据对比

        $('#floor-show-svg').on('click', 'g', function (e) {
            fetchData.getFloorItem()
            let i = 0;
            let ev = e || window.event;
            let target = ev.target || ev.srcElement
            let nodeName = target.nodeName.toLowerCase()
            if (nodeName === 'rect' || nodeName === 'path' || nodeName === 'polygon') {
                if (target.getAttribute('id').indexOf("-") !== -1) {
                    let floorData = ListDetailData.find(obj => obj.id === target.getAttribute('id'))
                    if (floorData !== undefined) {
                        let floorShowSvg = $("#floor-show-svg")
                        $(floorShowSvg).css("opacity", ".1")
                        classie.add(mallNav, "mallnav--hidden");
                        floorShowSingle.show();
                        floorShowButton.show();
                        let dataList = []
                        dataList.push(floorData.items[0].value)
                        dataList.push(floorData.items[2].value)
                        dataList.push(floorData.items[3].value)
                        dataList.push(floorData.items[4].value)
                        dataList.push(floorData.items[1].value)
                        items.forEach(x => {
                            return x.innerText = dataList[i++]
                        })

                        storeItem[0].innerText = dataList[4]

                        setTimeout(function () {
                            $('#loading2').css("display", "none");
                        }, 1000);


                    }

                }
            }


            ev.preventDefault()

        })

• JQ的AJAX

用ES6 的promise和generator或者asyn

由于我不打算重构了，所以提醒以后可以尝试用这几个写