单元测试 – 在单页应用程序中使用Disqus的最佳方法是什么？
发布时间：2020-12-17 07:44:39 所属栏目：安全 来源：网络整理
导读：在单页应用程序中使用Disqus的最佳方法是什么？ 我看到角度js文档已经成功地实现了它. 目前我们的方法看起来像是在AngularJS应用程序中,但似乎不稳定,很难测试,并加载错误的线程ids(同一个线程几乎随处可见). 'use strict';angular.module('studentportalenA
|
在单页应用程序中使用Disqus的最佳方法是什么？
我看到角度js文档已经成功地实现了它. 目前我们的方法看起来像是在AngularJS应用程序中,但似乎不稳定,很难测试,并加载错误的线程ids(同一个线程几乎随处可见). 'use strict';
angular.module('studentportalenApp.components')
.directive('disqusComponent',['$log','$rootScope',function($log,$rootScope) {
var _initDisqus = function _initDisqus(attrs)
{
if(window.DISQUS) {
DISQUS.reset({
reload: true,config: function () {
this.page.identifier = attrs.threadId;
this.disqus_container_id = 'disqus_thread';
this.page.url = attrs.permalinkUrl;
}
});
}
else
{
$log.error('window.DISQUS did not exist before directive was loaded.');
}
}
//Destroy DISQUS bindings just before route change,to properly dispose of listeners and frame (postMessage nullpointer exception)
$rootScope.$on('$routeChangeStart',function() {
if(window.DISQUS) {
DISQUS.reset();
}
});
var _linkFn = function link(scope,element,attrs) {
_initDisqus(attrs);
}
return {
replace: true,template: '<div id="disqus_thread"></div>',link: _linkFn
};
}]);
我也想在我的AngularJS动力博客中加入Disqus.我发现现有的解决方案有点笨重,所以我写了我自己的指令：
.directive('dirDisqus',function($window) {
return {
restrict: 'E',scope: {
disqus_shortname: '@disqusShortname',disqus_identifier: '@disqusIdentifier',disqus_title: '@disqusTitle',disqus_url: '@disqusUrl',disqus_category_id: '@disqusCategoryId',disqus_disable_mobile: '@disqusDisableMobile',readyToBind: "@"
},template: '<div id="disqus_thread"></div><a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>',link: function(scope) {
scope.$watch("readyToBind",function(isReady) {
// If the directive has been called without the 'ready-to-bind' attribute,we
// set the default to "true" so that Disqus will be loaded straight away.
if ( !angular.isDefined( isReady ) ) {
isReady = "true";
}
if (scope.$eval(isReady)) {
// put the config variables into separate global vars so that the Disqus script can see them
$window.disqus_shortname = scope.disqus_shortname;
$window.disqus_identifier = scope.disqus_identifier;
$window.disqus_title = scope.disqus_title;
$window.disqus_url = scope.disqus_url;
$window.disqus_category_id = scope.disqus_category_id;
$window.disqus_disable_mobile = scope.disqus_disable_mobile;
// get the remote Disqus script and insert it into the DOM
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + scope.disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}
});
}
};
});
优点 我认为这种方法的主要优点是它保持简单.在您的应用程序注册了该指令后,您不需要在JavaScript中编写任何JavaScript或设置任何配置值.所有配置都通过传递指令标签中的属性来处理,如下所示： <dir-disqus disqus-shortname="YOUR_DISQUS_SHORTNAME"
disqus-identifier="{{ article.id }}"
disqus-title="{{ article.title }}"
...>
</dir-disqus>
此外,您不需要更改您的index.html文件以包含Disqus .js文件 – 该指令将在准备就绪时动态加载它.这意味着所有额外的.js只会在实际使用Disqus指令的那些页面上加载. 您可以看到完整的源和文档here on GitHub 警告 当您的网站在HTML5Mode中时,以上内容才能正常工作,即不会在您的网址中使用“#”.我正在更新GitHub上的代码,所以在不使用HTML5Mode时,该指令将工作,但要警告您必须设置一个hashPrefix的“！”来制作“hashbang”URL. www.mysite.com/#!/page/123.这是Disqus施加的限制 – 见http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |