最近的一堆杂事

2017.11.9
ajax访问其他域默认会被拦截，然后用尽各种方法，像jsonp等等，结果获取豆瓣的json毫无压力，但一旦获取同事的……还是不行，更可恶的是它不报错了，直接走error返回parsererror……
最终，同事把pom.xml、application.properties、ServerApplication.java修改了一下，并添加ServerFilter.java，使得程序走本地路由过去，终于把问题完美解决了！

2017.11.10
ajax调用一个链接报415的错误，从火狐的反馈来看（谷歌没有具体反馈？），是contentType问题，于是我把“application/x-www-form-urlencoded; charset=utf-8”给删除了，结果还是这错误……于是我在想是不是其他问题，改了data传输还是不行（其实这里也是问题，同事用的后台框架能自动解析json，不需要外边还加变量名），最后发现把contentType改为“application/json”解决

2017.11.15
关于socket的用法示例，引入reconnecting-websocket.js，自定义js部分：
var Test = {//
    options: {
        socket: null,
    },
    /**
     * 连接服务
     */
    connect: function () {
        var p_redis_serverurl = "http://IP:PORT/Server";
        var redishttp = p_redis_serverurl.split("//");
        var socket_url = "ws://" + redishttp[1] + "/websocket";
        Test.options.socket = new ReconnectingWebSocket(socket_url);//与服务端握手
        Test.options.socket.onerror = function (event) {
            Test.disConnect();
        };
        Test.options.socket.onopen = function (event) {
            Test.onOpen(event);
        };
        Test.options.socket.onmessage = function (event) {
            Test.onMessage(event);
        };
    },
    /**
     * 接收消息
     */
    onMessage: function (event) {
        var data = eval("(" + event.data + ")");
    },
    /**
     * 建立连接成功回调
     */
    onOpen: function (event) {
    }
    ,
    /**
     * 发生错误回调
     */
    onError: function (event) {
    },
}
2017.11.16
昨天就困扰了我许久的框选查询，终于搞定了！一开始在想是不是调用了后台什么方法查的，但是只要一查network就知道完全没有，这是纯前端的功能。然后在想是不是框选后的代码被我无意修改，或是有什么关键字不同……结果还是一样一样的……
今天一来，我就直接看图标的html是不是一样！结果发现，它根本不在html上存图标！！！把GpsView整个文件夹注释掉，它的图标是在地图上消失了，但框选后还是查得出来！所以方向还是不对，最后找到问题在IndexDB下的IDBObjectStore插件，名为dexie.js。
找到问题后却又试了半天，devices中的key要和list中匹配，取值的时候也从同样地方取等等……
             var that=RefreshGarage.options;
             var db = new Dexie("garage-info");
             // 线删除缓存库
             db.delete();
             that.DB=db;
             var schema = {
                 devices: "id,fzdw,x,y"
             };
             db.version(1).stores(schema);
             db.open();
             db.transaction('rw', db.devices,function () {
                 db.devices.bulkAdd(list);
             })
2017.12.5
求一个经度或一个纬度的像素距离，找了一会儿找到一个经纬度换算实际距离的，然后用这个研究了半天（这个其实是日本人写的，只是粗略翻译了一下）：http://blog.csdn.net/pipi0714/article/details/5987107。并且在地图上测出东南福建（117, 24）和西北新疆（86, 47）两个点的情况，其中经度差一度的值相距很小，都约为111公里，而纬度差一度就比较大了，福建约为101公里，新疆约为75公里，南北差距还不小……
var wei = 24;
var jing = 117;
var wei_hu = wei * Math.PI / 180;//弧度转换
var jing_hu = jing * Math.PI / 180;
var POLAR_RADII = 6356752;//北极的半径
var EQUATOR_RADII = 6378137;//赤道的半径
var m_refY = POLAR_RADII + (EQUATOR_RADII - POLAR_RADII ) * (90 - wei) / 90;//纵轴参照距离
var m_refX = m_refY * Math.cos(wei_hu);//横轴参照距离
var p_wei_hu = (wei - 1) * Math.PI / 180;
var p_jing_hu = (jing - 1) * Math.PI / 180;
var dx = Math.abs((p_jing_hu - jing_hu) * m_refX);//两点相对距离
var dy = Math.abs((p_wei_hu - wei_hu) * m_refY); console.log(dx); console.log(dy);
结果最终在地图上用截图看两点像素时却发现！一经/纬度差的像素值其实就是分辨率！于是一个：var resolution = 1 / mapObj.getView().getResolution();就搞定了！

2017.12.6
一个CodeMirror的html代码编辑器需要引用这么多东西：
<link type="text/css" href="plug-in/codemirror/codemirror.css" rel="stylesheet" />
<script typet="text/javascript" src="plug-in/codemirror/codemirror.js"></script>
<script typet="text/javascript" src="plug-in/codemirror/mode/xml.js"></script>
<script typet="text/javascript" src="plug-in/codemirror/mode/css.js"></script>
<script typet="text/javascript" src="plug-in/codemirror/mode/javascript.js"></script>
<script typet="text/javascript" src="plug-in/codemirror/mode/htmlmixed.js"></script>
<script typet="text/javascript" src="plug-in/codemirror/mode/multiplex.js"></script>
<script typet="text/javascript" src="plug-in/codemirror/mode/htmlembedded.js"></script>

2017.12.7
研究了好久的在线代码演示终于搞定了，一开始我就在想这是前端还是要涉及后端的功能，最开始用的是找iframe改变html代码的思路，其实这条路没错，只是方法错了，用的是：$("iframe").contents().find("html").html(content);虽然body能变，但JQuery莫名其妙报错，让我以为这条路走不通……
于是我想到FreeMarker要实现这功能不难啊，只要把数据传到空的html页面上并显示出来就够了，所以开始研究新用的spring boot框架，传参、显示都已经研究完了（顺带还研究了一个数据写入，但问题在于写完的html是不会立马发生改变的，因为它真正读取的是工程下target/classes的复制文件），之后发现最大的难题是要把参数显示到iframe里是个难事：
@RequestMapping(value = "/getHTML", method = RequestMethod.POST) @ResponseBody public void data(@RequestParam("html") String html) throws IOException {
    File file=new File("modify.html");
    PrintWriter out=new PrintWriter(file);
    out.write(html.toCharArray());
    out.flush();
    out.close();
} @RequestMapping("/hello/{name}") public String hello(@PathVariable("name") String name, Model model) {
    model.addAttribute("name", name); return "a";
}
注：RespnseBody不加是找main/resources/templates下的X.html页面，加了就是返回真正的字符串。
最后的最后！突然机智地研究了一下某网站的原代码，看它是怎么实现的，结果发现！它就是纯前端的功能，iframe有重新加载代码的功能：
    var content = CodeMirrorEditor.getValue();
    var mapcon = document.getElementById("d_platform_map");
    var pre = document.getElementById("d_platform_iframe");
    mapcon.removeChild(pre);
    mapcon.appendChild(pre);
    previewContent = pre.contentDocument || pre.contentWindow.document;
    previewContent.open();
    previewContent.write(content);
    previewContent.close();

2017.12.12
其实还是一帆风顺的，记录下拿来修改的代码Jquery搜索框效果(百度关键词联想)：

http://blog.csdn.net/wulex/article/details/52245342

2017.12.15
添加的时候给个回调函数，等删除时再拿出来用。之前写习惯了暂存都扔html上，居然没想到放到JS用个变量储存起来！

2017.12.21
IDEA+MAVEN的代理使用大致明白了，先写一个ServerFilter的java，然后在application.properties配置哪个path下走哪个url就好了

2018.1.9
一个滚动数字的插件accounting.min.js居然浪费了我一点时间，问题在于：
          var el = $('#d_head_all')[0];
          Head.options.Odometer = new Odometer({
              auto: true,
              el: el,
              value: 0,
              format: '(,ddd)',
              theme: 'default'
          });
          // Head.options.Odometer.update(seconds);
用JQuery获取对象时，我忘了它获取的和document获取的还不太一样，尽管获取ID也是一个串。

2018.1.13
做了一个环形的选择按钮，还费了点时间，找了各种方法，大多是border的变种，虽然那样一个就能分成四份，但是没有边框！因为它填充的本身就是边。后来找到了css的clip，它切出来的扇形是可以加border的（只能加最外圈），于是用四个扇形拼出了（任意个都行）【后续，只用一个满圆+一个切扇形即可，然后操作扇形的角度】：

中间的按钮后来也没用了，现在只是装饰，用mouseleave解决了离开就消失的问题，它和mouseout还不一样。

2018.1.19
闪烁的圆用CSS实现（IE无效），最大的问题其实在于，为什么-webkit-这是谷歌的标识，而火狐却也能识别，而IE不管怎么写都没有用……：
.c-multi-reddot:before{
    content:' ';
    position: absolute;
    z-index:2;
    left:0;
    top:0;
    width:10px;
    height:10px;
    background-color: #ff4200;
    border-radius: 50%;
}
.c-multi-reddot:after {
    content:' ';
    position: absolute;
    z-index:1;
    background-color: #ff4200;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
    -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal;/*定义动画方式*/
}
@keyframes ripple {
    0% {
        left:5px;
        top:5px;
        opcity:75;
        width:0;
        height:0;
    }
    100% {
        left:-20px;
        top:-20px;
        opacity: 0;
        width:50px;
        height:50px;
    }
}
绕着中心旋转的CSS，关键在于中心transform-origin，参考链接http://www.jq22.com/jquery-info15184：
.c-query-items{
    transition: all 1.2s ease-in-out;
    border-left: 28px solid transparent;
    border-top: 1px solid transparent;
    font-size: 0.65em;
    left: 50%;
    list-style: none;
    position: absolute;
    top: 50%;
    transform-origin: 0 0;
    line-height: 0;
}
.c-query-items1{
    transform:rotate(270deg);
}
.c-query-items2{
    transform:rotate(0deg);
}
.c-query-items3{
    transform:rotate(90deg);
}
.c-query-items4{
    transform:rotate(180deg);
}

2018.1.23
困扰了我好久好久的旋转自体模糊问题终于解决了……最早的解决方法是换成宋体，但某龟毛的上司硬要微软雅黑……然后试了很多种方法，只换class不行，想改animate没有，换成图片……更麻烦得多（对齐、旋转、hover变色）！最后的最后，终于发现了我一开始就找到的一种方法：transform: rotate(45deg) translate3d(0, 0, 0)完美解决，最开始我用3d行不通在于……我是新增一个transform:translate3d(0, 0, 0);，而不是在原基础上加。

2018.3.29
犯了一个严重的错误，ajax的优点在于异步，而我最近总写同步，结果在展开树的同步调用中卡了几秒……异步完全避免了这种事情发生。
所以，ajax其实要尽量用异步，无法异步的再用同步解决！

2018.4.10
找了各种canvas的点击方法，好多说要重绘用isPointInPath，试了半天，其实重绘是要，但可以不画出来，也就不需要清画布：
animationLayer.canvas.addEventListener('click', function(e){
    var p = getEventPosition(e); //获取鼠标坐标
    var c = animationLayer.canvas;
    var ctx = c.getContext('2d');
    for(var i = 0; i < data.length; i++){
        var pixel = map.getPixelFromCoordinate([data[i].x,data[i].y]); //地点对应html坐标
        ctx.beginPath(); //开始点，如果不加会全地图跳动
        ctx.arc(pixel[0], pixel[1], set.size, 0, Math.PI * 2, true);
        if (ctx.isPointInPath(p.x,p.y)){ //如果鼠标点入圆点
            console.log(data[i]);
            return;
        }
    }
}, false);

2018.4.28
关于maven+spring打war包的问题，首先<packaging>jar</packaging>要改成war，然后在第一个</dependencies>之前加（估计和boot有关）：
<!--引入 servlet api-->
     <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
      </dependency>
在<artifactId>spring-boot-starter-web</artifactId>之后加上：
<!--排除内置的tomcat,排除后,无法再通过main方法启动,开发时可以暂时不排除,部署项目时记得排除-->
         <exclusions>
             <exclusion>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-starter-tomcat</artifactId>
             </exclusion>
         </exclusions>
之前的build注释掉/删除，改成：
<build>
   <finalName>项目名称</finalName>
   <plugins>
      <plugin>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-maven-plugin</artifactId>
         <configuration>
            <mainClass>com.example.demo.DemoApplication这里也是对应的路径和文件</mainClass>
         </configuration>
         <executions>
            <execution>
               <goals>
                  <goal>repackage</goal>
               </goals>
            </execution>
         </executions>
      </plugin>
   </plugins>
</build>
上面对应配置的java中多加一层继承（main不动）：
public class DemoApplication extends SpringBootServletInitializer {
   @Override
   protected SpringApplicationBuilder configure(SpringApplicationBuilder builder){
      System.out.println("初始化加载……");
      return builder.sources(DemoApplication.class);
   }
然后clear->compile->package（有引入其他包的话，编译时还会报错，到时候搜索再依附一下），打成war包后，把它扔到tomcat里，如果是新的注意改三个端口号以免冲突，最后在application.properties里把port改成对应的tomcat端口即可。
改回本地运行时，需要把java继承和<exclusions>给注释掉。

2018.7.4
Jquery版本问题真是太恶心了，3.2.1因为没有live功能，改成on怎么改怎么报错……报的还是个莫名其妙的“V[g].exec is not a function”，我把官网的示例贴进来都一样错！想换bind也不行……之后只好换回1.7.1，结果它在$keyword.css({display: "none"});中还报个错，莫名其妙，明明在Demo里都是好好的，改成.hide()就好了。