webwork简单实例及说明

合集下载

webWork配置篇

webWork配置篇

webwork配置篇注意:在这篇已经后续篇幅中,将不再给出xml文件的dtd等一些无关的元素,包括代码可能也给的只是和内容相关的代码片段,因为我们通过基础篇的学习已经对webwork有了一个感性的认识,这里为了节省篇幅作了以上的约定.配置action,result和interceptor我们在web.xml中配置的servlet-Dispatcher在收到了HTTP请求后,通过xwork.xml中的定义调用对应URL请求中的action,action在处理完成后,告诉webwork下一步应该作什么,这个下一步称作result,webwork支持多种类型的result.interceptor是一个特殊的对象,它围绕action和result的执行过程.它控制着action的预处理和后处理,提供安全,校验,日志等某些松耦合的处理,interceptor在action和result处理之后仍然可以工作,为他们增加诸如数据库事务处理等功能.在webwork中,我们可以把多个interceptor组合起来形成一个栈(stack),通过这些栈重用,简化配置,同时关键是提供跨Action的逻辑重构action最基础的action配置如下:<xwork><package name="default"><action name="first" class="com.xujun.webwork.action.FirstAction"/> </package></xwork>使用了result的action:<xwork><include file="webwork-default.xml" /><package name="default" extends="webwork-default"><default-interceptor-ref name="defaultStack"/><action name="first" class="com.xujun.webwork.action.FirstAction"><result name="input" >/index.jsp </result><result name="success" type="redirect">/main.action</result></action></package></xwork>这个例子有两个变化,引入了webwork-default.xml,增加了两个result节点,我们暂时先看result 节点,每个result映射都需要一个name ,一个type,和一个具体的value,type的默认值是dispatch(分发器)为Action提供别名webwork是一种范化的command模式的架构,不同的action name可以同时指向同一个action类,通过这种模式,你可以相同的action提供不同的result和interceptor,并且webwor提供一种更为强大的方式,就是可以指定action中执行的方法,不一定非要是excute().但该方法必须遵循excute的规范,就是要有string类型的返回值.利用这种方式可以大大减少项目中Action数量.xwork..xml<action name="first" class="com.xujun.webwork.action.FirstAction" method="myexcute"/>FirstAction.javapublic String myexcute(){String name = user.getUsername();message = "myexcute:你好"+user.getUsername();return "hello";}注意:throw Exception不是必须的.webwork会先查找和method()一致的方法,如果找不到,就会寻找doMethod()的方法,如果这里的myexcute()改成doMyexcute()也是可以的不需要配置的别名webwork提供了页面访问方式,name.action或者name!method.action..如修改上面index.jsp中的<form>的action="first!myexcute.action"会自动调用action name=”first”的action类中的myexcute()使用场景:比如一个用户打开一个页面之前我们需要作一些操作,可以在Action中定义个before(),那么在url中定义actionname!before.action,该before返回一个input的result,result定位还是这个页面,接着该页面的表单定位是actionname.action,这时候就会执行该Action中的excute()使用静态参数定义Action通过param标签,可以让action根据不同的param值进行不同的处理,可以重复使用Action.同时,param定义的值可以通过IOC的方式注入到Action的属性上,我们举个例子: 假如我们开发一个集成系统,需要访问若干个具有同样接口的webservice,我们在一个Action中已经作好了业务逻辑处理,因为这些webservice具有同样的接口,所以处理的方式都是一致的,但urlL和timeout不同,此时我们就可以通过param来设置不同的参数<action name="service" class="com.xujun.webwork.action.WebServiceAction"> <result name="success">/success.jsp</result><param name="url">/service.wsdl</param><param name="timeout">30</param><interceptor-ref name="static-params"></interceptor-ref> </action>我们创建了两个参数url和timeout,为了将这两个参数赋值给action,我们需要在action 中定义好setter方法private String url;private int timeout;public void setUrl(String url){this.url = url;}public void setTimeout(int timeout){this.timeout = timeout;}注意:webwork会自动根据参数的name找到action对应的setter方法,所以请保证param中的name定义和action中的属性名称一致,同时,要记住webwork传递给xwork的Map中的参数值都是String类型的,该例子中的传递来的timeout参数值就是”30”,webwork会自动类型转换同时要导入static-params这个interceptorresultresult默认配置一个完整的result节点如下:<result name="success"type="dispatch"><param name="location">Hello.jsp</param>></result>这其中,name是必须的,其他都是可以省略的一个最简单的result节点如下:<result name="success">Hello.jsp</result>第二个result和第一个result在执行时是一样的,result的type默认是“dispatch”,param默认是“location”。

webworker的应用场景

webworker的应用场景

webworker的应用场景Web Worker是HTML5提供的一种浏览器技术,它可以在后台线程中运行JavaScript代码,不会影响用户界面的响应速度。

Web Worker的出现为开发者提供了一种利用多线程进行并行计算的方式,适用于一些需要大量计算或耗时操作的场景。

下面将介绍几个Web Worker的应用场景。

1. 图像处理和视频编码图像处理和视频编码通常需要大量的计算和处理时间,这些操作会占用主线程的资源,导致用户界面的卡顿。

通过将图像处理或视频编码的操作交给Web Worker来处理,可以在后台线程中进行计算,不会影响用户界面的流畅度。

比如,在网页上实时编辑图片、调整颜色和对比度等操作,都可以通过Web Worker来实现。

2. 数据计算和复杂算法对于一些需要进行大量数据计算的应用,如科学计算、数据分析和机器学习等,Web Worker可以发挥出很大的优势。

通过将计算任务分配给多个Web Worker实例,并行进行计算,可以大大提高计算的效率和速度。

例如,在网页上进行复杂的数据可视化和图表绘制,可以利用Web Worker来进行数据计算,并将结果传递给主线程进行展示。

3. 后台数据同步和离线缓存Web Worker可以在后台线程中进行网络请求和数据同步的操作,这对于一些需要频繁与服务器进行数据交互的应用非常有用。

通过Web Worker,可以实现后台数据的同步和离线缓存功能,提高应用的响应速度和用户体验。

比如,在网页上进行聊天或邮件应用,可以利用Web Worker来处理与服务器的数据交互,不会因为网络请求而影响用户界面的正常操作。

4. 多媒体流处理对于一些需要实时处理音频或视频流的应用,Web Worker可以提供一种非常便捷的方式。

通过将音频或视频流的处理任务交给Web Worker来进行,并行处理和计算,可以实现实时的音视频编解码、滤镜特效和混音等功能。

例如,在网页上进行实时语音或视频聊天,可以利用Web Worker来处理音视频流的采集、编码和解码等操作。

Webwork配置

Webwork配置

看到这样的题目,看到“配置”这个key w ord,你的脑海中是不是会呈现出一堆堆的XML、properties文件呢?是的,我说的配置,就是各位平常在做项目的时候经常碰到的配置文件。

在一个项目中,配置文件是很重要的,不管它是简短的还是冗长的。

配置文件指出了一个系统中可变化、可设定的部分,也就是说一个系统将其中一部分信息独立出来,将设定这些信息的权利交给了用户,这样用户就可以根据自己的需要来进行设定,从而增强了系统的灵活性及适应性。

虽然配置文件很重要,但是它通常都给人以冗长而繁琐的感觉。

哪怕现在绝大多数的配置文件都是XML,哪怕XML 本身也是自描述的,配置文件都很难给人以一种美感,它在大部分情况下实在是太冗长了。

在我现在所做的一个使用P ortal的项目中,配置文件portlet.xml的行数就高达六千行以上,web.xml也有近三千行!这样的配置文件除了给机器看之外,没有人愿意去看它了。

难道配置文件由始至终都是那样丑陋吗?在接触WebWork之前,我确实就是这样认为的,但是当WebWork的配置文件呈现在眼前的时候,我的偏见彻底被颠覆了,我发现配置文件原来也可以那样的美。

不信?让我们看看去!与WebWork相关的配置文件有三个:通用的web.xml、xwork.xml和webwork.properties。

web.xml中的配置跟其他的框架一样,保持着简练的风格。

如果你不打算使用WebWork的标签库,就只需要在web.xml中定义好作为Request Dispatcher的Servlet即可:<web-app><servlet><servlet-name>webwork</servlet-name><servlet-class>com.opensymphony.webwork.dispatcher.ServletDispatcher</servlet-clas s></servlet><servlet-mapping><servlet-name>webwork</servlet-name><url-pattern>*.action</url-pattern></servlet-mapping></web-app>而webwork.properties中则是定义了很多与Web Application相关的属性,便于你进行配置。

WebWork 开发指南

WebWork 开发指南
这里我们导入了Webwork提供的默认配置webwork-default.xml(位于 webwork.jar的根路径)。 ⑵ package
XWork中,可以通过package对action进行分组。类似Java中package和class的关 系。为可能出现的同名Action提供了命名空间上的隔离。
1.将Web页面中的输入元素封装为一个(请求)数据对象。 2.根据请求的不同,调度相应的逻辑处理单元,并将(请求)数据对象作为参 数传入。 3.逻辑处理单元完成运算后,返回一个结果数据对象。 4.将结果数据对象中的数据与预先设计的表现层相融合并展现给用户。 首先来看登录界面: index.jsp <html>
这种朦胧的感觉,则可能来自曾经在国内流行一时的论坛软件-Jive Forum。 很多软件技术人员不惜从各种渠道得到Jive的源代码,甚至是将其全部反编译 以探其究竟。作为一个论坛软件能受到技术人员如此垂青,想必作者睡梦中也会乐 醒。 而WebWork,就是Jive中,MVC实现的核心。 这里我们所谈及的WebWork,实际上是Webwork+XWork的总集,Webwork1.x 版本中,整个框架采用了紧耦合的设计(类似Struts),而2.0之后,Webwork被拆 分为两个部分,即Webwork 2.x +XWork 1.x,设计上的改良带来了系统灵活性上的 极大提升。这一点我们稍后讨论。
<input type="reset" value="重置" name="B2"/>
</p> </form> </body> </html> 这里的index.jsp实际上是由纯html 组成的,非常简单,其中包含一个表单:

html5之web workers

html5之web workers

html5之web workers专用Web Worker (Dedicated Web Worker) 提供了一个简单的方法使得web 内容能够在后台运行脚本。

一旦worker 创建后,它可以向由它的创建者指定的事件监听函数传递消息,这样该worker 生成的所有任务就都会接收到这些消息。

worker 线程能够在不干扰UI 的情况下执行任务。

另外,它还能够使用 XMLHttpRequest (虽然 responseXML 与 channel 两个属性值始终是 null)来执行 I/O 操作。

本文通过提供例子和细节补全了前面的文档。

提供给worker 的函数列出了worker 所支持的函数。

关于线程安全Worker 接口会生成真正的操作系统级别的线程,如果你不太小心,那么并发(concurrency)会对你的代码产生有趣的影响。

然而,对于web worker 来说,与其他线程的通信点会被很小心的控制,这意味着你很难引起并发问题。

你没有办法去访问非线程安全的组件或者是DOM,此外你还需要通过序列化对象来与线程交互特定的数据。

所以你要是不费点劲儿,还真搞不出错误来。

生成 worker创建一个新的worker 十分简单。

你所要做的就是调用 Worker() 构造函数,指定一个要在worker 线程内运行的脚本的URI,如果你希望能够收到worker 的通知,可以将worker 的 onmessage 属性设置成一个特定的事件处理函数。

var myWorker =new Worker("my_task.js");myWorker.onmessage =function(oEvent){console.log("Called back by the worker!\n");};或者,你也可以使用 addEventListener():var myWorker =new Worker("my_task.js");myWorker.addEventListener("message",function(oEvent){console.log("Called back by the worker!\n");},false);myWorker.postMessage("");// start the worker.例子中的第一行创建了一个新的worker 线程。

可能是你见过最详细的WebWorker实用指南

可能是你见过最详细的WebWorker实用指南

可能是你见过最详细的WebWorker实⽤指南困在笼⼦⾥的Web Worker在使⽤Web Worker前我们要了解它的能⼒边界,让我们避免⽆谓的撞壁:同源限制1.1. 以http(s)://协议加载给WebWorker线程运⾏的脚本时,其URL必须和UI线程所属页⾯的URL同源;1.2. 不能加载客户端本地脚本给WebWorker线程运⾏(即采⽤file://协议),即使UI线程所属页⾯也是本地页⾯;DOM和BOM限制1.1. ⽆法访问UI线程所属页⾯的任何DOM元素;1.2. 可访问如下BOM元素1.2.1. XMLHttpRequest/fetch1.2.2. setTimeout/clearTimeout1.2.3. setInterval/clearInterval1.2.4. location,注意该location指向的是WebWorker创建时以UI线程所属页⾯的当前Location为基础创建的WorkerLocation对象,即使此后页⾯被多次重定向,该location的信息依然保持不变。

1.2.5. navigator,注意该navigator指向的是WebWorker创建时以UI线程所属页⾯的当前Navigator为基础创建的WorkerNavigator对象,即使此后页⾯被多次重定向,该navigator 的信息依然保持不变。

通信限制,UI线程和WebWorker线程间必须通过消息机制进⾏通信。

Dedicated Web Worker详解Web Worker分为Dedicated Web Worker和Shared Web Worker两类,它们的特性如下:Dedicated Web Worker仅为创建它的JSVM进程服务,当其所属的JSVM进程结束该Dedicated Web Worker线程也将结束;Shared Web Worker为创建它的JSVM进程所属页⾯的域名服务,当该域名下的所有JSVM进程均结束时该Shared Web Worker线程才会结束。

WebWork入门使用教程

WebWork入门使用教程

WebWork使用教程2012-11-5目录1.WebWork 简介 (4)核心概念——WebWork的三个关键部分 (5)特点 (5)ValueStack 和 EL (5)Interceptor( 拦截器 ) (6)提供的拦截器介绍 (7)2.WebWork安装-Hello World实例介绍 (9)2.1WebWork安装 (9)HelloWorld (11)3.Action (14)Action简介 (14)用户注册例子 (15)Field-Driven Action vs. Model-Driven Action (24)4.ActionContext (27)ActionContext简介 (27)ServletActionContext (30)5.ServletDispatcher的原理 (32)Action的单元测试 (38)6.Result Type (40)7.表达式与言EL和OGNL (48)OGNL介绍 (48)值堆栈-OgnlValueStack (48)8.Interceptor框架 (59)Interceptor的原理 (65)9.验证框架 (66)为用户注册添加验证功能 (67)10.XWork配置详述 (76)xwork.xml文件的标签元素 (77)11.实战G-Roller-WW (82)G-Roller-WW介绍 (82)JSTL与WebWork的整合 (82)中文解决方案 (82)12.WebWork与其它开源项目的集成 (82)Spring (82)Hibernate (82)Xml-RPC (82)总结 (83)附录 (84)本文档推荐的Opensympnony (84)从技术的角度Struts1.1与WebWork2的比较 (87)关于WebWork的项目资源 (91)参考资料 (91)特别注意 (92)笔者寄语 (94)1.WebWork 简介WebWork是由OpenSymphony组织开发的,致力于组件化和代码重用的拉出式MVC模式J2EE Web框架。

webwork

webwork

12
WebWork原理 WebWork原理
13
Interceptors
"Practical AOP" AOP"
AOP( AOP(Aspect Oriented Programming,面向切面编程),它是分散 Programming,面向切面编程), ),它是分散 关注的编程方法,它将通用需求功能从不相关类之中分离出来;同时, 关注的编程方法,它将通用需求功能从不相关类之中分离出来;同时, 能够使得很多类共享一个行为,一旦行为发生变化,不必修改很多类, 能够使得很多类共享一个行为,一旦行为发生变化,不必修改很多类, 只要修改一个行为就可以。 只要修改一个行为就可以。
<servlet<servlet-mapping> <servlet-name>webwork</servlet<servlet-name>webwork</servlet-name> <url-pattern>*.action</url<url-pattern>*.action</url-pattern> </servlet</servlet-mapping>
WebWork介绍 WebWork介绍
本次讲解基于webwork2.1版本。 本次讲解基于webwork2.1版本。当前 webwork2.1版本 最新版本是2.2.2 2.2.2, 最新版本是2.2.2,现在没有比较成熟的 系统的教程。 系统的教程。大家可以共同探讨和研究当 前版本的新特性。 前版本的新特性。
action and field specific errors field errors are automatically supported by views

金山weboffice 实例

金山weboffice 实例

金山weboffice 实例金山WebOffice是一个在线文档编辑和管理工具,可以支持Word、Excel、PPT等文档的在线预览和编辑。

以下是一个使用金山WebOffice的实例:假设你需要在Web上创建一个Word文档,并与其他人协作编辑。

你可以使用金山WebOffice来轻松实现这个目标。

1.首先,你需要在浏览器中打开金山WebOffice的网站,并登录你的账号。

2.然后,点击页面上的“新建”按钮,选择“Word”文档。

3.在打开的Word文档中,你可以开始输入文本、插入图片、调整格式等,就像在本地编辑器中一样。

4.当你完成编辑后,你可以将文档保存到云端,或者将其分享给其他人,以便他们可以在自己的设备上继续编辑。

5.当其他人收到你分享的链接后,他们可以直接在浏览器中打开文档,并进行编辑。

所有编辑的内容都会实时更新并保存到云端。

6.最后,你可以随时回到金山WebOffice网站,查看文档的历史版本或与他人协作的记录,以确保文档的准确性和一致性。

通过金山WebOffice,你可以轻松地在Web上创建、编辑和管理各种文档,并与他人协作完成工作任务。

这不仅可以提高工作效率,还可以加强文档的安全性和可追溯性。

金山WebOffice支持多种格式和语言的编辑,具体如下:1.文字文件:支持doc、dot、wps、wpt、docx、dotx、docm、dotm、rtf、txt、xml、mhtml、mht、html、htm等格式的编辑。

2.表格文件:支持xls、xlt、et、xlsx、xltx、csv、xlsm、xltm、ett等格式的编辑。

3.演示文件:支持ppt、pptx、pptm、ppsx、ppsm、pps、potx、potm、dpt、dps等格式的编辑。

4.PDF文件:支持pdf格式的编辑。

此外,金山WebOffice还支持各种编程语言的集成和编辑,例如Java(.jsp)、.NET(C#)、Php、Node.js、Asp、Perl、Python、VB、VC、C++、Delphi等。

html web worker的用法

html web worker的用法

html web worker的用法HTML Web Worker是一种浏览器技术,用于在JavaScript中创建后台线程,以使脚本能够在后台执行任务而不会阻塞用户界面。

Web Worker可以执行复杂的计算、处理大量数据或执行其他长时间运行的操作。

使用HTML Web Worker的步骤如下:1. 创建一个新的JavaScript文件,该文件将作为Web Worker线程的代码运行。

例如,创建一个名为worker.js的文件。

2. 在你的HTML页面中使用`<script>`标签引入worker.js文件。

例如:```html<script src="worker.js"></script>```3. 在主线程的JavaScript中使用以下代码创建一个新的Web Worker实例并指定worker.js文件作为脚本:```javascriptvar worker = new Worker('worker.js');```4. 在worker.js文件中定义一个`onmessage`事件处理函数来接收从主线程发送的消息:```javascriptself.onmessage = function(event) {// 处理从主线程接收到的消息// 使用event.data访问消息内容};```5. 在worker.js文件中使用`postMessage()`方法将消息发送回主线程:```javascriptself.postMessage('Hello from Web Worker!');```6. 在主线程的JavaScript中,可以使用`worker.onmessage`属性定义一个事件处理函数来接收来自Web Worker的消息:```javascriptworker.onmessage = function(event) {// 处理来自Web Worker的消息// 使用event.data访问消息内容};```7. 可以使用`worker.postMessage()`方法向Web Worker发送消息:```javascriptworker.postMessage('Hello from Main Thread!');```通过这些步骤,你可以使用HTML Web Worker进行并行计算,提高JavaScript程序的性能,并确保用户界面的响应性。

web worker创建方式

web worker创建方式

web worker创建方式Web Worker是一种利用浏览器多线程技术的解决方案,可以使页面不被卡顿,提高用户体验。

本文将详细介绍Web Worker的创建方式。

首先,我们需要创建一个新的 JavaScript 文件,用于我们将要处理的任务。

接着在主文件中,使用如下代码来创建一个新的 Worker:```javascriptvar myWorker = new Worker('worker.js');```这里的 worker.js 是我们之前创建的新文件名。

现在,我们已经成功地创建了一个 Web Worker。

接下来,我们需要向这个Worker发送消息,并让它进行处理。

我们可以使用postMessage()方法向Web Worker 发送消息并接收结果。

例如,我们在主文件中使用如下代码来发送消息:```javascriptmyWorker.postMessage('Hello');```然后,在worker.js文件中,我们需要使用如下代码来接收和处理消息:```javascriptonmessage = function(event) {console.log(event.data);}```这里的onmessage是 Web Worker 中的一个事件监听器,用于监听来自主文件的消息。

接下来,我们需要使用 postMessage()方法向主文件发送处理结果。

例如,我们在 worker.js 文件中使用如下代码来发送结果:```javascriptpostMessage('Hello from the Worker');```通过这些代码,我们可以在主文件中使用如下代码来接收处理结果:```javascriptmyWorker.onmessage = function (event) {console.log(event.data);}```这里的onmessage是主文件中 Web Worker 的一个事件监听器,用于监听来自worker.js文件的消息。

JavaScript中的WebWorkers

JavaScript中的WebWorkers

JavaScript中的WebWorkers JavaScript是一种广泛应用于前端开发的编程语言,它可以用来创建动态的网页效果、交互式的用户界面和各种Web应用。

但是,在进行复杂的Web开发时,往往需要处理大量的数据和进行复杂的计算,从而导致Web应用的性能下降。

为了解决这个问题,JavaScript引入了一种名为WebWorkers的技术,它可以将耗时的计算过程放在后台运行,从而提高Web应用的性能和响应速度。

一、WebWorkers是什么?WebWorkers是指在浏览器中运行后台计算的一种技术。

使用这种技术,可以将费时的计算过程分离出来,并放在另外一个执行上下文中运行。

这样,Web应用的主线程就可以专注于处理用户界面和与用户的交互,而不会被耗时的计算过程阻塞。

WebWorkers由W3C标准化,支持WebWorkers的浏览器有Chrome、Firefox、Safari和IE10及以上版本。

WebWorkers是一种跨平台的技术,可以在不同的操作系统和设备上运行。

二、WebWorkers的使用场景WebWorkers适用于处理大量的数据或耗时的计算。

比如,当需要对海量数据进行排序或搜索时,WebWorkers可以将这些计算过程放在后台运行,并返回结果给主线程。

此外,WebWorkers还可以用于模拟物理效果、图像处理、音视频处理、游戏开发等领域。

三、WebWorkers的基本用法使用WebWorkers,需要创建一个Worker对象,并将处理数据的脚本作为参数传递进去。

Worker对象作为一个独立的执行上下文,有自己的全局对象和线程堆栈,与主线程相互独立,互不干扰。

Worker对象通过postMessage()方法与主线程进行通信,通过onmessage事件监听来自主线程的消息。

以下是一个简单的示例代码,演示了如何使用WebWorkers进行计算:```// 主线程代码var worker = new Worker('worker.js'); // 创建一个Worker对象,指定处理数据的脚本文件worker.onmessage = function(e) { // 监听从Worker对象返回的数据console.log('Result:', e.data); // 输出结果};worker.postMessage({num1: 1, num2: 2}); // 向Worker对象发送消息,包含两个数字``````// worker.js脚本代码onmessage = function(e) { // 监听来自主线程的消息var result = e.data.num1 + e.data.num2; // 计算两个数字之和 postMessage(result); // 将计算结果返回给主线程}```上述代码中,与主线程通信的Worker对象使用了worker.js脚本文件进行计算,主线程使用postMessage()方法向Worker对象发送消息,而Worker对象通过onmessage事件监听来自主线程的消息,并返回计算结果。

webworker的用法及应用场景(转)

webworker的用法及应用场景(转)

webworker的⽤法及应⽤场景(转)⾸先简单介绍⼀下什么是web worker。

我们都知道在浏览器中javascript的执⾏是单线程的,页⾯上的javascript在执⾏时会阻塞浏览器的响应,这⾮常影响⽤户体验,所以ajax应运⽽⽣了。

ajax的出现使得页⾯在等待服务器响应的这段时间内不再发⽣阻塞,但是这仍然没有改变代码单线程执⾏的本质,这也意味着我们依旧不能把耗费时间的复杂运算放在页⾯上执⾏。

⽽web worker的出现弥补了这个缺点。

页⾯上单线程执⾏的javascript是主线程(我们通常写的javascript都在主线程中执⾏),new出来的web worker对象为⼦线程,只有主线程中的代码执⾏时会导致阻塞,⼦线程则不会,这表⽰部分耗费时间的复杂运算完全可以从后台挪到前台来完成。

web worker的定义就不再这⾥赘述了,对web worker还不了解的同学请戳这⾥。

下⾯给出⼀个简单的web worker例⼦来验证⼀下⼦线程的执⾏是否对页⾯有影响:index.html代码:<!DOCTYPE html><html><body><p>Count numbers: <output id="result"></output></p><button onclick="startWorker()">Start Worker</button><button onclick="stopWorker()">Stop Worker</button><input type="text" value=""/><script>var w;function startWorker () {if (typeof(Worker) !== "undefined") {if (typeof(w) === "undefined") {w = new Worker("demo_workers.js");}w.onmessage = function (event) {document.getElementById("result").innerHTML = event.data;};} else {document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";}}function stopWorker () {w.terminate();}</script></body></html>12345678910111213141516171819202122232425262728demo_workers.js代码:function timedCount () {for (var i = 0; i < 10000000000; i++) {if (i % 100000 === 0) {postMessage(i);}}}timedCount();123456789点击Start Worker按钮启动web worker,可以看到web worker开始⼯作,且在web worker正常⼯作时,我们仍然可以在input输⼊框中输⼊信息,这表⽰页⾯并没有因为web worker的运⾏⽽被阻塞:另外要注意⼀点,web worker虽然是新启动的⼦线程,运⾏不会阻塞页⾯,但与主线程的交互会,以上⾯的代码为例,如果在web worker的for循环⾥⾯直接调⽤postMessage,仍然会感到页⾯的操作不够流畅(原因是主线程需要⼀直不停地处理⼦线程post过来的消息)。

浅析WebWorker使用技巧及实战场景

浅析WebWorker使用技巧及实战场景

浅析WebWorker使⽤技巧及实战场景 以前我们总说,JS是单线程没有多线程,当JS在页⾯中运⾏长耗时同步任务的时候就会导致页⾯假死影响⽤户体验,从⽽需要设置把任务放在任务队列中;执⾏任务队列中的任务也并⾮多线程进⾏的,然⽽现在HTML5提供了我们前端开发这样的能⼒ - ,我们⼀起来看⼀看Web Worker 是什么,怎么去使⽤它,在实际⽣产中如何去⽤它来进⾏产出。

⼀、概述 JavaScript 语⾔采⽤的是单线程模型,也就是说,所有任务只能在⼀个线程上完成,⼀次只能做⼀件事。

前⾯的任务没做完,后⾯的任务只能等着。

随着电脑计算能⼒的增强,尤其是多核 CPU 的出现,单线程带来很⼤的不便,⽆法充分发挥计算机的计算能⼒。

Web Workers 使得⼀个Web应⽤程序可以在与主执⾏线程分离的后台线程中运⾏⼀个脚本操作。

这样做的好处是可以在⼀个单独的线程中执⾏费时的处理任务,从⽽允许主(通常是UI)线程运⾏⽽不被阻塞。

Web Worker 的作⽤,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将⼀些任务分配给后者运⾏。

在主线程运⾏的同时,worker线程也在运⾏,相互不⼲扰。

等到 Worker 线程完成计算任务,再把结果返回给主线程。

这样做的好处是主线程可以把⼀些计算密集型或⾼延迟的任务交给worker线程执⾏,被 Worker 线程负担了,这样主线程(通常负责 UI 交互)就会很轻松流畅,不会被阻塞或拖慢。

但是注意这并不是意味着JS语⾔本⾝⽀持了多线程能⼒,⽽是浏览器作为宿主环境提供了JS⼀个多线程运⾏的环境。

⽽且Worker 线程⼀旦新建成功,就会始终运⾏,不会被主线程上的活动(⽐如⽤户点击按钮、提交表单)打断。

这样有利于随时响应主线程的通信。

但是,这也造成了 Worker ⽐较耗费资源,不应该过度使⽤,⽽且⼀旦使⽤完毕,就应该注意及时关闭。

或者说:如果worker⽆实例引⽤,该worker空闲后⽴即会被关闭;如果worker实列引⽤不为0,该worker空闲也不会被关闭。

web小项目实例作业

web小项目实例作业

web小项目实例作业Web小项目实例作业是一个任务,要求回复的内容需要准确满足任务描述的内容需求,并且字数不得低于1000字。

在这个任务中,我将为您展示一个Web小项目的实例作业,以帮助您更好地理解和掌握Web开发的基本概念和技巧。

项目名称:个人博客网站项目描述:个人博客网站是一个简单的Web应用程序,用于展示个人的博客文章和信息。

该网站包括主页、博客文章列表、博客文章详情页、关于页面和联系页面。

1. 主页:- 在主页上展示个人博客的标题和简要介绍。

- 提供一个链接,点击链接可跳转到博客文章列表页面。

2. 博客文章列表页面:- 显示所有的博客文章标题和发布日期。

- 提供一个链接,点击链接可跳转到对应的博客文章详情页。

3. 博客文章详情页:- 显示博客文章的标题、发布日期和内容。

- 提供一个链接,点击链接可跳转回博客文章列表页面。

4. 关于页面:- 展示个人博客网站的创建目的和背景。

- 提供个人博客的联系方式。

5. 联系页面:- 提供一个表单,用于用户输入姓名、电子邮件和消息。

- 用户填写完表单后,点击提交按钮,将用户输入的信息发送给个人博客的联系邮箱。

该项目的技术栈可以使用HTML、CSS和JavaScript来实现。

HTML用于构建页面的结构和内容,CSS用于美化页面的样式,JavaScript用于处理用户的交互和动态效果。

在开发过程中,可以使用文本编辑器来编写代码,并在浏览器中查看和测试效果。

可以使用版本控制系统来管理代码的版本和变更。

项目的开发过程可以按照以下步骤进行:1. 创建项目的文件和文件夹结构,包括HTML文件、CSS文件和JavaScript文件。

2. 在HTML文件中编写主页的内容,包括博客的标题和简要介绍,以及跳转到博客文章列表页面的链接。

3. 在HTML文件中编写博客文章列表页面的内容,包括所有博客文章的标题和发布日期,以及跳转到博客文章详情页的链接。

4. 在HTML文件中编写博客文章详情页的内容,包括博客文章的标题、发布日期和内容,以及跳转回博客文章列表页面的链接。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

WEBWORK入门及实例说明WebWork介绍WebWork是由OpenSymphony组织开发的,致力于组件化和代码重用的拉出式MVC模式J2EE Web 框架。

WebWork目前最新版本是2.1,现在的WebWork2.x前身是Rickard Oberg开发的WebWork,但现在WebWork已经被拆分成了Xwork1和WebWork2两个项目,如下示意图所示:Xwork简洁、灵活功能强大,它是一个标准的Command模式实现,并且完全从web层脱离出来。

Xwork 提供了很多核心功能:前端拦截机(interceptor),运行时表单属性验证,类型转换,强大的表达式语言(OGNL – the Object Graph Notation Language),IoC(Inversion of Control倒置控制)容器等。

WebWork2建立在Xwork之上,处理HTTP的响应和请求。

WebWork2使用ServletDispatcher将HTTP 请求的变成Action(业务层Action类), session(会话)application(应用程序)范围的映射,request请求参数映射。

WebWork2支持多视图表示,视图部分可以使用JSP, Velocity, FreeMarker, JasperReports,XML等。

下面我们提到的WebWork将为WebWork2,使用的版本是2.1。

WebWork安装-HelloWorldWebWork安装当然,在具体开发使用介绍之前,搭建好运行环境是必备的。

首先从https:///servlets/ProjectDocumentList下载最新的WebWork压缩包,并将其解压开来。

打开解压目录,你将看到以下的文件和目录:webwork-2.x.jar 当然就是WebWrok最新发布的Jar包webwork-example.war 是WebWrok自带的很有代表性的功能演示例子,掌握它是提高你的WebWork 技术水平的捷径webwork-migration.jar 提供快速将1.x版本移植到2.x版本所用的类文件docs目录WebWrok的使用文档,包括api文档、clover文档、单元测试(Junit)文档等lib目录WebWork在运行或编译时所用到的所有.jar包src目录源程序目录2、WebWork是J2EE Web框架,当然要运行在Web容器中,我用的是稳定的Tomcat 4.1,关于tomcat的安装和部署请自己搞定。

3、用WebWork当然要将它的运行时用到的Jar包放到Web容器可以找到的ClassPath中,将步骤1介绍的webwork-2.x.jar放到你部署目录下WEB-INF\lib目录里,同时将WebWrok解压目录lib\core下的所有.jar文件也拷贝到WEB-INF\lib目录,这些是运行WebWork必需要用到的jar包。

4、了解Web框架的朋友都知道,一般Web框架都是通过一个JavaServlet控制器提供统一的请求入口,解析请求的url,再去调用相应的Action进行业务处理。

WebWork也不例外,它要求你在web.xml 文件里配置一个派遣器ServletDispatcher,它初始化WebWrok的一些配置信息,解析XWork的Action 配置信息,根据请求去组装和调用执行相应的拦截器(Interceptor)、Action、Action Result(Action执行结果的输出)等,具体配置如下:代码……<servlet><servlet-name>webwork</servlet-name><servlet-class>com.opensymphony.webwork.dispatcher.ServletDispatcher</servlet-class></servlet>……<servlet-mapping><servlet-name>webwork</servlet-name><url-pattern>*.action</url-pattern></servlet-mapping>……这样,.action结尾的所有url请求将直接有ServletDispatcher去调度。

下面我们写一个经典的HelloWorld,跑一个简单实例来验证你运行环境是否可用,并感受一下简单、功能强大的WebWork的开发。

注意:如果使用WebWork自带的标签库,除了配置相应的标签库以外,还须将com.opensymphony.webwork.views.velocity.WebWorkVelocityServlet配置到web.xml,具体可以参考webwork-example里面的配置。

HelloWorld首先看下面这个程序HelloWorldAction.java:代码package helloWorldimport com.opensymphony.xwork.Action;public class HelloWorldAction implements Action{String greeting;public String getGreeting() {return greeting;}public String execute() throws Exception {greeting = "Hello World!";return SUCCESS;}}HelloWorldAction是一个普通的Java类,它实现了Action这个接口。

Action是一个非常简单的接口,只有一个方法:public String execute() throws Exception; ,Action类介绍见下一节。

HelloWorldAction 有一个String类型字段greeting,在execute()方法中,greeting被赋值―Hello World!‖,并返回String型常量SUCCESS,SUCCESS的定义详见Action接口,这个常量代表了execute()方法执行成功,将返回成功页面。

返回的页面greetings.jsp代码如下:代码<%@ taglib prefix="ww" uri="webwork" %><html><head><title>First WebWork Example</title></head><body><p><ww:property value="greeting"/></p></body></html>greetings.jsp很简单的jsp页面,它使用了WebWork自带的标签库。

它的作用是输出变量―greeting‖的值。

这个<ww:property value="greeting"/>语句,相当于调用相应Action(HelloWorldAction)的getGreeting()方法,取得变量―greeting‖的值。

我们的HelloWorld代码就这么多,完了。

可是,HelloWorldAction怎么去调用、执行?执行成功它又怎么知道返回到greetings.jsp?XWork的配置文件xwork.xml会负责将要执行的Action和展现的视图连接起来,见xwork.xml的如下片断:代码<action name="hello" class=" helloWorld .HelloWorldAction"><result name="success" type="dispatcher"><param name="location">/greetings.jsp</param></result></action>我们先看action标签:name=‖hello‖,表示我们调用这个Action的标识是hello,这样我们可以通过下面的url访问这个Action:…/hello.action,例如:http://localhost:8080/webwork/hello.action;class=" helloWorld .HelloWorldAction"很好理解,这是真正调用执行的类。

我们在看看result标签:name="success",记得前面HelloWorldAction返回的字符常量SUCCESS吗?它的值其实就是―success‖,它表示Action执行成功返回success就转向这个结果;type="dispatcher"表示执行完Action,转向结果页面的方式;param参数指定了结果页面的位置:/greetings.jsp。

代码写完,剩下的当然是编译、部署。

启动tomcat服务器之后我们就可以执行了:在浏览器里输入你的地址:http://localhost:8080/webwork/hello.action你将会看到如下结果:Action(动作)Action介绍Action在MVC模式中担任控制部分的角色,在WebWork中使用的最多。

每个请求的动作都对应于一个相应的Action,一个Action是一个独立的工作单元和控制命令,它必需要实现XWork里的Action接口,实现Action接口的execute()方法。

Action接口的代码如下:代码package com.opensymphony.xwork;import java.io.Serializable;public interface Action extends Serializable {public static final String SUCCESS = "success";public static final String NONE = "none";public static final String ERROR = "error";public static final String INPUT = "input";public static final String LOGIN = "login";public String execute() throws Exception;}excute()方法是Action类里最重要的部分,它执行返回String类型的值,在Action中返回的值一般使用它上面定义的标准静态字符常量。

相关文档
最新文档