返回首页

目录{A}{A2的} {A4纸}{A5的}{A6的}{A7的}{A8的}{A9的}{A10的}{A11}{A12}简介
这是什么文章,所有有关吗?那么,它是约了几个不同的事情,我从来没有做过,即写我自己的{A13号}插件和HTML5的WebWorkers工作。
对于那些从来没有听说过{A13号},它本质上是一个JavaScript库。这里是大约{A13号} {A13号网站说:
"jQuery是一个快速和简洁的JavaScript库,简化HTML文档遍历,事件处理,动画,以及用于快速Web开发的Ajax交互。 jQuery是旨在改变你写JavaScript.quot的方式;
- {A15}日期13/07/2011
创建自己的{A13号}插件是有据可查的东西,你可以阅读有关{A13号}网站,但我将通过一些细节在下面的章节中去。
HTML5的WebWorkers基本上是通过JavaScript创建的线程,如果你是一章的净样,想System.Threading.Tasks.Task。简单,他们开展的工作单位在一个专用的线程。稍后我们将看到更多。
因此,如何在这篇文章中一起使用这两个东西吗?很显然,我需要一些使用案例。因此,这里的情景,我来了,这是这篇文章做什么。
我想创造一个{A13号}插件,它可以应用到一个单一的元素,其中{A13号}插件会接受的搜索字词的阵列。对于每一个搜索条件,催生一个新的HTML5 WebWorker将做一个AJAX搜索符合该搜索词的图像。当HTML5的WebWorker完成,HTML5的WebWorker回调到{A13号}插件,形象墙,在这一点被创建。
简而言之,这就是这条代码的作用。我们将通过这次在一些细节在下面的章节。{A18}创作的jQuery插件
正如我在介绍中指出,我想创造自己的{A13号}插件。正如我还指出,这是有据可查的过程,是在{A13号}网站链接:。
我{A13号}插件不执行{A13号}网站的所有建议。这里是一个实现的功能列表:语境保持Chainability默认值和选项
要看到这些意味着什么,请参阅{A13号网站链接:。{的A22} Web工作者的基本思路
HTML5的WebWorkers是合理的新的,我想他们还没有广泛使用。因此,他们背后的基本想法是什么呢?好吧,说白了,WebWorker是一个单位工作,将开展一个新的线程。是的,这是正确的,能够在浏览器中创建新的线程。主机和WebWorker之间的通信
之间的托管代码(代码创建WebWorker)和实际WebWorker的通信是使用PostMessage的像API和事件处理程序,WebWorker公开的情侣。
下面是一些典型的代码可能看起来像在托管的代码,注意我们如何创建一个新的WebWorker钩了它的两个事件:的onMessage,挂接到workerResultReceiver功能onerror的,迷上了workerErrorReceiver功能
开始使用PostMessage API,它是如何完成所有的消息到/从工人和工人。

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

// code in WebWorkwer hosting code

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

var worker = new Worker("scripts/FlickrWorkerSearch.js");

worker.onmessage = workerResultReceiver;

worker.onerror = workerErrorReceiver;

worker.postMessage({ 'cmd': 'start', 'msg': settings.searchWords[i] });



function workerResultReceiver(e) {

    //so something with the workers data

    var result = e.Data;

}



function workerErrorReceiver(e) {

    console.log("there was a problem with the WebWorker within " + e);

}

这是一些典型WebWorker会是什么样子:{C}
这个简单的例子,简单地发送一个字符串返回到主机说:quot;工人说helloquot;工作单位
作为WebWorker关注的工作单位是一个单一的JavaScript文件,当它被传递到WebWorker的构建,这样的事情:
var worker = new Worker("scripts/FlickrWorkerSearch.js");

我们将看到一个典型的工人JavaScript文件看起来像在本文的后面。导入其他脚本
您可以通过使用类似的行所示的导入其他JavaScript文件在您的主要WebWorker:{体C3}
虽然小心,你导入JavaScript文件不得以任何方式触动了DOM(所以,这意味着他们可能无法使用{A13号}内部要么{A13号}使用窗口(这是在DOM))。谨慎的领域
本节概述了一些地区,你必须小心工作WebWorkers。没有DOM访问
WebWorkers不能看到DOM,并因此将无法导入任何脚本访问DOM,如{A13号}。这是一种耻辱{A13号}有额外的非DOM相关的东西,这将是不错的在WebWorker使用,但规则就是规则,我想。
我最初以为我可以绕过这个规则,通过使用DOM和在WebWorker主机,在某些对象通过消息传递到WebWorker;唉,这种做法太失败了,作为不能被克隆的对象。
一般的经验法则是,向/从WebWorker的消息必须是原始类型,如数组/字符串和其他简单类型。没有线程锁定原语
确定,所以我们有能力运行的线程,但不幸的是,我们有没有线程对象,以确保这些线程的通信,并确保有线程安全访问共享数据结构。似乎相当大的监督。它的意思是您的主机内WebWorker和其相关的消息处理程序必须非常自给自足的,而不是访问任何共享的数据结构。我掉进这个陷阱的代码,在这篇文章中,我在那里填充一个共同的阵列,直到我意识到,这可能是不聪明,然后我搬到数组是局部范围的WebWorker,然后是一切OK 。{A25}演示应用程序是如何工作的
这些小节应列出演示应用程序是如何工作的。{A26}如何运行演示
演示是为说服VS2010的解决方案,但不要担心,如果你没有VS2010的,只需打开Windows资源管理器,并找到该文件quot; Index.htmlquot;右击并用Firefox打开;是的,这是正确的,我需要你使用特定的浏览器(稍后)。
{S0的}{A27高速公路}浏览器支持
WebWorker"(S)支持以下浏览器:浏览器WebWorker支持选项铬V3或以上火狐V3.5或以上IE浏览器v9或以上歌剧10.6或以上 野生动物园4或以上
从上面的表中可以看出,有相当不错的支持WebWorker(S)。虽然这篇文章中,我没有真正关心的跨浏览器兼容,并没有花任何时候都令人担忧的是,你可以抱怨自己,如果你喜欢,但它不会改变任何东西。
我的理由如下:我想,写约WebWorker(S),而不是如何把事情跨浏览器工作我根本就没有足够的时间自由关心这个我觉得本文演示使用WebWorker(S)就好了,这是我要去什么背后的关键概念
因此,只有浏览器,我知道肯定的作品是我使用上罕见的情况下,最经常,我尝试做一些网页编码,这是Firefox(v3.5或以上)。免费{A13号}插件,很抱歉,但它的方式是,一些其他的浏览器不工作的原因。{A29} HTML部分JavaScript文件:index.html的
的HTML,大部分是从免费提供的{A13号}插件,本文使用。唯一我改变了,包括我额外的JavaScript文件,并创建为DIV CLASS = quot动态内容,通过自己的{A31号; containerquot;}使用的元素,我们接下来讨论。{的C4}
基本上,本节得到动态更新} {A31号的使用我们接下来讨论。{C5的}
正如我所说,这个HTML的大部分是取自免费提供{A13号}插件,这篇文章使用。{第A33}自定义的jQuery插件的一部分看到JavaScript文件:FlickrWall.js
的{A13号}插件,我写了一个非常简单的工作。将它应用到一个特定的元素,其中{A13号}插件会接受的搜索字词的阵列。对于每一个搜索条件,产生一个新的WebWorker将做一个AJAX搜索符合该搜索词的图像。对于每个WebWorker催生,我自定义的{A13号}插件将挂钩的onMessage()/的onError新产生WebWorker的事件。当WebWorker完成,WebWorker回调到{A13号}插件,形象墙,在这一点被创建。{5233}
我要指出的是,到CreateWall()的调用第三方插件中,在这篇文章中讨论在{A10的} {A13号}调用。{A36} WebWorker部分JavaScript文件:FlickrWorkerSearch.js
正如你现在知道,WebWorker(S),必须使用标准的JavaScript创建。现在,你也知道,的WebWorker不能碰的DOM。我已经说过,我的问题域的支配,每个WebWorker会做一个对Flickr的API,AJAX请求。如何做到这一点?好吧,我们只是用手动的AJAX调用。
下面是完整的代码的WebWorker JavaScript文件quot; FlickrWorkerSearch.jsquot; FlickrWall.jsquot;这是在我的自定义插件在quot {A37}用于创建新WebWorker(S)做搜索。{C7-}请注意
我一直留在我的Flickr API键,给你一个完全工作演示不够好,但请不要复制或更改的请求代码满贯的Flickr,或一般做任何会导致Flickr的要取消我的开发的关键。基本上,请发挥好。{A38}图片廊部分见JavaScript文件的:FullPageImageGallery.js和jquery.easing.1.3.js
这也许是我演示的最漂亮的一部分,唉,我可以把这个没有信用,这简直是在互联网上提供许多免费的jQuery图片库插件。
原始来源是免费提供的:{A13号}插件(见quot; FullPageImageGallery.jsquot ;)也使得} {A13高速公路的使用,缓解插件,这是quot; jquery.easing.1.3 。jsquot;文件。
我也有一定的时序问题,由于WebWorker(S)基本上是一个新的线程执行,其中图片廊设计师显然没有想到的。这使我重新因子的图像库代码,以允许它被称为收到1 WebWorker张贴在我自己的{A13号}消息插件。这些变化小,很大一部分是不相关的这篇文章。然而,我没来的方式来动态操作是目标图像库{A13号}插件的窗口元素,DOM。这是不是真的,虽然本文的范围有关,放心,我不得不做一些DOM操作,以获得一个动态的壁使用{A13号}插件。
虽然我不得不说,我挑选这个特殊的图像库{A13号}插件的原因是,它是真的,真的很酷。但是,等待浏览器怪诞
然而,一个问题,这个免费插件{A13号},在一种假设,所有的图像将具有一定规模和他们必平方米(这显然是我不能作为garmented图片来自Flickr的)。 Firefox似乎这只是罚款,但其他浏览器(如铬),不要以应付。作为对这篇文章的主要重点是WebWorker的(S)不修改别人的{A13号}插件,对不起,但它的方式是。
无论如何,除了浏览器的问题,一旦它与图像从WebWorker(S)的AJAX请求来填充,它会使用动态创建的内容如下图所示,用户可以从左到右滚动使用的鼠标,然后在图像上按一下(点击下面的图片为一个更大的图像)。
{A43号}
一旦图像被点击,它会扩大到全屏此时,用户可以通过全屏图像,使用左/右按钮滚动,或者再次返回到缩略图。这如下所示(点击下面的图片为一个更大的图像):
{A44}
总而言之,我很高兴这个免费插件{A13号}。
说实话,我认为微软可以学到很多的jQuery /社区为基础的贡献。试想一下,如果人们可以只WPF / Silverlight的方式,你可以jQuery的扩展,并有把这些东西。我给你这个图片库使用动画{A13号}库的例子。因此,让我们来看看一些。我写了一个{A13号}插件,名为{A13号}一个免费提供的图片库插件这反过来又取决于又一免费提供{A13号}动画插件。
如果我们在微软土地(因为我经常上午),我们将不得不寻找{A47公路}或其它地方的Silverlight / WPF控件的互联网搜索,我们可能会找到的东西,下载了10-50人,或我们只会等待看到微软已经为我们安装了。NET(X)。
相反,当你搜索的东西像一个jQuery的图像库,有数以百计的选择。它仅仅是使更多的社区为基础的,因为它不那么封闭延伸,这是非常明显的。
然而,与任何打开,你会最终好看的东西,但最终被未经检验的,粗糙,和平原不可用;然而,如果你愿意采取狩猎,而在互联网上,有一些宝石在那里。
我个人而言,我喜欢上网,所以我愿意追捕的宝石。{A48}结论
这就是现在。我知道我不是我的基于网络的社会作出贡献,说实话,我不明白,改变,但它始终是值得的,同时确保您知道如何在流行的技术做的事情。我看到,HTML5将变得非常流行,但在我看来,有一些非常愚蠢的事情,需要我在这篇文章中发现的东西,如固定。
你知道的,比如有额外的线程支持(没错,,通过WebWorker(S)),但没有线程安全的东西做的原生JavaScript机制是很奇怪,像锁(..)你知道的东西,所有我们有.NET / Java或静态类型的语言,赫克甚至为此事语言内的其他锁定原语。
我有没有到DOM从WebWorker允许任何访问,好,我做种的想法。这本来是允许它,但它必须是与线程关联,其中一些线程亲和力对象的排序是可用的WebWorker。 Windows已经采用这种模式像永远,Java是令人惊讶的线程关联的宽容。我不在乎采取哪种方法,但毯子规则的quot;不要受DOMquot影响的JavaScript WebWorker交互是相当严格的,你知道{A13号}中有大量的好东西,我知道这是主要的DOM操作API ,但也有其他非常有用的东西,是负载提供诸如AJAX调用,解析JSON,各种东西真的能够做到,。
无论如何,说够了,希望你喜欢的文章。

回答

评论会员:萨沙理发 时间:2012/02/04
良好的工作
评论会员:沙基尔伊克巴尔 时间:2012/02/04
感谢
萨沙理发
微软的Visual C#MVP 2008 2011Codeproject MVP 2008-2011Open源码
{A50的}

你最好的朋友就是你。
我是我最好的朋友。我们有着相同的看法,并未落认为

我的博客:{A51}
评论会员:游客 时间:2012/02/04
萨沙・巴伯:很有趣,很好地解释文章-----------------------------沙基尔伊克巴尔------------------------------
秘密
评论会员:游客 时间:2012/02/04
感谢萨沙理发微软的VisualC#MVP20082011CodeprojectMVP2008-2011Open源码{A50的}你最好的朋友就是你。我是我最好的朋友。我们有着相同的看法,并未落认为我的博客:{A51}
萨拉夫Talukder:所有伟大和翔实的文章IST。 (y)
一件事,我想提高你提到的WebWork的支持,在IE9中,我使用的IE9加上我也有一派IE9是不支持webworker的,它将会在IE10支持
NBSP。
瑞星太阳
http://feeds.feedburner.com/TrueIdentity的的
评论会员:萨沙理发 时间:2012/02/04
真棒。很好的介绍......感谢分享
评论会员:丹尼尔・沃恩 时间:2012/02/04
尼斯。书签到后来的研究
评论会员:游客 时间:2012/02/04
萨沙・巴伯:不错的东西!萨沙一如既往
但以理沃恩:感谢的人,我也很喜欢我的MEF的,这是C#类:
萨沙理发
微软的Visual C#MVP 2008 2011Codeproject MVP 2008-2011Open源码
{A50的}

你最好的朋友就是你。
我是我最好的朋友。我们有着相同的看法,并未落认为

我的博客:{A51}
评论会员:萨沙理发 时间:2012/02/04
嘿萨沙,

在问候螺纹锁原语的情况下,冷静的文章看完之后,我不得不周围狩猎,发现{A56}表示WebWorkers之间的状态是隐藏的。是的情况下,还是有共享状态?

出色的工作像往常一样我的朋友。从我5。

欢呼声中,
丹尼尔
丹尼尔・沃恩
{的A57}
:巴勃罗Aliskevicius
评论会员:游客 时间:2012/02/04
一样,栈溢出后暗示,唯一的办法就是通过通过的PostMessage/的onMessage回调结构。但仍然没有锁定原语,所以如果你通过围绕一个共同的(必须是可序列化)数据结构,你会更可能得到非常不可预知的结果。你必须在一个孤立的方式工作,每个工人做自己的事。说实话整个HTML5的事情,现在是一个,一个farse位帆布:是正确的尝试和控制,绘制分形/位的blit(游戏),没有太大的使用更加音频:所以我可以在大约10新华社/DirectSound的/XAML线功能的媒体播放器隔离储存区:OK,很酷Web数据库访问:确定,但不是所有尚未支持网络工作者:太多的限制,没有足够的支持工具(例如锁定)网络套接字不是一个商业可用的标准之一是,负载的开源的,但你会使用他们在生产代码:PostMessage的空气污染指数:你好Win32编程也有类似的概念(由于Windows3.1),看到这个链接{A58}所以,虽然好玩,我不认为我会失去这一切HTML5的东西太多,睡觉时模具有可能得到我们都可以这样做,谁也不知道。5虽然感谢。萨沙理发微软的VisualC#MVP20082011CodeprojectMVP2008-2011Open源码{A50的}你最好的朋友就是你。我是我最好的朋友。我们有着相同的看法,并未落认为我的Blog:{A51}
萨沙・巴伯:是的,我们将不得不等待和观望,我想。
我肯定期待着九月生成。
丹尼尔・沃恩
{的A57}
评论会员:游客 时间:2012/02/04
萨沙・巴伯:你要萨沙理发微软的VisualC#MVP20082011CodeprojectMVP2008-2011Open源码{A50的}你最好的朋友就是你。我是我最好的朋友。我们有着相同的看法,并未落认为我的博客:{A51}
linuxjr
评论会员:! 时间:2012/02/04
萨沙理发
评论会员:游客 时间:2012/02/04
无忧虑萨沙理发微软的VisualC#MVP20082011CodeprojectMVP2008-2011Open源码{A50的}你最好的朋友就是你。我是我最好的朋友。我们有着相同的看法,并未落认为我的博客:{A51}:4565433|会员
文章是好 - 非常丰富的,有用的 - 但有没有在所有有关狒狒。 {五}
评论会员:萨沙理发 时间:2012/02/04
Gregory.Gadow写道:有什么关于狒狒
在所有
我只有一个团队狒狒的一部分,所以把狒狒有没有休息,那就大错特错了。我可以把一些其他灵长类动物在那里,也许是猕猴
萨沙理发
微软的Visual C#MVP 2008 2011Codeproject MVP 2008-2011Open源码
{A50的}

你最好的朋友就是你。
我是我最好的朋友。我们有着相同的看法,并未落认为

我的博客:{A51}

|马塞洛・里卡多・奥利维拉:感谢您分享您的工作
评论会员:游客 时间:2012/02/04
萨沙・巴伯:您的欢迎萨沙理发微软的VisualC#MVP20082011CodeprojectMVP2008-2011Open源码{A50的}你最好的朋友就是你。我是我最好的朋友。我们有着相同的看法,并未落认为我的博客:{A51}
科林埃贝哈特
评论会员:游客 时间:2012/02/04
是,在浏览器中的线程,HMM。WebWorkers非常有限你可能想读谷歌齿轮和检查这些链接,早在2007年首先从我根据一些我的JavaScript"这篇文章上的应用程序??"伪??线程,蹦床发电机http://www.neilmix.com/2007/02/07/threading-in-javascript-17/最近,本文沿http://ltiwww.epfl.ch/sJavascript/所有的怪诞聪明的东西。jQuery的优势是X浏览器的支持,但目前的趋势是向纯JavaScript。作为其原生在一般的速度更快和更容易适应。您可能会发现为JS这个有趣的,MVVM的http://knockoutjs.com/这http://jashkenas.github.com/coffee-script/2011年7月18日,星期一,改性10:09