[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%2F%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%2F%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 。。。。