路杨笔记

<p>随笔写下一些东西，作为 SiteLog 和备忘。</p>

<p>都是一些评论、显示界面的调整，一个意图：用户体验。 说的不好听的就是"路杨的强迫症又犯了"，反正是折腾无极限。。</p>

<p>这两个月， 整个 Blog 的 js 估计被我修改过不下10次，有些是纯粹为了闭包，有些是为了美观和清晰流程。。。</p>

<p>简单记下曾经的修改吧。</p>

<p>先说前端：</p>

1. ajax提交优化。 所有流程彻底闭包为一个函数，和 json 显示本地评论互动，增加了提交成功后如果通过审查的话，动态加载新评论及动画，并同时重置评论提交表单。
2. <p>多说评论界面优化。 绑定了原来系统的显示/隐藏评论、 显示/隐藏评论框的函数，让原来界面的操作同时操作两个系统的界面。 在 SOTHINK 的提示下，虽然依然设置多说评论框为默认，但是登录本地系统（包括QQ等本地系统支持的社交帐号）的朋友则显示"本地评论系统评论框"。 代码片段为：</p>

   var check_mt_user = function(u) { 
     if(typeof duoshuoQuery.is_ds_hide =='undefined') {
     if (!u)  u = w.mtGetUser();
     if (u && u.is_authenticated) { duoshuoQuery.is_ds_hide=true;}
     else duoshuoQuery.is_ds_hide=false;
     }
   };
   

   </li> <li><p>本地json评论界面优化。 彻底完成本地评论js的闭包。进一步和多说评论界面糅合， 增加了刷新 和 重载 两个操作界面，前者从本地文本静态json cache中重新获取本地评论，后者读取 MySQL 库实时获取本地评论。</p></li> <li>延迟加载图片重写。 也完成了一次JS闭包。 美化了延迟加载图片时候占位的动画，因为目前本站仅在评论者头像上使用延迟加载图片技术，也许大家并不能彻底体验到界面的加载过程（因为加载的太快了）。。。</li> </ol> <p>上面的所有修改，均可以查看本站现有 JS 来获得代码。 本站的 JS 并无加密 :P</p> <p>再说后台：</p>
   1. <p>彻底解决了QQ头像、Gravatar 头像显示问题。 并缓存Gravatar 头像到本地。 不同原来的做法。这次写 插件，直接 hook 了 MT::Author::userpic_url 。 比较极端的做法。 代码如下：</p>

      our($old);
      {
        no warnings 'redefine';
        no strict 'refs';
        require MT::Author;
        If ($old = MT::Author->can('userpic_url')) {
        *MT::Author::userpic_url = sub{ 
        my ($author)  = @_; 
        if (  ($author->auth_type =~ m/^QQ/ ) && $author->hint && ($author->hint=~ m!^https?://!) ) { return $author->hint. '#QQ' ;}
         my ($oldurl) = $old->(@_); 
         return $oldurl if ($oldurl);  
        my $email = $author->email;
        return &_hdlr_gravatar_url_mail($email); 
       };
       }
      }
      

      </li> <li><p>更换了后台插入图片后的显示，适应 HTML5。 这个没有写插件，直接Hacklib/MT/Asset/Image.pm 中的 can_html 。 更加的简单粗暴。 代码片段如下：</p>

      $text = sprintf(
       '<figure class="post-image"><img title="%s" src="%s" %s %s /></figure>',
       MT::Util::encode_html( $asset->label ),
       MT::Util::encode_html( $asset->url ),
       undef,undef,
      );
      

      </li> </ol> <p>要查看详细的修改文件，可以移步到我的 GitHub。</p> <p>其他：</p> <p>话说，多说 服务器维护了。 貌似以为会好一点，结果似乎结果一样？ 另外，多说评论加载不出来时候，下面的加载动画一直显示的时候， 这个时候刷新就OK了，觉很奇怪， 查看了一下 log。 结果，100% 的在出现这个状态的时候，浏览器报错：</p>

      <p>17:24:55.691 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://easun.duoshuo.com/api/threads/listPosts.json?thread_key=301&;author_key=1&url=http%3A%2F%2Feasun.org%2Fblog%2Farchives%2Fgodaddy_cpanel_perl_dbdmysql.html&title=Godaddy%20cPanel%20%E4%B8%BB%E6%9C%BA%E5%92%8C%20Perl%E6%A8%A1%E5%9D%97%20DBD%3Amysql&require=site%2Cvisitor%2Cnonce%2Clang%2Cunread%2Clog%2CextraCss&site_ims=1442293934&lang_ims=1442293934&referer=http%3A%2F%2Feasun.org%2Fblog%2F&v=15.4.27. (Reason: CORS header 'Access-Control-Allow-Origin' missing).1 <unknown></unknown></p>

      <p>干啥子嘛～～
      
      明显的服务器响应问题。。。
      
      判断跨域的服务端脚本的得到没有执行。。
      
      其实listPosts.json 返回数据了，可惜被浏览器拒绝了。 难怪不显示。。。。。。
      
      话说，抛开 服务器 判断跨域的服务端脚本的问题。 listPosts.json 难道一定要用 JSON 模式？ 又不是 POST, GET 而已，换成 JSONP 模式不就万事大吉了，而且也能节省服务器的判断跨域，输出 Access-Control-Allow-Origin header。。。。。。</p>

      <p>另外，服务器维护了， 貌似脚本的版本还是 2015-04-27 。。。。</p>