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

<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-&gt;auth_type =~ m/^QQ/ ) &amp;&amp; $author->hint && ($author-&gt;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>

添加新评论