📄 architecture the dojo toolkit.mht
字号:
From: <由 Windows Internet Explorer 7 保存>
Subject: Architecture | The Dojo Toolkit
Date: Sun, 2 Dec 2007 16:25:40 +0800
MIME-Version: 1.0
Content-Type: multipart/related;
type="text/html";
boundary="----=_NextPart_000_00C3_01C834FF.FAD188C0"
X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.3198
This is a multi-part message in MIME format.
------=_NextPart_000_00C3_01C834FF.FAD188C0
Content-Type: text/html;
charset="utf-8"
Content-Transfer-Encoding: quoted-printable
Content-Location: http://dojotoolkit.org/node/4583
=EF=BB=BF<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" =
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=3Den xml:lang=3D"en" =
xmlns=3D"http://www.w3.org/1999/xhtml"><HEAD><TITLE>Architecture | The =
Dojo Toolkit</TITLE><!--=0A=
section: default -->
<META http-equiv=3DContent-Type content=3D"text/html; =
charset=3Dutf-8"><LINK=20
href=3D"/book/book-dojo/part-1-life-dojo-dojo-and-dijit-application-examp=
les/example-4-chatting-tech-support"=20
rel=3Dprev><LINK=20
href=3D"/book/book-dojo/part-1-life-dojo-dojo-and-dijit-application-examp=
les/example-4-chatting-tech-support"=20
rel=3Dup><LINK=20
href=3D"/book/book-dojo/part-1-life-dojo-dojo-and-dijit-application-examp=
les/example-4-chatting-tech-suppor-0"=20
rel=3Dnext>
<STYLE type=3Dtext/css>.geshifilter {
FONT-FAMILY: monospace
}
.geshifilter .imp {
FONT-WEIGHT: bold; COLOR: red
}
.geshifilter .kw1 {
COLOR: #b1b100
}
.geshifilter .kw2 {
FONT-WEIGHT: bold; COLOR: #000000
}
.geshifilter .kw3 {
COLOR: #000066
}
.geshifilter .coMULTI {
COLOR: #808080; FONT-STYLE: italic
}
.geshifilter .es0 {
FONT-WEIGHT: bold; COLOR: #000099
}
.geshifilter .br0 {
COLOR: #66cc66
}
.geshifilter .st0 {
COLOR: #ff0000
}
.geshifilter .nu0 {
COLOR: #cc66cc
}
.geshifilter .sc0 {
COLOR: #00bbdd
}
.geshifilter .sc1 {
COLOR: #ddbb00
}
.geshifilter .sc2 {
COLOR: #009900
}
</STYLE>
<LINK href=3D"/sites/all/themes/dtk/favicon.ico" type=3Dimage/x-icon=20
rel=3D"shortcut icon">
<META content=3Den name=3Dlanguage>
<STYLE type=3Dtext/css media=3Dall>@import url( =
/files/css/4538c7b86f5ddf0e20fe837f59d90fef.css );
</STYLE>
<SCRIPT src=3D"http://dojotoolkit.org/dojo/config/6"=20
type=3Dtext/javascript></SCRIPT>
<SCRIPT=20
src=3D"http://dojotoolkit.org/sites/all/modules/dojo/dtk_build/dojo/dojo.=
js"=20
type=3Dtext/javascript></SCRIPT>
<SCRIPT =
type=3Dtext/javascript>dojo.addOnLoad(function(){dojo.addClass(dojo.body(=
),"tundra");});</SCRIPT>
<SCRIPT type=3Dtext/javascript>dojo.require("dojo.parser");</SCRIPT>
<SCRIPT =
type=3Dtext/javascript>document.documentElement.className=3D"js";</SCRIPT=
>
<SCRIPT src=3D"http://dojotoolkit.org/sites/all/themes/dtk/js/common.js" =
type=3Dtext/javascript></SCRIPT>
<SCRIPT type=3Dtext/javascript>
dojo.require("dijit._base.sniff");
</SCRIPT>
<META content=3D"MSHTML 6.00.6000.16544" name=3DGENERATOR></HEAD>
<BODY class=3D"" id=3Dbdy>
<DIV id=3Dpage-block><!-- region_user_header.php -->
<DIV id=3Dlogin-block><SPAN id=3Duser-header> </SPAN> <SPAN =
id=3Dlogin-prompt><A=20
href=3D"http://dojotoolkit.org/user">Login</A></SPAN> <SPAN =
id=3Dregister-prompt><A=20
href=3D"http://dojotoolkit.org/user/register">Register</A></SPAN> =
</DIV><!-- /region_user_header.php -->
<DIV id=3Dbody-block><!-- region_header.php -->
<DIV id=3Dlogo-block>
<DIV id=3Ddojo-logo><A title=3DHome =
href=3D"http://dojotoolkit.org/"><IMG=20
id=3Ddojo-logo-img alt=3D"The Dojo Toolkit"=20
src=3D"http://dojotoolkit.org/sites/all/themes/dtk/img/banner-logo-text.g=
if"></A>=20
</DIV>
<DIV id=3Dsearch-block>
<FORM id=3Dsearch-theme-form action=3D/search/node method=3Dpost>
<DIV>
<H6 class=3Dhidden><LABEL =
for=3Dsearch_theme_form_keys>Search</LABEL></H6>
<DIV class=3Dcontainer-inline id=3Dsearch>
<DIV class=3Dform-item><INPUT class=3Dform-text =
id=3Dedit-search-theme-form-keys=20
title=3D"Enter the terms you wish to search for." maxLength=3D128 =
size=3D25=20
name=3Dsearch_theme_form_keys><BUTTON class=3Dform-submit =
id=3Dedit-submit-1 name=3Dop=20
type=3Dsubmit><SPAN class=3Dhidden>Search</SPAN></BUTTON> <INPUT=20
id=3Dedit-search-theme-form type=3Dhidden value=3Dsearch_theme_form =
name=3Dform_id>=20
<INPUT id=3Da-unique-id type=3Dhidden =
value=3D3f69e328cbd47ff457e4b25037ebd4be=20
name=3Dform_token> </DIV></DIV></DIV></FORM></DIV></DIV><!-- =
/region_header.php -->
<DIV id=3Dglobal-menu-block>
<UL id=3Dglobal-menu>
<LI id=3Dnav-about><A class=3Dplink =
href=3D"http://dojotoolkit.org/about">About</A>=20
<LI id=3Dnav-demos><A class=3Dplink =
href=3D"http://dojotoolkit.org/demos">Demos</A>=20
<LI id=3Dnav-downloads><A class=3Dplink=20
href=3D"http://dojotoolkit.org/downloads">Downloads</A>=20
<LI id=3Dnav-documentation><A class=3Dplink=20
href=3D"http://dojotoolkit.org/docs">Documentation</A>=20
<LI id=3Dnav-support><A class=3Dplink=20
href=3D"http://dojotoolkit.org/support">Support</A>=20
<LI id=3Dnav-community><A class=3Dplink=20
href=3D"http://dojotoolkit.org/community">Community</A>=20
<LI id=3Dnav-fullmenu><A onclick=3D"return false;"=20
href=3D"http://dojotoolkit.org/node/4583#fullmenu">Full Menu</A> =
</LI></UL></DIV><!-- region_banner.php -->
<DIV class=3Dbanner-default id=3Dbanner-block>
<DIV id=3Dsection-heading>
<P>The Dojo Toolkit: Great experiences...for =
everyone.</P></DIV></DIV><!-- /region_banner.php -->
<DIV id=3Dtop-breadcrumb-block>
<DIV class=3Dbreadcrumb><A href=3D"http://dojotoolkit.org/">Home</A> =
=C2=BB <A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9-0">The Book of =
Dojo</A> =C2=BB <A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo-0">Par=
t 1: Life=20
With Dojo</A> =C2=BB <A=20
href=3D"http://dojotoolkit.org/book/book-dojo/part-1-life-dojo-dojo-and-d=
ijit-application-examples/example-4-chatting-tech-support">Example=20
3: Chatting with Tech Support</A> =C2=BB Architecture</DIV></DIV>
<DIV id=3Dcontent-block>
<DIV class=3Dcols-wide>
<DIV class=3D"col-a content-region-container" =
id=3Dsidebar-left-container></DIV>
<DIV class=3D"col-b content-region-container">
<DIV id=3Dmain-container><!-- main_content region -->
<H2>Architecture</H2><!--Node: -->
<DIV class=3Dnode>
<DIV class=3Dsubmitted>Submitted by criecke on Sat, 11/24/2007 - =
16:55.</DIV>
<DIV class=3Dcontent>
<P>Laura, being the agile programmer she is, wants to first build the =
smallest=20
solution that solves the problem. She sighs, longing for the days of C =
and=20
network sockets. But JavaScript's security model prohibits peer-to-peer=20
networking, so there's nothing like that.</P>
<P>She looks on the Dojo site and finds the cometd (pronounced comet-d) =
server.=20
Interesting! It's a lightweight, HTTP-based server with a small =
footprint. And=20
it is supposed to have good Dojo integration through publish-subscribe=20
events.</P>
<H2>Publish-Subscribe</H2>
<P>Publish-subscribe is an easy-to-understand model for cross-process=20
communication, and Dojo has it baked in. It effectively promotes loose =
coupling=20
between components. Suppose you have a tax form similar to Example 1. =
You have=20
ten dijit.form.CurrencyTextBox's whose contents get added up to a Gross =
Income,=20
another dijit.form.CurrencyTextBox. How do you keep Gross Income =
updated? One=20
way is for the component CurrencyTextBox's to call a central procedure =
for=20
updating:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text/javascript"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR>function=20
reAdd() {<BR> newSubtotal =3D dijit.byId("wages").getValue() =
+=20
...;<BR> dojo.byId("grossIncome") =3D =
newSubtotal;<BR>}<BR><SPAN=20
class=3Dsc2><SPAN class=3Dkw2></script></SPAN></SPAN><BR =
class=3Dgeshibr><SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.CurrencyTextBox"</SPAN> <SPAN =
class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"wages"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/connect"</SPAN> event=3D<SPAN =
class=3Dst0>"onChange"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> =
reAdd();<BR> =20
<SPAN class=3Dsc2><SPAN =
class=3Dkw2></script></SPAN></SPAN><BR><SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.CurrencyTextBox"</SPAN> <SPAN =
class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"tips"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/connect"</SPAN> event=3D<SPAN =
class=3Dst0>"onChange"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> =
reAdd();<BR> =20
<SPAN class=3Dsc2><SPAN =
class=3Dkw2></script></SPAN></SPAN><BR><SPAN=20
class=3Dsc2><SPAN =
class=3Dkw2></div></SPAN></SPAN><BR>...</DIV><BR>
<P>Because this system is tightly coupled, problems arise:</P>
<UL>
<LI>If you add an 11th line to total up, you must change the reAdd()=20
procedure.=20
<LI>If half of the boxes need to send extra onChange events to=20
computeDeductions(), those half need to be changed to call this =
method.=20
</LI></UL>
<P>Granted, this example is contrived because the methods are so small. =
But the=20
larger your system, the more nightmarish maintenance becomes. It would =
be nice=20
to have a whiteboard where controls could sign up for events that =
interest them.=20
This whiteboard could be maintained by a third party to keep the =
controls from=20
worrying about communication details.</P>
<P>That's the essence of publish-subscribe. Dojo is the whiteboard =
maintainer.=20
The GrossIncome box then says "I'm interested whenever a box changes." =
This is=20
called a <I>topic</I>, and we say the GrossIncome box <I>subscribes</I> =
to that=20
topic. The component boxes agree to <I>publish</I> information on this =
topic=20
when they change. Here's how it looks like in code:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text/javascript"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR>function=20
reAdd(args) {<BR> =
dojo.byId("grossIncome").setValue(<BR> =20
dojo.byId("grossIncome").getValue()<BR> =
=20
+ args.newValue<BR> - =
args.oldValue<BR> =20
);<BR>}<BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN><BR><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.CurrencyTextBox"</SPAN> <SPAN =
class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"GrossIncome"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/method"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
dojo.subscribe("componentChange", reAdd);<BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></script></SPAN></SPAN><BR><SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN><BR class=3Dgeshibr><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.CurrencyTextBox"</SPAN> <SPAN =
class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"wages"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/connect"</SPAN> event=3D<SPAN =
class=3Dst0>"onChange"</SPAN>=20
args=3D<SPAN class=3Dst0>"e"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
dojo.publish("componentChange", { oldValue: e.oldValue, =
newValue:=20
e.targetNode.value });<BR> <SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN><BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN><BR>...</DIV><BR>
<P>So the topic "componentChange" is published when any of the component =
boxes=20
change. Sent along with the topic are message-specific data elements =
that help=20
the subscriber - oldValue and newValue in this case. <SPAN=20
style=3D"BACKGROUND-COLOR: yellow">Need to find which elements in the =
event object=20
they are.</SPAN>. The lone subscriber, the GrossIncome box, uses these =
to adjust=20
the current sum. Now to add a component box, you just add it to the form =
with=20
the same dojo.publish statement. Very nice.</P>
<H2>Publish-Subscribe With Cometd</H2>
<P>Cometd effectively extends Dojo publish-subscribe past the browser. =
Cometd=20
speaks the Bayeaux protocol which itself runs over HTTP. Laura =
immediately sees=20
the usefulness of this for online support. The client can publish a =
topic to=20
Cometd containing the message. The operator subscribes to that topic and =
displays messages on the console. It replies on that same topic. Both =
operator=20
and client send the userid with the message, so they can ignore the =
message they=20
themselves send.</P>
<P>The protocol works like this. Assume the client's username is =
"alex.russell"=20
and operator's username is "operator".</P>
<UL>
<LI><B>Operator</B>:=20
<LI>(Time Marches On...)=20
<LI><B>Client</B>: Subscribe to "/chat/demo/alex.russell".=20
<LI><B>Client</B>: Publish a message on "/chat/demo/alex.russell": { =
user:=20
"alex.russell", join: true, chat : "alex.russell has joined the =
room."}=20
<LI><B>Client</B>: Publish a message on "/chat/demo": { user: =
"alex.russell",=20
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -