小编Jak*_*ake的帖子

测试使用jQuery的Angular指令

我在为一些Angular指令编写单元测试时遇到了麻烦.特别是那些在指令中使用jQuery的人.我已经设计了一个简单的例子来说明我的问题.

这个愚蠢的指令将click事件绑定到元素.单击时,它会隐藏元素.根据Angular,传递给指令的元素将被包装为jQuery元素.如果jQuery可用,它将使用jQuery,否则它将使用Angular的jQuery Lite.实际上,如果我在包含jQuery的浏览器中使用此指令,该指令将起作用并将隐藏单击的元素.

angular.module('myApp').directive('clickhide', function() { return {
    link: function(scope, element, attrs) { 
        element.bind('click', function(e) {
            element.hide();
            scope.$digest();
        });
    }
}});
Run Code Online (Sandbox Code Playgroud)

以下是该指令的Karma单元测试规范:

describe('clickhide', function() {
    var scope, elm;

    beforeEach(module('MyApp'));

    beforeEach(inject(function($rootScope, $compile) {
        scope = $rootScope;
        elm = angular.element('<div clickhide></div>');
        $compile(elm)(scope);
        scope.$digest();
    }));

    it('should do a click', function() {
        elm[0].click();
        //OOPS: undefined is not a function error
        expect($(elm).find(":hidden").length).toBe(1);
    });
});
Run Code Online (Sandbox Code Playgroud)

当我运行这个测试时,它失败并出现"undefined is not a function"的错误,意味着没有加载jQuery,Angular使用的是jQuery Lite,它没有定义hide().

我找到了两种方法来解决这个问题.

  1. 不要使用jQuery.需要重写我不想做的指令.

  2. 在我的指令中明确地包装元素以使它们成为jQuery元素:$(element).hide().还需要修改我的指令,我不想这样做.如果没有其他选择,我当然可以这样做.

我觉得应该可以让Angular在指令中自动使用jQuery,就像在Web浏览器中使用单元测试一样.我认为关键点在于Angular文档中的这一行:

要使用jQuery,只需在DOMContentLoaded事件触发之前加载它.

在运行单元测试时DOMContentLoaded发生时我不清楚.我的Karma配置文件包含jQuery作为第一个文件,在angular之前:

module.exports = function(config) {
  config.set({ …
Run Code Online (Sandbox Code Playgroud)

javascript jquery unit-testing angularjs karma-runner

11
推荐指数
1
解决办法
3468
查看次数

如何使用HTML5应用程序缓存保留SSL

我有一个现有的网站,可以在http和https(SSL)上正常工作.SSL证书有效,可以通过在浏览器中检查来确认.

我开始使用清单文件在我的网站上启用HTML5应用程序缓存.这对于使页面加载更快,最终用于脱机功能非常有用.这在使用常规http连接时非常有用.通过https(SSL)访问站点时会出现问题.当我这样做时,我可以很好地访问我的网站的内容,URL说"https"但是我看到以下行为:

Safari:它显示锁定图标,但是当我单击锁定图标以检查证书时,它表示证书无效.

Firefox:不显示指示加密的彩色地址栏,并且在检查证书时,它表示没有证书.

Chrome和Opera:正确显示URL的安全性,当单击锁定图标时,它会显示SSL证书信息.是!

我知道使用应用程序缓存会导致资源从浏览器本地提供,因此没有加密发生,但客户不一定知道后台发生了应用程序缓存,他们希望看到有效的SSL证书以及连接安全的指示.Safari和Firefox似乎错误地执行了此操作,除非我遗漏了某些内容.这是我的问题.有谁知道如何让Safari和Firefox显示从应用程序缓存提供的页面的SSL证书?你需要做些什么特别的事情,还是Safari和Firefox的bug?

safari ssl html5 application-cache

9
推荐指数
1
解决办法
1577
查看次数

Ajax调用被浏览器取消了

我正在使用Prototype JS框架来执行Ajax调用.这是我的代码:

new Ajax.Request( '/myurl.php', {method: 'post', postBody: 'id='+id+'&v='+foo, onSuccess: success, onFailure: failed} );

function success(ret) {
console.log("success",ret.readyState, ret.status);
}
function failed(ret) {
console.log("failed",ret.readyState, ret.status);
}
Run Code Online (Sandbox Code Playgroud)

大多数情况下,这样工作正常,成功函数调用状态代码为200.在Safari上大约5%的时间调用成功函数,状态代码为0.在这种情况下,当我查看Web检查器的"网络"选项卡,列出了ajax调用,状态为"已取消".我可以用服务器日志确认,请求永远不会到达服务器.这就好像ajax请求被立即取消,甚至没有尝试连接到服务器.我没有找到任何可靠的方法来重现这一点,它似乎是随机的.我做了20次,它发生了一次.

有谁知道什么会导致ajax调用被取消或返回状态代码0?

ajax http-status-codes prototypejs

6
推荐指数
1
解决办法
1732
查看次数

AngularJS资源未设置Content-Type

我正在尝试编写一个AngularJS资源模块,它将一些数据发布到服务器.默认内容类型似乎是"application/xml".我试图将内容类型覆盖为"application/x-www-form-urlencoded".当做一个正常的$ http.post()我可以设置内容类型,当我签入Firebug时,我可以看到它设置正确.当我使用资源的POST方法时,我无法从默认值中更改内容类型.我认为我是根据文档描述的方式来做的.

http://jsfiddle.net/vBsUH/3/

var myApp = angular.module('myApp',['myResource']);

angular.module('myResource', ['ngResource']).factory('myResource', function($resource){
   return $resource('/echo/json',{},{
      add:{ method:'POST', params:{ foo:'1' }, headers:{'Content-Type':'application/x-www-form-urlencoded'} }
   });
});

function MyCtrl($scope,$http,myResource) {
   $scope.click = function() {

      //This will make an ajax call with a content-type of application/xml    
      myResource.add();

      //this will make an ajax call with a content-type of application/x-www-form-urlencoded
      $http.post('/echo/json','foo=1',{'headers':{'Content-Type':'application/x-www-form-urlencoded'}});

   }
}?
Run Code Online (Sandbox Code Playgroud)

关于如何使用不同的内容类型发布AngularJS资源的任何想法或示例将非常感激.

javascript angularjs

6
推荐指数
1
解决办法
2万
查看次数

如何批量排序JS数组(性能)

我有一个JS应用程序需要做一个复杂的大型数组,然后显示它.使用内置array.sort(cb)方法可能需要1秒钟的数据.这足以让我的UI变得笨拙.

因为UI的高度足以在屏幕上显示已排序数组的子集,其余部分位于滚动或分页下方,所以我有了一个想法.如果我制作了一个通过大型数组并快速排序的算法,前N个项目完全排序,但数组中的其余项目未完全排序,该怎么办?每次运行算法时,它都会从上到下对数组进行排序.

因此,我可以将处理分解成块并具有流畅的UI.在最初的几秒钟内,阵列将无法完美排序,但缺陷将位于滚动下方,因此不会被注意到.

我天真的解决方案是编写我自己的"选择排序",能够在N次匹配后中断并稍后恢复,但"选择排序"是一个非常糟糕的算法.更快的算法(根据我的理解)必须完成以保证前N个项目是稳定的.

有谁知道现有的解决方案吗?我疯了吗?有什么建议?

UPDATE

根据@moreON提出的想法,我写了一个自定义的QuickSort,一旦它具有所需的精度就会挽救.此数据的本机排序需要1秒.常规QuickSort大约需要250毫秒,这已经出乎意料地好了.在排序前100个项目后匆匆忙忙的QuickSort活跃了10ms,这要好得多.然后我可以再花250ms来完成排序,但这并不重要,因为用户已经在查看数据了.这将用户经历的延迟从1秒减少到10毫秒,这非常棒.

//Init 1 million random integers into array
var arr1 = [];
var arr2 = [];
for(var i=0;i<1800000;i++) {
   var num = Math.floor(Math.random() * 1000000);
   arr1.push(num);
   arr2.push(num);
}
console.log(arr1);

//native sort
console.time("native sort");
arr1.sort(function(a,b) { return a-b; });
console.timeEnd("native sort"); //1sec
console.log(arr1);

//quicksort sort    Ref: https://www.nczonline.net/blog/2012/11/27/computer-science-in-javascript-quicksort/
function swap(arr, a, b) {
   var temp = arr[a];
   arr[a] = arr[b];
   arr[b] = temp;
}
function cmp(a,b) {
   return (a<b);
}
function partition(items, left, right) …
Run Code Online (Sandbox Code Playgroud)

javascript arrays sorting algorithm

6
推荐指数
1
解决办法
820
查看次数

当Apache KeepAlive打开时,浏览器会丢弃POST

多年来,由于性能原因,我已经开启了apache keep-alive.它允许重用连接并使我的页面加载速度更快.然而,在过去的几个月里,一个奇怪的问题已经开始发生.

有时,从用户的浏览器到我的应用程序的连接被删除,导致数据无法保存并显示错误.我做了大量的测试,并认为我已经缩小了问题范围.我使用哪种浏览器并不重要.数据库和服务器端脚本不是一个因素.它只发生在没有GET的POST中,这很有意思.如果我禁用keep-alive,它就会消失.

这就是我认为正在发生的事情.我将KeepAliveTimeout设置为1秒.1秒钟后,服务器终止连接,但客户端需要很短的时间(比方说100毫秒)才能终止连接.因此,在1秒到1.1秒之间,如果客户端尝试重用连接并POST一些数据,那么POST将失败.我通过制作一个脚本以1秒的间隔准确地发布一些数据来重现这一点,我可以看到来自客户端的所有其他连接都被删除了.如果我以0.9秒的间隔或1.1秒的间隔将脚本更改为POST,它永远不会断开连接,因为避免了特定的时间窗口.如果我将KeepAliveTimeout更改为2秒或其他数字,那么它只是推出时间窗口并没有真正解决问题.

我的POST来自javascript(jquery.ajax),但我想如果你有正确的时机,它也可能来自常规表单POST.

在Safari和IE中,连接立即被丢弃并失败.在Firefox和Chrome中,浏览器会停滞几十秒,然后在成功的新连接上重新发送请求.

如果这只是keepalive的一个根本问题,那么为什么这种方法工作多年并且在过去几个月才开始这样做是令人困惑的.暂时,我已经禁用了keep-alive,但是如果可能的话我想找到一种方法来使用它.我希望这里有人知道解决方案.

javascript apache keep-alive

5
推荐指数
0
解决办法
1125
查看次数

Javascript crc32函数和PHP crc32不匹配UTF8

我一直在尝试从PHP获取crc32函数以匹配javascript生成的结果.我已经经历了4个不同的JavaScript CRC32库走了(1,2,3,4),我在网上和他们都为ASCII做工精细,但是当你扔掉它的UTF8字符,所有四个JS库输出相同的错误发现回答.

这个旧的stackoverflow问题似乎是最接近的答案,但它在我的测试中仍然不起作用.

例如:

PHP: crc32('tést') = 727386373

JavaScript的: crc32.genBytes('tést') = 3109344618

为方便起见,这是最紧凑的版本.

function stringToBytes ( str ) {
  var ch, st, re = [];
  for (var i = 0; i < str.length; i++ ) {
    ch = str.charCodeAt(i);  // get char 
    st = [];                 // set up "stack"
    do {
      st.push( ch & 0xFF );  // push byte to stack
      ch = ch >> 8;          // shift value down by …
Run Code Online (Sandbox Code Playgroud)

javascript php crc32

3
推荐指数
1
解决办法
2741
查看次数