说来惭愧，写了这么久的前端（大概），还没有使用过jsonp（后来我发现假期用Angular+Rails使用过。。。http://codesky.me/archives/rails-solve-cross-query.wind），这次在微博中，一个好友遇到了一个需要跨域的问题，那么机会来了。

我第一反应就是jsonp，尽管他说不可以，然而我还是想要试试看。

用最顺手的jQuery吧，话虽如此，jQuery也快忘了。

- 阅读剩余部分 -

那道卡了一个学期的生产者消费者问题，今夏开工，和小新讨论了半天怎么怎么折腾，然后踩到了不少坑。

需要用到Java+Rails+JavaScript，题目要求，不得不用。Java用于生产者消费者模型，剩下的用于前端显示。

最初的设计是轮询，换句话说，类似于Java写入数据库，然后刷新定时刷新读写，一遍遍去查找更新，这样当然是可行的，但是——好Low。

现在我们有了一个更好的解决方案，用WebSocket实现动态的、即时的更新。当然当初知识一个小想法，WebSockeet对我还很抽象，所以咨询了一下用过的小伙伴小新，得知差不多一个意思，查了各种资料，开工。

WebSocket的原理性介绍：https://github.com/abbshr/abbshr.github.io/issues/22

简单的来说是在运输层用TCP来进行通讯，而不是用HTTP协议，这很好理解嘛，跟Socket差不多一个意思（本来以为这辈子都不会用Socket因为不搞桌面开发）。

- 阅读剩余部分 -

offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

well，方便计算偏差和定位有木有！

使用起来：$(element).offset().top，like that

最近终于忍不住在公司里都在讲同步异步的时候自己跟个文盲一样听不懂了！然后怒查：软件编程中，什么是同步？什么是异步？，一天后……恩又忘了。

但自从这次做了项目被坑了两次之后，终于记住什么叫异步了QvQ，在上面那篇文章的一串字中先节选出我觉得最好理解的部分：

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

放在javascript里，故事是这样的：
首先呢，我铛铛铛的运行ajax，然后指望着ajax complete之后能传出值给后续一系列语句进行判断，然后万万没想到啊！他没等执行完，就蹬蹬蹬跑去执行后面的句子了= =！！

解决也不算难，使用callback回调，或者说后来小新告诉我$.ajax里有一个async，详情：http://api.jquery.com/jquery.ajax/，可以控制同步异步。

我默默的就去用callback啦~T^T发誓不再被坑。

我们抛给PHP一串数组，然后用json_encode()返回成json格式：

<?php
    $arr = Array(Array('id' => '1000', 'content'=>'Hello World', 'time' => '2015-2-27 14:23:20'), Array('id' => '1001', 'content'=>'今天天气不错', 'time' => '2015-2-27 18:20:21'));
    echo json_encode($arr);

?>

得到：

[{"id":"1000","content":"Hello World","time":"2015-2-27 14:23:20"},{"id":"1001","content":"\u4eca\u5929\u5929\u6c14\u4e0d\u9519","time":"2015-2-27 18:20:21"}]

于是乎，很蠢的我就不知道怎么遍历这货，其实也不难：

var array = $.parseJSON(data);
var i, message;
$.each(array, function(i, message) {
//    self.addNew(message.id, message.content, message.time, false);
});

只要使用each就好啦~。

昨天折腾了一个晚上，今天在抽空折腾的东西，不记下来未免太浪费了，于是我决定花晚上把它写下来。

Ajax是目前最流行的优化用户体验的方法，但在过去，他往往代表着牺牲SEO以及抛弃浏览器后退前进功能，但是现在，已经不是这样了。

现在的Ajax完全可以做到兼备，所以你可以看到，基本上，在你提交表单之后再也不用跳转之后才告诉你你的输入是否正确，甚至在搜索时，一边输入字符，一边进行检索。

这些都是Ajax所带来的便利，但是鉴于我还没有前后端整站写过（只有使用前后框架[PHP MVC]以及前端的经历），所以对整个流程还不能说熟悉。这次，我们从后端写到前端，一点点来解刨Ajax的套路。

- 阅读剩余部分 -

今天又碰到了这种需求，是因为我们要做个点击获得全文（之类的）功能，设置了overflow:hidden，如果完整的显示了，那么我们就不需要显示全部内容的按钮，否则就要加上。

当时就在想，这玩样儿恐怕不太好办吧？overflow是CSS自动判断的，我完全没有经受，怎么判断确实是个问题。

还好谷歌还是能够找到答案的：jquery如何判断div是否文本溢出
里面提到了一个很好的方法：

$(selector).map(function() {
    if (this.offsetWidth < this.scrollWidth) {
        // do whatever you want
    }
});

这里的offsetWidth和scrollWidth是DOM对象所具有的属性，而不是jQuery对象，所以要先转成DOM对象：jQuery与DOM对象的互相转换

关于这两个，以下扩展阅读：
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth
https://developer.mozilla.org/zh-CN/docs/Web/API/element/scrollWidth

昨天被toggle坑了，因为在w3school里是这么写的：http://www.w3school.com.cn/jquery/event_toggle.asp

里面的第一段：

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

在他的示例中也是可以使用的，但是在我的环境下竟然没有办法达到这个效果，刚开始以为自己写错了，结果没想到这货已经被取消掉了，在官方文档中，现在只有fadeIn和fadeOut切换的效果了：http://api.jquery.com/toggle/

于是只好自己写click事件了=A=

在修改Hi GPA的时候需要增加一个全选用户的功能，结果被坑惨了。

首先，最终代码是这么写的：

var text = $('#select-all-student').html();
if (text == '全选') {
    $('input[name="studentNumber"]').prop('checked', true);
    $('#select-all-student').html('取消全选')
} else {
    $('input[name="studentNumber"]').prop('checked', false);
    $('#select-all-student').html('全选');
}

这里集成了一个全选和反选的功能，可以选中所有name为studentNumber的checkbox。

- 阅读剩余部分 -

jQuery中虽然用animate，但是他支持的毕竟有限，比如说就不支持background-color，所以要想起到过渡效果，还得靠CSS3来撑门面啦。

刚开始时候写了个function，然后想想这样一点都不好用，我还得传个obj参数进去好麻烦，后来想到了，何不在jQuery里加个方法，就能和原生函数一样调用了。

jQuery.prototype.switchBackgroundColor = function(color1, color2, time) {
    var self = this;
    self.css('background', color1);
    setTimeout(function() {
        self.css('background', color2)
    }, time);
}

- 阅读剩余部分 -