关于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]);

                }

            }

        }

       这段代码实现的是百度地图。自建瓦片、自己取点。可能百度地图的调用方式有些奇葩。但是，不应该是这样的代码。。。。