关于js的吐槽

以后写JS的时候。

1、尽量少使用全局变量；

2、适当封装方法，强烈不建议上来就写需要逻辑执行的代码；

3、适当使用$(document).ready()或者window.onload(不建议这种写法)二者具体区别，可以自己查一下。

4、通常功能内部或者插件内部具体功能是结构化编程，对外部采用对象编程。

以上四点，仅供参考。 

   var secondLine = []; //存储一级地图的数组,需要放到一级地图的图层里;


        var firstLine = []; //存储二级地图,数组需要放到二级地图的图层里;


        /*
        1.创建自定义地图实例;
        */
        //var minZoom;
        var tileLayer = new BMap.TileLayer();


        tileLayer.getTilesUrl = function (tileCoord, zoom) {


            var x = tileCoord.x;


            var y = tileCoord.y;


            return '../../Image/pagesImgs/tiles/' + zoom + '/tile' + x + '_' + y + '.png';
        }


        var MyMap = new BMap.MapType('MyMap', tileLayer, { minZoom: 1, maxZoom: 4 });


        var map = new BMap.Map('map', { mapType: MyMap });


        map.addControl(new BMap.NavigationControl());


        map.enableScrollWheelZoom(); //添加鼠标滚轮操作;


        map.centerAndZoom(new BMap.Point(0, 0), 1);




        /*
        2.自定义构造函数(坐标点,div模块内容,弹窗内容;练习题超链接,zoom所表示视图图层zlayer,图片的链接,学习进度1);
        */
        function ComplexCustomOverlay(point, text, mouseoverText, href, zlayer, xxjd) {




            this._point = point;


            this._text = text;


            this._overText = mouseoverText;


            this._href = href;


            this._zlayer = zlayer;


            this._xxjd = xxjd;
        }


        ComplexCustomOverlay.prototype = new BMap.Overlay(); //继承Overlay接口;


        ComplexCustomOverlay.prototype.initialize = function (map) {


            this._map = map; //初始化地图;


            /*
            3添加监听事件,通过zoomend事件控制一级地图和二级地图各缩放级别默认显示要求和弹窗事件;
            */
            map.addEventListener("zoomend", function () {


                var zoom = map.getZoom(); //获取缩放级别;


                if (zoom == 1) { //默认缩放级别1时,class为1的div显示,class为2和3的div隐藏;


                    $(".1").show();
                    $(".2").hide();
                    $(".3").hide();


                    removePolylineByColor("#1C86EE", map);


                } else if (zoom == 2) {  //默认缩放级别2时,class为1和3的div显示,class为2的div隐藏;


                    $(".1").show();
                    $(".3").show();
                    $(".2").hide();


                    createLine(secondLine, map);


                } else if (zoom == 3) { //默认缩放级别4-5时,class为2的div显示,class为1和3的div隐藏;
                    $(".1").hide();
                    $(".2").show();
                    $(".3").hide();


                    div.onmouseover = function () { //默认缩放级别在3时,可通过鼠标事件控制弹窗功能;
                        this.getElementsByTagName("span")[0].innerHTML = that._overText;
                    }
                    div.onmouseout = function () {
                        this.getElementsByTagName("span")[0].innerHTML = "";
                    }


                } else { //默认缩放级别4-5时,class为2的div显示,class为1和3的div隐藏;


                    $(".1").hide();
                    $(".2").show();
                    $(".3").hide();
                }


            });


            //创建div盒子模型,相当于地图的marker.根据一级地图和二级地图判断是否显示;


            var div = this._div = document.createElement("div");
            div.setAttribute("id", "marker");
            div.style.position = "absolute";
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
            div.style.color = "white";
            div.style.height = "85px";
            div.style.width = "65px";
            div.style.padding = "0px";
            div.style.lineHeight = "20px";
            div.style.whiteSpace = "nowrap";
            div.style.MozUserSelect = "none";
            div.style.fontSize = "13px";
            div.setAttribute("class", this._zlayer);
            if (this._zlayer == 2) {
                div.style.display = "none";
            } else if (this._zlayer == 3) {
                div.style.display = "none";
            }
            var span = this._span = document.createElement("span");
            div.appendChild(span);
            div.appendChild(document.createTextNode(""));
            var that = this;
            var a = this._a = document.createElement("a");
            a.setAttribute("class", "nodeLabel exercise");
            a.setAttribute("rel", "popover");
            a.setAttribute("data_id", "angle_rotation");
            a.setAttribute("href", this._href);
            div.appendChild(a);


            //添加显示一级地图学习进度的小星星的图片,判断这个图片只在一级地图显示,二级地图隐藏,然后通过学习的进度等级判断,给不同的图片;
            //<a href="FrmStuExercise.aspx">FrmStuExercise.aspx</a>
            var divStar = this._divStar = document.createElement("div");
            divStar.style.position = "absolute";
            divStar.style.width = "65px";
            divStar.style.height = "20px";
            divStar.style.top = "-20px";
            divStar.style.left = "-32px";
            divStar.style.overflow = "hidden";
            a.appendChild(divStar);
            /*
            默认情况下:直接进入缩放级别为1的一级地图的,小星星会根据后台数据判断给到不同的小星星图;
            二级地图判断为饼图;
            */
            if (this._xxjd == 0 && type == 1) {
                divStar.style.background = "url(../../Image/pagesImgs/yijistar1.png) no-repeat 0px 0px";
            } else if (this._xxjd == 1 && type == 1) {
                divStar.style.background = "url(../../Image/pagesImgs/yijistar2.png) no-repeat 0px 0px";
            } else if (this._xxjd == 2 && type == 1) {
                divStar.style.background = "url(../../Image/pagesImgs/yijistar3.png) no-repeat 0px 0px";
            } else if (this._xxjd == 3 && type == 1) {
                divStar.style.background = "url(../../Image/pagesImgs/yijistar4.png) no-repeat 0px 0px";
            } else if (this._xxjd == 4 && type == 1) {
                divStar.style.background = "url(../../Image/pagesImgs/yijistar5.png) no-repeat 0px 0px";
            } else { }








            var divNode = this._divNode = document.createElement("div");
            divNode.setAttribute("id", "nodeText");
            divNode.setAttribute("class", "nodeLabel");
            divNode.style.color = "white";
            divNode.style.position = "absolute";
            divNode.style.width = "65px";
            divNode.style.height = "20px";
            divNode.style.top = "42px";
            divNode.style.left = "-31px";
            divNode.style.overflow = "hidden";
            divNode.appendChild(document.createTextNode(this._text));
            a.appendChild(divNode);
            map.getPanes().labelPane.appendChild(div);




            var divIcon = this._divIcon = document.createElement("div");
            divIcon.setAttribute("id", "icon");
            divIcon.setAttribute("class", "location");
            divIcon.style.position = "absolute";
            divIcon.style.width = "40px";
            divIcon.style.height = "40px";
            divIcon.style.top = "3px";
            divIcon.style.left = "-20px";
            divIcon.style.overflow = "hidden";
            a.appendChild(divIcon);
            /*
            二级地图学习进度实现逻辑:考虑到缩放级别为2时,二级地图知识点小图也随着变化;
            1.type==2
            type==3
            this._xxjd==1

            */
            //zlayer级别为二级知识点缩放为2级的时候点数的小图的标识;
            if (type == 1) {
                divIcon.style.background = "url(../../Image/pagesImgs/yuan2.png) no-repeat 0px 0px";
            }


            if (this._zlayer == 3) {
                divIcon.style.background = "url(../../Image/pagesImgs/30_4.png) no-repeat 0px 0px";
            } else if (type == 2 && this._xxjd == 1) {
                divIcon.style.background = "url(../../Image/pagesImgs/yuan1.png) no-repeat 0px 0px";
            } else if (type == 2 && this._xxjd == 2) {
                divIcon.style.background = "url(../../Image/pagesImgs/yuan2.png) no-repeat 0px 0px";
            } else if (type == 2 && this._xxjd == 3) {
                divIcon.style.background = "url(../../Image/pagesImgs/yuan3.png) no-repeat 0px 0px";
            } else if (type == 2 && this._xxjd == 4) {
                divIcon.style.background = "url(../../Image/pagesImgs/yuan4.png) no-repeat 0px 0px";
            } else { }




            return div; //初始化div盒子;  
        }


        //在地图上绘制div盒子方法;
        ComplexCustomOverlay.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x + "px";
            this._div.style.top = pixel.y - 20 + "px";
        }


        //定义信息窗口
        function createInfoWindow(i) {
            var json = markerArr[i]
            var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><p                                    style=\"padding-top:8px;\"><hr></p><div class='iw_poi_content'>" + json.content + "</div>");
            return iw;
        }
        //定义marker数组
        var markerArr;
        var gradeId = GetQueryString("gradeId");
        var subjectId = GetQueryString("subjectId");
        $(document).ready(GetPoint);
        function GetPoint() {
            var url = "../../Handler/HStudent/HGetMapKnlg.ashx";
            var datas = { type: "allMap", xd: 3, SubjectId: subjectId, GradeId: gradeId, t: new Date().getMilliseconds() };
            $.getJSON(url, datas, function (data) {
                if (data != null && data != undefined && data != "-1") {
                    // alert(data);
                    markerArr = data;
                    //遍历Json数组数据,生成div中的内容;
                    for (var i = 0; i < markerArr.length; i++) {
                        var json = markerArr[i];
                        var text = json.text;
                        var href = json.href;
                        var content;
                        if (json.type == 2) {
                            content = '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>开始练习:</p><br><span style=" position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>' + json.text + '</strong></span><br>';
                            // content = json.content;
                            href = "FrmStuExercise.aspx?knlgId=" + json.id + "&t=" + new Date().getMilliseconds();
                        } else {
                            content = "";
                            href = "";
                        }


                        var pintx = json.point.split('|')[0];
                        var pinty = json.point.split('|')[1];


                        var type = json.type;
                        var xxjd = json.xxjd;
                        if (type == 1) {//在缩放级别为1时,将坐标点数组添加到一级地图生成折线;
                            firstLine.push(new BMap.Point(pintx, pinty));
                        } else {
                            secondLine.push(new BMap.Point(pintx, pinty)); //secondLine为二级地图的坐标点数组;
                        }
                        map.addOverlay(new ComplexCustomOverlay(new BMap.Point(pintx, pinty), text, content, href, type, xxjd));
                        (function () {
                            var index = i;
                            var _iw = createInfoWindow(i);
                        })()


                    }
                    //-------------加载
                    // markerArr = data;
                } else {
                    alert("该模块暂无知识点地图，后期将会添加");
                }
            });
        };
        //                        markerArr = [
        //                                { text: "加法与减法", content: "", href: "", point: '120.000|80.000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                                    type: 1, xxjd: 2
        //                                }
        //                   , { text: "乘法与除法", content: "", href: "", point: '120.000|-60.000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                       type: 1, xxjd: 1
        //                   }
        //                   , { text: "四则运算", content: "", href: "", point: '40.000|20.000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                       type: 1, xxjd: 3
        //                   }
        //                   , { text: "负数与绝对值", content: "", href: "", point: '-60.000|20.000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                       type: 1, xxjd: 4
        //                   }
        //                   , { text: "小数", content: "", href: "", point: '-120.000|-80.000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                       type: 1, xxjd: 5
        //                   }
        //                               , { text: "加法", content: '加法',
        //                                   href: "https://www.baidu.com",
        //                                   point: '90.000000|90.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                                   type: 2, xxjd: 1
        //                               }
        //                 , { text: "减法", content: '减法',
        //                    href: "https://www.baidu.com",
        //                    point: '90.000000|60.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                    type: 2, xxjd: 2
        //                 }
        //                 , { text: "位数加法的测试", content: '加法与减法',
        //                    href: "http://www.baidu.com",
        //                    point: '120.000000|80.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                    type: 2, xxjd: 3
        //                 }
        //                 , { text: "二位数加法", content: '乘法与除法',
        //                    href: "https://www.qq.com",
        //                    point: '120.000000|-60.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                    type: 2, xxjd: 4
        //                 }
        //                 , { text: "四则运算的规范", content: '四则运算',
        //                    href: "http://www.alibaba.com",
        //                    point: '40.000000|20.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                    type: 2, xxjd: 4
        //                 }
        //                        //   , { text: "加法", content: '<div style="position:absolute; zindex=1; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>开始练习:</p><br><span style=" position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>加法</strong></span><br>',
        //                        //       href: "https://www.baidu.com",
        //                        //       point: '90.000000|90.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                        //       type: 2, xxjd: 1
        //                        //   }
        //                        // , { text: "减法", content: '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>开始练习:</p><br><span style=" position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>减法</strong></span><br>',
        //                        //    href: "https://www.baidu.com",
        //                        //    point: '90.000000|60.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                        //    type: 2, xxjd: 2
        //                        // }
        //                        // , { text: "1位数加法", content: '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>开始练习:</p><br><span style=" position:absolute;margin:0px 20px;line-height:20px;display:inlin-block;"><strong>加法与减法</strong></span><br>',
        //                        //    href: "http://www.baidu.com",
        //                        //    point: '120.000000|80.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                        //    type: 2, xxjd: 3
        //                        // }
        //                        // , { text: "二位数加法", content: '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>开始练习:</p><br><span style=" position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>乘法与除法</strong></span><br>',
        //                        //    href: "https://www.qq.com",
        //                        //    point: '120.000000|-60.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                        //    type: 2, xxjd: 4
        //                        // }
        //                        // , { text: "四则运算的规范", content: '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>开始练习:</p><br><span style=" position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>四则运算</strong></span><br>',
        //                        //    href: "http://www.alibaba.com",
        //                        //    point: '40.000000|20.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                        //    type: 2, xxjd: 4
        //                        // }
        //                 , { text: "", content: "", href: " ",
        //                    point: '90.000000|90.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                    type: 3
        //                 }
        //                 , { text: "", content: "", href: "",
        //                    point: '90.000000|60.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
        //                    type: 3
        //                 }
        //                                ]


                //遍历Json数组数据,生成div中的内容;
                for (var i = 0; i < markerArr.length; i++) {
                    var json = markerArr[i];
                    var text = json.text;
                    var href = json.href;
                    var content;
                    if (json.type == 2) {
                        content = '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>开始练习:</p><br><span style=" position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>' + json.text + '</strong></span><br>';
                        // content = json.content;
                        href = "FrmStuExercise.aspx?knlgId=" + json.id + "&t=" + new Date().getMilliseconds();
                    } else {
                        content = "";
                        href = "";
                    }


                    var pintx = json.point.split('|')[0];
                    var pinty = json.point.split('|')[1];


                    var type = json.type;
                    var xxjd = json.xxjd;
                    if (type == 1) {//在缩放级别为1时,将坐标点数组添加到一级地图生成折线;
                        firstLine.push(new BMap.Point(pintx, pinty));
                    } else {
                        secondLine.push(new BMap.Point(pintx, pinty)); //secondLine为二级地图的坐标点数组;
                    }
                    map.addOverlay(new ComplexCustomOverlay(new BMap.Point(pintx, pinty), text, content, href, type, xxjd));
                    (function () {
                        var index = i;
                        var _iw = createInfoWindow(i);
                    })()
                }


        //添加折线
        var polyline = new BMap.Polyline(firstLine, { strokeColor: "#1E90FF", strokeWeight: 1,
            strokeOpacity: 0.5, enableMassClear: true
        });
        map.addOverlay(polyline);   //增加折线
        myCompOverlay.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point);
        });
        /*
        为图层进行连线
        array:存储连线的坐标点Point对象 
        map:地图类

        */
        function createLine(array, map) {
            var polyline = new BMap.Polyline(secondLine, { strokeColor: "#1C86EE", strokeWeight: 1,
                strokeOpacity: 0.5, class: 2
            });   //创建折线
            map.addOverlay(polyline);   //增加折线
        }


        /*
        删除指定颜色的图层连线
        color:删除图层连线的颜色
        map:地图类
        */
        function removePolylineByColor(color, map) {
            var allOverlays = map.getOverlays();
            for (var i = 0; i < allOverlays.length; i++) {
                var lineColor = allOverlays[i].getStrokeColor();
                if (lineColor == color) {
                    map.removeOverlay(allOverlays[i]);
                }
            }
        }
       这段代码实现的是百度地图。自建瓦片、自己取点。可能百度地图的调用方式有些奇葩。但是，不应该是这样的代码。。。。