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

Javascript堵塞问题的解决[转]

Submitted by gouki on 2008, December 8, 5:10 PM

本文来自：Thinking in LAMP - 老王的技术手册，网址是在baidu上面的，文章URL是：http://hi.baidu.com/thinkinginlamp/blog/item/1ebc2e730600891b8601b049.html

原文内容如下：（为了方便，我将图片COPY过来了，而并非是引用，不好意思老王）

所谓“Javascript堵塞问题”，指的是浏览器在下载javascript文件的时候，会堵塞其他下载进程，并且多个javascript文件之 间，只能一个一个下载，不能并行下载。浏览器之所以要这么干，一来是因为javascript里可能会有一些涉及页面渲染的操作，比如 document.write，所以要先把他们加载完，以免影响用户体验，二来是如果并发下载javascript文件，代码执行的先后顺序会错乱，从而 引起逻辑错误。为了规避上述弊端，YSlow建议如果有多个javascript文件，并且这些文件里没有类似document.write等页面渲染的 操作，那么应该尽可能把他们合并成一个文件，并放到页面的尾部。不过很多时候，合并javascript文件是个浩大的工程，不仅破坏了模块化结构，而且 还可能会给代码维护带来不必要的麻烦，今天说说另一个方法，以期避免对现有代码的大规模修改。

先做两个javascript文件，他们是a.php，b.php，之所以用php文件是因为我只会这个，内容如下：

PHP代码
  1. <?php sleep(1); ?>  

 

可以看到a.php和b.php的内容是一样的，其中之所以sleep一秒钟，是为了让演示的效果更明显。

现在让我们来做一个页面（x.htm），看看javascript堵塞问题是如何产生的：

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>DEMO</title>  
  4. <script type="text/javascript" src="a.php"></script>  
  5. <script type="text/javascript" src="b.php"></script>  
  6. </head>  
  7. <body>  
  8. <img src="http://www.google.com/intl/en_ALL/images/logo.gif">  
  9. </body>  
  10. </html>  

浏览这个页面的时候，通过Pagetest软件，我们可以看到类似下面的结果：

大小: 3.2 K 尺寸: 500 x 69 浏览: 2155 次 点击打开新窗口浏览全图

我们可以看到，logo.gif图片的下载进程被堵塞了，并且a.php和b.php是分别下载的。

下面让我们再来做一个页面（y.htm），看看是怎么解决这个问题的：
XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>DEMO</title>  
  4. <script>  
  5. var load = function(file) {  
  6.     var scriptElement = document.createElement("script");  
  7.     scriptElement.src = file;  
  8.     document.getElementsByTagName("head")[0].appendChild(scriptElement);  
  9. }  
  10. load('a.php');  
  11. load('b.php');  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <img src="http://www.google.com/intl/en_ALL/images/logo.gif">  
  16. </body>  
  17. </html>  
浏览这个页面的时候，通过Pagetest软件，我们可以看到类似下面的结果：
大小: 3.23 K 尺寸: 500 x 69 浏览: 2084 次 点击打开新窗口浏览全图
结论显而易见，logo.gif图片的下载进程并没有被堵塞，并且a.php和b.php是并行下载的。

参考资料：http://stevesouders.com/docs/web20expo-20080425.ppt

膘叔：虽然从我个人而言，我会考虑将js换到其他的域名下面，以防止堵塞（所谓的YAHOO设计网页14条军规中的），然后通过一个程序minify来进行引用。关于minify我会单独介绍。（其实也是COPY别人的文章而来，最近是很懒了。一是要考试，二是单位太忙，只能做到天天更新，但无法原创了）

 

Tags: javascript, load, block

Javascript | 评论:0 | 阅读:20692

利用PHP裁剪图片

Submitted by gouki on 2008, December 6, 11:45 PM

其实，用PHP裁剪图片的原理是很简单的，无非就是用javascript画出一个方块，计算一下四个角的顶点，然后从原图中按照这四个点的坐标把当中的图切出来。

网上有现成的例子：http://www.coderhome.net/zifa/?p=351，不过里面的JS库用的是mootools的，如果要看，请直接到该网上去看，以后，等有空了，用jQuery的模拟一下，呵呵。
jQuery的插件还是很好开发的

Tags: php, 裁剪, mootools, javascript

PHP | 评论:4 | 阅读:27509

JavaScript---Web流程定义工具

Submitted by gouki on 2008, December 4, 11:47 PM

用javascript+vml来做工作流，确实是第一次看到，所以我在看到有这个新闻的时候，就觉得特别的吃惊。当年的TRS就是因为有一个activex版的工作流控件的CMS，导致他的价格非常的高，今天能够看到有javascript版的，惊讶是难免的。。。

只是并非所有的机器都支持VML，所以它的适用范围还是有限的，不过，话又说回来，activex也只支持IE，但仍然有那么多人在用。看来，只要是好东西，即使你不跨平台，照样有人用的起劲。

闲话不说了，附上原文网址和他的说明，原文：http://www.cssrain.cn/article.asp?id=1192

开发语言;javascript,html,vml,json,css
功能：
1.环节可用鼠标拖拽
鼠标选中环节后不释放，拖拽鼠标，环节将随鼠标移动，释放鼠标后，环节不再移动。
2.路径的两个端点可以通过鼠标拖拽，改变路径指向的环节
鼠标选中路径的端点后不释放，拖拽鼠标，路径被选中的端点将鼠标移动，在选中的环节释放鼠标后，路径被选中的端点将指向该选中的环节。
3.ctrl+a，全选。
4.按住ctrl，鼠标选中对象，可以多选。
5.delete，删除选中对象。
6.使用鼠标多选
鼠标点击空白处不释放，拖拽鼠标，会出现一个长方形虚框，虚框的范围随着鼠标移动而变化，虚框范围内的对象将被选中。
7.动态添加环节和路径的属性

大小: 38.19 K 尺寸: 458 x 376 浏览: 2112 次 点击打开新窗口浏览全图

由于对这个东西很吃惊，所以，把图片和附件保存到了本地。需要的朋友可以点上面那个网址或者点本文的附件进行下载

（不好意思，刚发现附件有密码，我也不知道是什么密码，有破解软件的朋友只能辛苦一下了，或者去上面的cssrain.cn问站长去吧，我这里仅仅是作个备份）

附件: i200812491011.rar (66.99 K, 下载次数:3185)

Tags: javascript, 工作流, web, vml

Javascript | 评论:0 | 阅读:26642

深入理解Javascript闭包(closure)

Submitted by gouki on 2008, November 16, 6:02 PM

經過指點，獲悉原文為：http://www.felixwoo.com/archives/247

我轉貼的文章來源：http://www.knowsky.com/442121.html

PS：虽然我是从上面拷来的，但我并不建议打开这个网页看，因为，上面全是广告。个人猜测，代码也是他拷来的，但没有亲自验证，我也没法打包票。不过东西有点用，所以我也就COPY过来了。

内容如下：

最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。

一、什么是闭包？
“官方”的解释是：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话，因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码：

JavaScript代码
  1. function a(){  
  2.  var i=0;  
  3.  function b(){  
  4.  alert(++i);  
  5.  }  
  6.  return b;  
  7. }  
  8. var c = a();  
  9. c();  

这段代码有两个特点：
1、函数b嵌套在函数a内部；
2、函数a返回函数b。
这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：

当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

我猜想你一定还是不理解闭包，因为你不知道闭包有什么作用，下面让我们继续探索。

二、闭包有什么作用？
简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但大概意思就是这样，理解闭包需要循序渐进的过程。
在上面的例子中，由于闭包的存在使得函数a返回后，a中的i始终存在，这样每次执行c()，i都是自加1后alert出i的值。

那 么我们来想象另一种情况，如果a返回的不是函数b，情况就完全不同了。因为a执行完后，b没有被返回给a的外界，只是被a所引用，而此时a也只会被b引 用，因此函数a和b互相引用但又不被外界打扰(被外界引用)，函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

三、闭包内的微观世界
如 果要更加深入的了解闭包以及函数a和嵌套函数b的关系，我们需要引入另外几个概念：函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。

1、当定义函数a的时候，js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”，如果a是一个全局函数，则scope chain中只有window对象。
2、当函数a执行的时候，a会进入相应的执行环境(excution context)。
3、在创建执行环境的过程中，首先会为a添加一个scope属性，即a的作用域，其值就为第1步中的scope chain。即a.scope=a的作用域链。
4、 然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象，但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后，把活动对象添加到a 的作用域链的最顶端。此时a的作用域链包含了两个对象：a的活动对象和window对象。
5、下一步是在活动对象上添加一个arguments属性，它保存着调用函数a时所传递的参数。
6、最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中，完成了函数b的的定义，因此如同第3步，函数b的作用域链被设置为b所被定义的环境，即a的作用域。

到此，整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c，又函数b的作用域链包含了对函数a的活动对象的引用，也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用，函数b又依赖函数a，因此函数a在返回后不会被GC回收。

当函数b执行的时候亦会像以上步骤一样。因此，执行时b的作用域链包含了3个对象：b的活动对象、a的活动对象和window对象，如下图所示：（这里看了一下，确实没有图，看来果然是拷贝过来的，稍稍验证了我的说法，呵呵。。。。唉。可惜我确实不知道原文在哪里，不过，我是从他的网站拷来的，还是给他一个链接，毕竟我的资料来源是该网站）

大小: 56.19 K 尺寸: 500 x 180 浏览: 1694 次 点击打开新窗口浏览全图

（附上原文圖片）

如图所示，当在函数b中访问一个变量的时候，搜索顺序是先搜索自身的活动对象，如果存在则返回，如果不存在将继续搜索函数a的活动对象，依 次查找，直到找到为止。如果整个作用域链上都无法找到，则返回undefined。如果函数b存在prototype原型对象，则在查找完自身的活动对象 后先查找自身的原型对象，再继续查找。这就是Javascript中的变量查找机制。

四、闭包的应用场景
1、保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
2、在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。
以上两点是闭包最基本的应用场景，很多经典案例都源于此。

五、Javascript的垃圾回收机制
在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。

 

Tags: 闭包, closure, javascript, archive

Javascript | 评论:2 | 阅读:23396

jQuery Plugins -- JQzoom

Submitted by gouki on 2008, November 14, 10:52 AM

demo地址：http://www.51toria.cn/demo/JQplus/jqzoom/

 

使用的JS：

 

XML/HTML代码（用JS代码的时候居然卡住了。没办法，只能用XML代码来展示）
  1. //**************************************************************  
  2. // jQZoom allows you to realize a small magnifier window,close  
  3. // to the image or images on your web page easily.  
  4. //  
  5. // jqZoom version 1.0  
  6. // Author Doc. Ing. Renzi Marco(www.mind-projects.it)  
  7. // Released on Dec 05 2007  
  8. // i'm searching for a job,pick me up!!!  
  9. // mail: renzi.mrc@gmail.com  
  10. //**************************************************************  
  11.   
  12. (function($){  
  13.   
  14.         $.fn.jqueryzoom = function(options){  
  15.   
  16.         var settings = {  
  17.                 xzoom: 200,     //zoomed width default width  
  18.                 yzoom: 200,     //zoomed div default width  
  19.                 offset: 10,     //zoomed div default offset  
  20.                 position: "right"  //zoomed div default position,offset position is to the right of the image  
  21.             };  
  22.   
  23.             if(options) {  
  24.                 $.extend(settings, options);  
  25.             }  
  26.   
  27.         $(this).hover(function(){  
  28.   
  29.   
  30.             var imageLeft = $(this).get(0).offsetLeft;  
  31.             var imageRight = $(this).get(0).offsetRight;  
  32.             var imageTop =  $(this).get(0).offsetTop;  
  33.             var imageWidth = $(this).get(0).offsetWidth;  
  34.             var imageHeight = $(this).get(0).offsetHeight;  
  35.   
  36.             var bigimage = $(this).attr("alt");  
  37.   
  38.             if($("div.zoomdiv").get().length == 0){  
  39.   
  40.             $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");  
  41.   
  42.             }  
  43.   
  44.             if(settings.position == "right"){  
  45.   
  46.             leftpos = imageLeft + imageWidth + settings.offset;  
  47.   
  48.             }else{  
  49.   
  50.             leftpos = imageLeft - settings.xzoom - settings.offset;  
  51.   
  52.             }  
  53.   
  54.             $("div.zoomdiv").css({ top: imageTop,left: leftpos });  
  55.   
  56.             $("div.zoomdiv").width(settings.xzoom);  
  57.   
  58.             $("div.zoomdiv").height(settings.yzoom);  
  59.   
  60.             $("div.zoomdiv").show();  
  61.   
  62.   
  63.                     $(document.body).mousemove(function(e){  
  64.   
  65.                     var bigwidth = $(".bigimg").get(0).offsetWidth;  
  66.   
  67.                     var bigheight = $(".bigimg").get(0).offsetHeight;  
  68.   
  69.                     var scaley ='x';  
  70.   
  71.                     var scalex= 'y';  
  72.   
  73.   
  74.                     if(isNaN(scalex)|isNaN(scaley)){  
  75.   
  76.                     var scalex = Math.round(bigwidth/imageWidth) ;  
  77.   
  78.                     var scaley = Math.round(bigheight/imageHeight);  
  79.   
  80.                     }  
  81.   
  82.                     mouse = new MouseEvent(e);  
  83.   
  84.   
  85.   
  86.                     scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ;  
  87.   
  88.                     $("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;  
  89.   
  90.                     scrollx =    mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;  
  91.   
  92.                     $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;  
  93.   
  94.   
  95.                     });  
  96.             },function(){  
  97.                $("div.zoomdiv").hide();  
  98.                $(document.body).unbind("mousemove");  
  99.                $(".lenszoom").remove();  
  100.                $("div.zoomdiv").remove();  
  101.             });  
  102.   
  103.         }  
  104.   
  105. })(jQuery);  
  106.   
  107. function MouseEvent(e) {  
  108. this.x = e.pageX  
  109. this.y = e.pageY  
  110. }  

 

页面调用方法：

JavaScript代码
  1. jQuery.noConflict();  
  2. jQuery(document).ready(function(){  
  3. $("img.jqzoom").jqueryzoom();  
  4. });  

 

Tags: jquery, plugins, jqzoom, javascript, demo

Javascript | 评论:3 | 阅读:27990

Records:34‹1234567›