实习杂项

jquery ajax jsonp

1. jquery load/unload事件
   $(window).load()

Will execute after the page along with all its contents are done loading. This means that all images, CSS (and content defined by CSS like custom fonts and images), scripts, etc. are all loaded. This happens event fires when your browser's "Stop" -icon becomes gray, so to speak. This is very useful to detect when the document along with all its contents are loaded.

$(document).ready()

This on the other hand will fire as soon as the web browser is capable of running your JavaScript, which happens after the parser is done with the DOM. This is useful if you want to execute JavaScript as soon as possible.

$(window).unload()

This event will be fired when you are navigating off the page. That could be Refresh/F5, pressing the previous page button, navigating to another website or closing the entire tab/window.

To sum up

ready() will be fired before load(), and unload() will be the last to be fired.

2，encodeUricomponent的正确用法:
只针对key,value中的value进行局部编码

It's worth pointing out that encodeURIComponent("var1=value1&var2=value2") is not the typical use case. That example will encode the = and &, which is probably not what was intended! encodeURIComponent is typically applied separately to just the value in each key value pair (the part after each =).

3，注意事项
离开事件（beforeunload/unload）是不能自定义提示diaLog的，只能返回值来替换里面的值。

$(window).on("beforeunload", function(event) {
        var isAllSaved = cityOverlays.every(function(overlay) {
            return overlay.saved === true;
        });
        // console.log(isAllSaved);
        // setLocalStorage("北京");
        console.log(" all saved ", isAllSaved);
        if (!isAllSaved) {
            (event || window.event).returnValue = "您有未保存的围栏，确定离开吗？"; //Gecko + IE
            return "您有未保存的围栏，确定离开吗？";
            // showPopTips(null,"离开");
        }
    });
    $(window).on("unload", function(event) {
        console.log("will set localStorage", cityOverlays);
        setLocalStorage("北京");
    });
    window.addEventListener("beforeunload", function(e) {
        var isAllSaved = cityOverlays.every(function(overlay) {
            return overlay.saved === true;
        });
        if (!isAllSaved) {
            // setLocalStorage(cityInput.val())
            console.log("有围栏未保存");
            (e || window.event).returnValue = "您有未保存的围栏，确定离开吗？"; //Gecko + IE
            return "您有未保存的围栏，确定离开吗？"; //Webkit, Safari, Chrome
            // showPopTips(null,"离开");
        } else {
            console.log("已保存");
            return null;
            // setLocalStorage(cityInput.val());
        } //Webkit, Safari, Chrome etc.
    });

4.ajax跨域的问题。

$.ajax({
                url: url + queries,
                type: "GET",
                dataType: "jsonp",
                jsonp:"callback",//jsonp请求的callback的函数名（key值）
                jsonpCallback:"handleServerHeatData",//调用的函数名（value值）
                success: function(serverData) {
                    debugger;
                    if (serverData&& serverData.errno == 0) {
                        showHotMap(serverData.data);
                        drawPolygons(cityInput.val());
                    } else {
                        alert("获取热力图数据失败");
                    }
                    myTool.loadingPopupClose();
                },
                error: function(xhr, errorType, error) {
                    debugger;
                    console.log(error);
                }
            });

jquery中对jsonp类型的ajax类型的请求处理：本来应该取得数据后调用handleServerHeatData，现在自动帮你生成回调函数并把数据取出来供success属性方法来调用。
然后发ajax的时候的url就是这样的

url + queries 
http://100.69.123.33:8008/hotmap/getHeatmapOverlay?key=value1&key2=value2?callback=handleServerHeatData

tutorial

1. 删除object里面的key,value
   delete obj[key]

var a = {"name1":"reer","name2":"hh","name3":"hh"};
delete a['name2'];
//result
a 
Object {name1: "reer", name3: "hh"}

1. 取小数点后两位
   solution1:

Math.round(num*100)/100)

solution2:

num.toFixed(2)
eg.
var a = 22.446;
a.toFixed(2)  => "22.45"

7.
module.exports = {
getUserPolygon: getUserPolygon,
userId:userId,
userName:userName
}
逻辑上先调用getUserPolygon。然后获取到userId这些
如果把它们export的话，外部不一定能获取到userId的值
更新：
其实不是这样的，要使得外部能获取，有两种方式：
前提是模块+同步
（1）module内部直接就执行函数了。
（2）暴露出来的不是变量，而应该是一个get函数

如果没有模块的话，很好处理是吧，就是promise就可以。
但是如果模块的话。。就得设成同步。

1. echarts的setoption(如果只是最开始的时候init的无data的那些option).需要把data设为[]的，而不能直接不设置

9.jsonp跨域的问题
[] jsonp发送的其实是get请求，不能跟post连起来用。这部分不太懂todo

10.

数据库一致性问题，更新/删除结束后再刷新并没有更新

1. 可拖动
2. 
   借助jquery-ui。使用方法：
   step1:
   引入js文件

<script src="/static/hotmap/js/libs/jquery/jquery-ui.min.js"></script>

step2

$(".pop-chart-box").draggable();

哪个想要拖动就设置在哪一个上面