【Angular JS】網站使用社會化評論插件，以及過程當中碰到的坑

　　目前正在開發本身的網站，技術上使用Angular JS + Express JS + Mongo DB。因爲網站會有文章發佈，所以須要有評論功能。評論功能也能夠本身開發，但因爲如今社會化評論插件不少，所以沒有必要多花精力，使用專業的就好。

　　

1. 什麼是社會化評論插件？都有哪些經常使用的插件？

　　社會化評論插件，指的就是無需本身開發評論功能，在本身網頁上使用第三方的評論框，發出的評論將被保存在第三方的服務器上。使用時要在插件提供方官網上註冊，註冊好以後可獲取實現功能的JS代碼，以及未來可在官網上管理本身網站的評論。

　　實現的原理，通常都是插件網站提供給你一段JS代碼，你插入到須要評論的網頁上便可。

　　目前經常使用的評論插件有：

　　A. Disqus

　　　　官網：https://disqus.com/

　　　　這個應該是最老的，在國外使用最多的第三方評論插件。優勢是老牌專業，經過JS代碼可發現，國內不少網站的功能實現應該是參考了它。但缺點一樣明顯，就是國內的網站使用，訪問速度我的感受每每很差，加載有些慢。另外對國內的社交網站支持很差，僅支持Facebook，Twitter等，不支持微博等，這對訪客的評論帶來不便。

　　　　而且i18n對中文的支持很差，網站上提供了中文版選項（它是依賴網友們的貢獻提供多語言版本），可是我試了發現不能起做用。

　　　　所以考慮到以上缺點，我放棄了它。

　　

　　B. 多說

　　　　官網：http://duoshuo.com/

　　　　它和有言應該是國內使用較多的評論插件。優勢是使用很方便，支持微博等國內社交網站帳戶登陸。但缺點是使用過程當中我感受它的Bug仍是很多，同時在其網站討論版中，能夠看到，提出問題的網友不少也很活躍。好比我發現了一個嚴重的問題，也有一些網友提出，就是有時候必須手動再刷新一次頁面，才能顯示評論框。這個問題後來採用了它的動態加載方式才得以解決。

　　　　通過對比，比較，我最後選擇的就是多說。

　　

　　C. 有言

　　　　官網：http://www.uyan.cc/

　　　　和多說很像，我沒有使用它的緣由是，發如今使用時它會拋出Javascript error，致使評論框不能顯示。所以屢次調試沒有解決問題後，我選擇了放棄。

 

2. 如何在Angular JS中正確使用評論插件？

　　這裏我還有一個需求，就是每篇文章都能講評論區分開，也就是每篇文章顯示本身的評論，評論不能串，或都顯示同樣。針對這個功能，其實每種插件都會提供線程Thread的概念，這個功能是指針對不一樣Thread ID的頁面加載不一樣的評論。

　　以多說爲例。

　　這裏使用的是多說插件的動態加載方式，標準代碼可參見官網：http://dev.duoshuo.com/docs/50b344447f32d30066000147。

　　在標準代碼中，有一個通用的Javascript方法，若是我有多個頁面，那麼這段代碼就須要複製屢次。但在Angular JS中沒有必要，Angular JS提供了Directive，即自定義標籤的功能，可定義一個directive，在每一個頁面引用便可。

 

directive.js

 1 myApp.directive("comment", function() {
 2     return {
 3         restrict: 'A',
 4         link: function(scope){
 5             // get the variable from controller
 6             var article_id = scope.article_id;
 7             
 8             var data_thread_key = 'article_' + article_id;
 9             var data_url = 'article_' + article_id;
10             var data_author_key = 'http://blogtest.com/#!/article.html/' + article_id;
11             
12             // dynamic load the duoshuo comment box
13             var el = document.createElement('div');//該div不須要設置class="ds-thread"
14             el.setAttribute('data-thread-key', data_thread_key);//必選參數
15             el.setAttribute('data-url', data_url);//必選參數
16             el.setAttribute('data-author-key', data_author_key);//可選參數
17             DUOSHUO.EmbedThread(el);
18             jQuery('#comment-box').append(el);
19         }
20     };
21 });

　　在這裏我用每篇文章的article id來作評論插件的thread id，保證每篇文章的評論都分開。同時使用Directive的另外一個好處是，directive裏的JS方法，能夠訪問controller中的scope變量，若是你是和我同樣在controller動態獲取文章，那麼就很方便在directive中拿到文章ID。

　

page.html

1 <div id="comment-box"></div> 
2 <div comment></div>

　　在html頁面中兩行代碼就足夠了。comment就是指咱們自定義的Directive插件。

　　

　　由此能夠看到評論插件的效果以下：

　　

 

3. 小結

　　在使用與選擇各類評論插件的過程當中，本身走了不少坑。總結以下：

　　1. 不一樣插件的產品質量不一樣，須要測試來發現與選擇，有的知名產品但對你來講，效果不好，固然可能有你的問題。

　　2. 不一樣插件對不一樣頁面不一樣評論的支持不一樣，有的支持好，有的支持很差。像disqus，和多說支持就較好。

　　3. Angular JS和插件組合使用時可能也有坑。在解決問題過程當中，也能夠加深對Angular JS的理解。

 　

　　但願對你有幫助。謝謝。

　　

　　我已經將本身的小網站開源，完整代碼可參見：https://github.com/kevinsong1990/nodejs-blog

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　- Kevin Song

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2015年8月2日