【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日