[JS随笔]网站评论、显示界面细微调整和杂谈

随笔写下一些东西,作为 SiteLog 和备忘。

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

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

简单记下曾经的修改吧。

先说前端:

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

    codevar 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;
      }
    };
    
  3. 本地json评论界面优化。 彻底完成本地评论js的闭包。进一步和多说评论界面糅合, 增加了刷新重载 两个操作界面,前者从本地文本静态json cache中重新获取本地评论,后者读取 MySQL 库实时获取本地评论。

  4. 延迟加载图片重写。 也完成了一次JS闭包。 美化了延迟加载图片时候占位的动画,因为目前本站仅在评论者头像上使用延迟加载图片技术,也许大家并不能彻底体验到界面的加载过程(因为加载的太快了)。。。

上面的所有修改,均可以查看本站现有 JS 来获得代码。 本站的 JS 并无加密 :P

再说后台:

  1. 彻底解决了QQ头像、Gravatar 头像显示问题。 并缓存Gravatar 头像到本地。 不同原来的做法。这次写 插件,直接 hook 了 MT::Author::userpic_url 。 比较极端的做法。 代码如下:

    codeour($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); 
     };
     }
    }
    
  2. 更换了后台插入图片后的显示,适应 HTML5。 这个没有写插件,直接Hacklib/MT/Asset/Image.pm 中的 can_html 。 更加的简单粗暴。 代码片段如下:

    code$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,
    );
    

要查看详细的修改文件,可以移步到我的 GitHub

其他:

话说,多说 服务器维护了。 貌似以为会好一点,结果似乎结果一样? 另外,多说评论加载不出来时候,下面的加载动画一直显示的时候, 这个时候刷新就OK了,觉很奇怪, 查看了一下 log。 结果,100% 的在出现这个状态的时候,浏览器报错:

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

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

另外,服务器维护了, 貌似脚本的版本还是 2015-04-27 。。。。