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

jQuery inViewport

Submitted by gouki on 2011, March 4, 11:11 PM

做前端的用户都会想过如何做lazyLoad，其实很多时候都有很多想法，比如占位图片，TEXTAREA后处理，根据滚动条的位置显示图片等。
介绍介绍上面的说法，因为这些名词是我自己想出来的。。。和一些标准的前端讲法可能是不一致的。
1、占位图片，这个用的比较多一点，即在页面还没有全部加载完的时候，涉及到图片的地方，先用占位图片（1X1大小的图片进行放大）占好，不影响整个DOM的加载，等全部加载完后，再慢慢加载图片。这样的方式优点在于，不影响DOM加载，代码修改量也最小，缺点是，其实还是加载了所有的图片。。。
2、teatarea后处理，这个，被用的比较明显的应该算是淘宝的trademark的页面上，当时在抢购活动的时候就用上了这个技巧，trademark这个页面全是图片，如果全部读出来并显示，很可能一下子就下载大约3M左右的图片，如果用第一种办法，那么占用的流量就非常夸张。于是淘宝当时的页面源码里就很明显的内容就是第一屏是正常的HTML代码，第二屏开始，把每一层的内容都放在textarea容器里。当滚动条滚动的时候，即当textarea开始出现在页面中时，就把textarea中的HTML代码转化成DOM，显示在页面上。它的优点是，textarea中的内容在初次加载时，不会被当成DOM被页面所加载。因此事实上首次加载的时候，只有第一屏的内容。缺点是需要写很多JS。（和第三点也有关）
3、根据滚动条的位置显示图片，这个其实是现在很多网站采用的技巧了，即滚动条滚动到哪里，图片就开始加载到哪里。和第二点其实有点象，只是处理的结构不一样而已。
介绍完这个，那就好好介绍一下第三点的技术了，原文从这里来：http://www.zhangjingwei.com/archives/jquery-inviewport/。

晚上在微博上“拔赤”写了个lazyload插件，发现其中用到一个很有意思的方法”div.inViewportRegion()”，字面意思就是在可视区域内。

在网上找了找，发现这是YUI提供的一个组件，觉得很有意思。
http://gillserver.com/yui/api/dom-region.js.html

如果jQ里面也包含类似的方法，可以做很多事，于是GG了一下，发现国外的同学写过这种选择器，代码表现上更直观。

代码如下：

JavaScript代码
  1. (function($) {  
  2.    
  3.     $.belowthefold = function(element, settings) {  
  4.         var fold = $(window).height() + $(window).scrollTop();  
  5.         return fold < = $(element).offset().top - settings.threshold;  
  6.     };  
  7.    
  8.     $.abovethetop = function(element, settings) {  
  9.         var top = $(window).scrollTop();  
  10.         return top >= $(element).offset().top + $(element).height() - settings.threshold;  
  11.     };  
  12.    
  13.     $.rightofscreen = function(element, settings) {  
  14.         var fold = $(window).width() + $(window).scrollLeft();  
  15.         return fold < = $(element).offset().left - settings.threshold;  
  16.     };  
  17.    
  18.     $.leftofscreen = function(element, settings) {  
  19.         var left = $(window).scrollLeft();  
  20.         return left >= $(element).offset().left + $(element).width() - settings.threshold;  
  21.     };  
  22.    
  23.     $.inviewport = function(element, settings) {  
  24.         return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);  
  25.     };  
  26.    
  27.     $.extend($.expr[':'], {  
  28.         "below-the-fold": function(a, i, m) {  
  29.             return $.belowthefold(a, {threshold : 0});  
  30.         },  
  31.         "above-the-top": function(a, i, m) {  
  32.             return $.abovethetop(a, {threshold : 0});  
  33.         },  
  34.         "left-of-screen": function(a, i, m) {  
  35.             return $.leftofscreen(a, {threshold : 0});  
  36.         },  
  37.         "right-of-screen": function(a, i, m) {  
  38.             return $.rightofscreen(a, {threshold : 0});  
  39.         },  
  40.         "in-viewport": function(a, i, m) {  
  41.             return $.inviewport(a, {threshold : 0});  
  42.         }  
  43.     });  
  44.    
  45. })(jQuery);  

来源：http://www.appelsiini.net/projects/viewport

简单测了下，不错，呵呵~

Demo：http://www.zhangjingwei.com/inviewport.zip

------EOF--
事后测试了一下，加载了这段的JS后，剩下对代码的处理就其实不多了，只需要BIND一个in-viewport就OK了，也算是比较方便。值得推荐，不知道啥时候类似功能可以直接进jQuery类库

Tags: jquery, inviewport, lazyload

Javascript | 评论:0 | 阅读:19426

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 | 阅读:19712

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 | 阅读:24812

附上昨天晚上进制转换的代码

Submitted by gouki on 2011, February 16, 9:32 AM

写的烂，不要见怪。。

JavaScript代码
  1.  <script>  
  2. function QRank(scores){  
  3.     this._scores=this._rank = 0;  
  4.     this._max = 10000;  
  5.     this.setScore(scores);  
  6. }  
  7. QRank.prototype.setScore = function(scores){  
  8.     this._scores = parseInt(scores);  
  9. }  
  10. QRank.prototype.getScore = function(){  
  11.     return this._scores;  
  12. }  
  13. QRank.prototype.setRank = function(){  
  14.     //this._rank = Math.floor(Math.sqrt(this._scores+4));  
  15.     var score = this.getScore();  
  16.     var j=0;  
  17.     for(var i=0;i<this._max;i++){  
  18.         if(this.getScore() < j){  
  19.             this._rank = (i-1);  
  20.             break;  
  21.         }  
  22.         j+=(5+i*2);  
  23.     }     
  24. }  
  25. QRank.prototype.getRank = function(){  
  26.     return this._rank;  
  27. }  
  28. QRank.prototype.getStar = function(){  
  29.     var rank;  
  30.     if((rank = this.getRank()) == 0){  
  31.         this.setRank();  
  32.         rank = this.getRank();  
  33.     }  
  34.     var rank4 = rank.toString(4).split("").reverse(); //convert  
  35.     var icon = '';  
  36.     var iconarr = ['☆','★','○','●','$'];  //对应，星星，月亮，太阳，皇冠，美元对应未知。
  37.     for (var i in rank4){  
  38.         icon = iconarr[i].repeat(rank4[i]) + icon;  
  39.     }  
  40.     document.write(icon);  
  41. }  
  42. String.prototype.repeat = function(num){  
  43.     str = [];  
  44.     for (var i=0;i <num ; i++){  
  45.         str.push(this.toString().split(""));  
  46.     }  
  47.     return str.join("");  
  48. }  
  49. var q = new QRank(1000);  
  50. q.getStar();  
  51. alert(q.getRank());  
  52.  </script>  

Tags: qq, rank

Javascript | 评论:0 | 阅读:16674

进制转换

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

今天偶尔看到了毛毛虫的关于QQ等级的算法的PHp实现，借着雾叔所建议的转行做前端的想法，于是写了一个JS的class，用来做JS的实现。当然也遇到一些问题

1、原来根据小时计算的算法，目前由于是根据天数来的，所以算法变了，但其实也很方即，所需天数+=5+（等级X2），然后从等级0开始循环，即可求出所需天数，反之根据天数也可以求出等级数

2、画图，由于QQ等级是4进制的，即逢四进一，三个星星+一个星星=一个月亮，如此类推。所以，刚开始的时候有点麻烦，因为我不知道JS的进制转换函数是什么 ，查了一下才知道，原来是那样的方便。PHP任意转换的函数是base_convert，而JS对于10进制的转换居然直接toString就可以了，例如把10转成4进制，即：10.toString(4)，返回22，即2个月亮2个星星。方便 吧，简单吧。。。

最后加一个，任意进制转为10进制，parseInt(123,3)，这里第二个参数就是第一个参数的进制单位，当然要对应，比如你输入了123，结果第二个参数是2，不出错才怪。。会返回NaN的

OK，代码在单位里，也是第一次尝试用JS实现对象，写的不好请谅解，明天上代码。。。

Tags: base_convert, tostring, parseint

Javascript | 评论:0 | 阅读:16484

Records:306«‹18192021222324252627›»