前端小积累

一周周实习，很少时间写博客了，但本周的实习中，遇到了一些问题，可以说是争长了阅历，所以一定要好好记下来。 遇到的问题主要是关于跨域和css3的；

下面我们探讨一下跨域问题，还是css3下的translate会导致显示模糊的问题。

跨域

跨域的方式其实挺多，有jsonp，CORS，iframe等，详细的可以去google； 但其实常用的还是jsonp和CORS；

这周在做一个功能，但是做得东西因为前端和后台接口不在同一个域名下，需要用到跨域； 当时导师要我确立一个跨域方法，我疾呼没想多久，就定下了jsonp，因为这个方案对前端和后台来说，都是实现成本较低的。 于是问题就出现了。

jsonp

jsonp的实现原理，做前端的应该都知道。 前端工作

<script>
function deal(data){
    //处理data
}
</script>

<script src="http://api.zjy.space/do?callback=deal"></script>

后台工作 假设PHP

...//计算接口数据$data
$callback=$_GET["callback"];
echo $callback."(".$data.")";

把上面串联起来，当前端调用<script src="http://api.zjy.space/do?callback=deal"></script>的时候，其实就相当于执行了deal(data)；

这就是jsonp的简略理解。 但是，我们发ajax请求的时候，常用的库是JQuery的$.ajax库，它将jsonp和其他的GET,POST一起封装起来，使人很容易忽略他的真正实现过程，一些很关键的东西很容易忽略起来。

$.ajax({
    url: "ttp://api.zjy.space/do",
    dataType: "jsonp",
    success: function(data){
        //处理data
    },
    error: function(err){
        //处理err
    }
})

jsonp的容易忽略的坑

• 针对上面$.ajax的写法，如果我要通过jsonp发送POST请求呢？ 熟悉jquery的同学可能很快就写下来了。 $.ajax({ url: "ttp://api.zjy.space/do", type: "POST", dataType: "jsonp", success: function(data){ //处理data }, error: function(err){ //处理err } }) 错！ 想想上面的jsonp实现方法（src请求资源），怎么可能发出post请求
• 如果我要通过jsonp发送一些特定的headers呢？ 熟悉jquery的同学可能很快就写下来了。 $.ajax({ url: "ttp://api.zjy.space/do", dataType: "jsonp", headers:{ "my-name":"carven" }, success: function(data){ //处理data }, error: function(err){ //处理err } }) 错！ 想想上面的jsonp实现方法（src请求资源），怎么可能可以修改headers信息

CORS

恰巧，我们的跨域需要post和headers,所以jsonp方案被否定了，而且还存在跨域问题。 于是，我们转头去选择CORS方案。 由于我们需要发送自定义头信息，所以，我们需要实现的是非简单类型的CORS，即发送真正请求前，需要发送一次预检请求，协商好真正请求的请求方式、允许的headers等等； 当然，这些的后台要做的工作，对前端来说，这是无感知的；

接口在后台导师的努力下，修改完成，但是我在做交互调试的过程中出现了问题，原来，接口之间使用了session作为信息交流的手段，大家也知道，session是依赖于cookie的； 而CORS请求的其中一个特点就是，不会自动发送cookie，如果前端对cookie的概念不深刻的话（我也学过后台），是很容易忽略这一点的。

如何使CORS请求携带cookie呢。方式其实很简单，这个需要前端和后台一起协作。

• 前端使请求携带cookie... xhr.withCredentials = true; 或者 $.ajax$.ajax({ url: "ttp://api.zjy.space/do", xhrFields: { withCredentials: true }, ... })
• 后台允许请求携带cookie 假设PHPheader("Access-Control-Allow-Credentials:true"); ...

这样就成功啦。

CSS3之translate导致的模糊

现在大部分浏览器都已经支持css了，特别是translate这些常用的属性； 比如垂直水平居中的实现

.vertical-center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

但是，在使用translate的情况下，可能会出现模糊的情况。是怎么回事呢。

我假设目前有一个div盒子的宽度是299px， 那么translate(-50%, -50%)就相当于translate(-149.5px, 149.5px), 然而，1px其实已经是最低的显示单位了，如果强行处理0.5px的像素，显示器该如何显示呢？ 所以，小数点后面的像素就会缺失，造成一种显示涣散、模糊的感觉。

网上有说通过设置父元素

transform-style: preserve-3d;

我尝试了，没有得到解决，也不懂其中原理。

如果有人知道怎么决解这一个问题，欢迎联系我，或者在下面评论哦。

结尾

这一周的实习收获让我很开心。