手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2024年09月的文章

Javascript1.6数组新特性和jquery的几个工具方法

Submitted by gouki on 2011, March 2, 9:32 PM

前两天看的文章里刚刚说ECMA 262中的一些String特性，又正好看到一篇博客介绍一些其他操作的实现，比如foreach,这个对于PHP用户来说就太常用了，而以前在javascript中只能用for(i in arr)来实现，虽然都没有问题，但毕竟看起来怪怪的。

上次的文章在这里：Javascript中各种trim的实现，这次的文章引用自Javascript1.6数组新特性和jquery的几个工具方法。

原文如下，其中会插入自己的内容，会特别标记

JavaScript 1.6 引入了几个新的Array 方法，具体的介绍见：New in JavaScript 1.6 。这些方法已经被写进了ECMA262 V5。现代浏览器（IE9/Firefox/Safari/Chrome/Opera）都已经支持，但IE6/7/8不支持。jquery的工具方法中提供了类似的功能。【膘叔：上次在讲trim的时候自己也测试过，确实IE8不支持，低于IE8的就更不用想了】

1、Array.forEach()和jquery的$().each()。在数组中的每个项上运行一个函数。类似java5 增强的for循环。

JavaScript代码
  1. var ary = [2,4,6,8];  
  2.   
  3. // js1.6 Array.forEach方法  
  4. ary.forEach(function(i){alert(i);});  
  5.   
  6. // jquery的写法  
  7. $(ary).each(function(){alert(this);});  
  8. //还可以写成这样  
  9. $(ary).each(function(index,item){alert(item);});//index是元素的索引，item是该元素 
  10. //膘叔：这个相当于PHP中如下代码。。
  11. while (list($key, $val) = each($fruit)) {
        echo     "$key => $val\n";
    }

 

2、Array.filter()和jquery的$.grep()。在数组中的每个项上运行一个函数，并将函数返回真值的项作为数组返回。简单的说就是用一个条件过滤掉不符合的数组元素，剩下的符合条件的元素组合成新的数组返回。

JavaScript代码
  1. var ary = [2,4,6,8];  
  2.   
  3. // js1.6 Array.filter()方法  
  4. var otherAry1 = ary.filter(function(item){return item>4;});  
  5. alert(otherAry1);//输出6，8  
  6.   
  7. // jquery写法(注意和$.each的区别)  
  8. // 此处你们函数中第一个参数是数组元素自身，第二个参数是数组元素索引  
  9. // 而$().each方法刚好相反，作者应该统一下。  
  10. var otherAry2 = $.grep(ary,function(item,index){return item>4;});  
  11. alert(otherAry2);//输出6，8 
  12. //膘叔：PHP中有类似函数，比如array_filter，也是可以通过callback来处理

 

3、Array.map()和jquery的$.map()。在数组中的每个项上运行一个函数，并将全部结果作为数组返回。这个方法非常强大，尤其是作用于DOM数组时（在abcc项目上用过，对每个查询模块DOM生成查询字符串）。简单说就是把每个数组元素运算的结果作为新数组元素（还是很拗口）【膘叔：php中有array_map,array_walk等】

JavaScript代码
  1. var ary = [2,4,6,8];  
  2.   
  3. // js1.6 Array.map()方法  
  4. var newAry1 = ary.map(function(item){return item+1;});//每个元素加1  
  5. alert(newAry1);//输出3，5，7，9  
  6.   
  7. // jquery写法  
  8. var newAry2 = $.map(ary,function(item,index){return item+1;});  
  9. alert(newAry2);//输出3，5，7，9  

4、Array.every()方法。检查数组元素是否都符合某个条件，只要有一个不符合返回false，否则返回true

JavaScript代码
  1. var ary = [2,4,6,8,10];  
  2.   
  3. alert(ary.every(function(item){return item>1}));//true  
  4. alert(ary.every(function(item){return item>2}));//false  

 

5、Array.some()方法。检查数组中元素是否符合某个条件，只要有一个符合返回true，否则返回false

JavaScript代码
  1. var ary = [2,4,,6,8,10];  
  2.   
  3. alert(ary.some(function(item){return item>9;}));//true  
  4. alert(ary.some(function(item){return item>10;}));//false  

 

最后给出 IE6/7/8的解决方案，让这些浏览器完美支持JS1.6的Array新方法。

JavaScript代码
  1. -function(){  
  2.       
  3. function applyIf(o, c) {  
  4.     if(o) {  
  5.         for(var p in c) {  
  6.             if(o[p]===undefined) {  
  7.                 o[p] = c[p];  
  8.             }  
  9.         }  
  10.     }  
  11.     return o;  
  12. }  
  13. applyIf(Array.prototype, {  
  14.     indexOf : function(obj, idx) {  
  15.         var from = idx == null ? 0 : (idx < 0 ? Math.max(0, arr.length + idx) : idx);  
  16.         for(var i = from, l = this.length; i < l; i++) {  
  17.             if(i in this && this[i] === obj) {  
  18.                 return i;  
  19.             }  
  20.         }  
  21.         return -1;  
  22.     },  
  23.     lastIndexOf : function(obj, idx) {  
  24.         var len = this.length, from = idx == null ? len - 1 : idx;  
  25.         if(from < 0) {  
  26.             from = Math.max(0, len + from);  
  27.         }  
  28.         for(var i = from; i >= 0; i--) {  
  29.             if (i in this && this[i] === obj) {  
  30.                 return i;  
  31.             }  
  32.         }  
  33.         return -1;  
  34.     },  
  35.     every : function(fn, thisObj) {  
  36.         var l = this.length;  
  37.         for(var i = 0; i < l; i++) {  
  38.             if(i in this && !fn.call(thisObj, this[i], i, this)) {  
  39.                 return false;  
  40.             }  
  41.         }  
  42.         return true;  
  43.     },  
  44.     some : function(fn, thisObj) {  
  45.         var l = this.length;  
  46.         for(var i = 0; i < l; i++) {  
  47.             if(i in this && fn.call(thisObj, this[i], i, this)) {  
  48.                 return true;  
  49.             }  
  50.         }  
  51.         return false;  
  52.     },  
  53.     filter : function(fn, thisObj) {  
  54.         var l = this.length, res = [], resLength = 0;  
  55.         for(var i = 0; i < l; i++) {  
  56.             if(i in this) {  
  57.                 var val = this[i];  
  58.                 if(fn.call(thisObj, val, i, this)) {  
  59.                     res[resLength++] = val;  
  60.                 }  
  61.             }  
  62.         }  
  63.         return res;  
  64.     },  
  65.     map : function(fn, thisObj) {  
  66.         var l = this.length, res = [];  
  67.         for(var i = 0; i < l; i++) {  
  68.             if(i in this) {  
  69.                 res[i] = fn.call(thisObj, this[i], i, this);  
  70.             }  
  71.         }  
  72.         return res;  
  73.     },  
  74.     forEach : function(fn, thisObj) {  
  75.         var l = this.length;  
  76.         for(var i = 0; i < l; i++) {  
  77.             if(i in this) {  
  78.                 fn.call(thisObj, this[i], i, this);  
  79.             }  
  80.         }  
  81.     }  
  82. });   
  83. }();  

------EOF----

 

最后这一段有事没事可以参考一下哦，毕竟这些都是可以拿来做参考的，比如象最后一个foreach，可以好好学学这些代码哦。

最后，var evens = [i for each (i in numbers) if (i % 2 == 0)];，看到这个，有没有感觉很象python的写法？？？这个是javascript 1.7中的写法了，看看这里的介绍：https://developer.mozilla.org/en/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects

Tags: jquery

Javascript | 评论:0 | 阅读:18699

表弟结婚

Submitted by gouki on 2011, March 1, 9:04 PM

时间果然是无情的，过去了就永远过去了。表弟比我小六岁，如今也成家了。祝福他永远幸福。愿天下有情人都不是同父异母的兄妹，还是终成眷属吧

自 WAP 发表

Misc | 评论:0 | 阅读:14253

alipay和tenpay等的接口操作记录学习

Submitted by gouki on 2011, February 28, 10:29 PM

昨天加班折腾了一下商铺的支付流程，也算是测试了这些接口，不过还是以alipay和tenpay接口居多（即支付宝和财务通接口）

说实话，财务通的接口有点乱，但有一点好处，每个接口的名称都不一样，不同的接口可以很容易认出来，而支付宝就不一样，名称是一样的，但代码和结构不太一样。累了一点。

不过，细分起来这些接口无非就是那几样东西

1、参数，这些都是固定的，有顺序，所以，其实是很方便的，参考一下文档即可。然后做一下MD5进行sign，这些是用来做数据校验的。（有一些接口是对GET参数按照key进行sort而处理的，这种最方便，直接ksort就OK了，如果不是就更方便按顺序录入参数就可以了。）

2、几个固定的URL，接口的URL，notify_url,return_url，了解了这些东西之后就好处理了。

无非就是这些东西，因为都是转向到支付页面进行处理的，所以也不用过多的担心，根据接口来就行了，当然为了要在支付宝或者财务通里看到订单的详细内容，需要那些Desc里写详细，当然你自己平台上的订单号也要传递过去，否则日后无法对帐。

由于我测试 的都是即时到账接口，所以没有什么特别多的经验可以谈，只是我自己了解后做的小记录而已。

Tags: alipay, tenpay, payment

PHP | 评论:0 | 阅读:17426

Javascript中各种trim的实现

Submitted by gouki on 2011, February 27, 9:15 PM

说到trim，其实这真的让无数前端郁闷。比如在处理input框里内容的时候，都会需要处理input内容的左右空格。但让人郁闷的是，String里居然没有原生方法，而每个人的实现方法都会不一样，效率也各有不同。

但是，新版的ECMA-262里已经表示有此方法了：

ECMA-262(V5)
  1. 15.5.4.20   String.prototype.trim ( )   
  2.   
  3. The following steps are taken:   
  4.   
  5. 1.   Call CheckObjectCoercible passing the this value as its argument.   
  6. 2.   Let S be the result of calling ToString, giving it the this value as its argument.   
  7. 3.   Let T be a String value that is a copy of S with both leading and trailing white space removed. The definition   
  8.      of white space is the union of  WhiteSpace and LineTerminator .   
  9. 4.   Return T.   
  10.   
  11. NOTE           The trim function is intentionally generic; it does not require that its this value be a String object. Therefore, it   
  12. can be transferred to other kinds of objects for use as a method.   

 

本文摘自http://www.cnblogs.com/snandy/archive/2011/02/26/1965866.html，只是经过我自己的整理了啦。

第一种：这种是大多数人都会写的，也是流传最多的代码了吧？

JavaScript代码
  1. String.prototype.trim = function() {  
  2.     //return this.replace(/[(^\s+)(\s+$)]/g,"");//會把字符串中間的空白符也去掉  
  3.     //return this.replace(/^\s+|\s+$/g,""); //  
  4.     return this.replace(/^\s+/g,"").replace(/\s+$/g,"");  
  5. }  

第二种：来自motools：

JavaScript代码
  1. function trim(str){  
  2.     return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');  
  3. }  

第三种：这是jQuery的，jquery的方法类似于第一种：

JavaScript代码
  1. function trim(str){  
  2.     return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');  
  3. }  

 

第四种是来自所摘博客中最写的：Steven Levithan 在进行性能测试后提出了在JS中执行速度最快的裁剪字符串方式，在处理长字符串时性能较好：

JavaScript代码
  1. function trim(str){  
  2.     str = str.replace(/^(\s|\u00A0)+/,'');  
  3.     for(var i=str.length-1; i>=0; i--){  
  4.         if(/\S/.test(str.charAt(i))){  
  5.             str = str.substring(0, i+1);  
  6.             break;  
  7.         }  
  8.     }  
  9.     return str;  
  10. }  

 

博客中还写了这么一点，那就是Molliza Gecko 1.9.1引擎中还给String添加了trimLeft ，trimRight 方法。

这让我想起了PHP的代码，比如ltrim,rtrim,trim之类的

Tags: js, trim

Javascript | 评论:0 | 阅读:23710

杂记

Submitted by gouki on 2011, February 26, 9:54 PM

一点小记录吧
第一：jQuery 升级到1.5.1了，前两天在群里的时候还有人在说，1.5不支持IE9，因为在使用的时候居然出错了。报错信息居然是document.getElementsByTagName，但是直接写这样的document.getE....是正常的。所以，这明显就是1.5的BUG。

当然这里不是说这个，这里是一篇翻译，http://www.cnblogs.com/sanshi/archive/2011/02/25/1964441.html。我觉得主要内容是这一段：

“jQuery 目前把 IE9作为一个重要的浏览器来支持。所有已知的BUG都已经得到修复或者已经提交给IE的开发团队以便在最终版本中得到解决。（All known bugs have been fixed and/or been reported to the IE team for resolution in the final release.）

三个新的参数被添加到jQuery.ajax()：

isLocal: 允许当前的执行环境被识别为“local”(例如文件系统)，jQuery默认情况下是不会识别这种环境。如下的协议被识别为本地环境：file, *-entension, widget. 如果需要修改isLocal，推荐使用$.ajaxSetup()方法来修改。

mimeType: 可以用来覆盖XHR的mime type.

xhrFields: 一个可以添加到原生XHR对象上的键值对（fieldName-fieldValue）。比如，你可以在跨域调用中设置withCredentials为true。”

第二：第二件嘛就是果粉比较开心的事了，那就是前两天刚刚苹果刚刚更新了商店里商品的信息，所有的mac pro现在都更新CPU为i5了，而且价格没变。这实在太让人激动开心了。黑黑，看来我去年没有买成mac pro也是属于塞翁失马焉知非福吧。

第三：yahoo的邮箱更新了。其实这并不算是什么 新闻吧。不过自从我用yahoo的邮箱以来，这是第三次更新了。虽然每一次打开邮箱都感觉比较慢（应该是邮箱服务器在国外的关系吧），但是我想说的是用户体验。用过很多WEB邮箱，几乎到现在都没有更新过，几年前什么 界面现在还是。。。当然QQ邮箱变化是较大的，以前最喜欢用网易的邮箱，SINA以前是最烂的，现在好很多。139邮箱原来也不行，现在也好很多了。gmail的变化也比较小，只是一些小功能的更新，只是这些小功能的更新会让用户使用起来更流畅。

第四：Google JavaScript Style Guide。这个嘛，啥时候有空的时候翻译翻译吧。还是算比较好的，虽然只是google的js style，但是对我们开发人员来说也可以学习学习。原文在这里http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml?showone=Tips_and_Tricks

Tags: jquery, apple

Misc | 评论:0 | 阅读:17173

Records:3085«‹286287288289290291292293294295›»