📄 1.html
字号:
<option value="brown" class="readModeBrown"> 褐色</option>
</select>
<span style="font-size:20px;">A</span>
<select id="no2" onChange="setFontStyle(this.options[this.selectedIndex].value)">
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体_GB2312">楷体</option>
<option value="仿宋_GB2312">仿宋</option>
<option value="隶书">隶书</option>
<option value="幼圆">幼圆</option>
</select>
<select id="no3" onChange="setFontSize(this.options[this.selectedIndex].value)">
<option value="32px">二号</option>
<option value="24px">三号</option>
<option value="18px" selected="selected">四号</option>
<option value="16px">小四</option>
<option value="14px">五号</option>
<option value="12px">小五</option>
</select>
<select id="no4" onChange="setFontColor(this.options[this.selectedIndex].value)">>
<option value="black" class="readModeBlack"> </option>
<option value="green" class="readModeGreen"> </option>
<option value="darkred" class="readModeDarkred"> </option>
<option value="darkslateblue" class="readModeDarkslateblue"> </option>
<option value="teal" class="readModeTeal"> </option>
<option value="indigo" class="readModeIndigo"> </option>
<option value="brown" class="readModeBrown"> </option>
<option value="#ffffff" class="readModeWhite"> </option>
<option value="#E4EBF1" class="readModeBabyBlue"> </option>
<option value="#eef9fc" class="readModeEEF9FC"> </option>
<option value="#EEEEEE" class="readModeGrayEEE"> </option>
<option value="#E4E1D8" class="readModeGrayE4E"> </option>
<option value="#E6E6E6" class="readModeGray6E6"> </option>
<option value="#EEFAEE" class="readModeEEFAEE"> </option>
<option value="#FFFFED" class="readModeYellow"> </option>
</select>
鼠标双击滚屏
<select id="no5" onChange="setStep(this.options[this.selectedIndex].value)">
<option value="400">10</option>
<option value="300">09</option>
<option value="200">08</option>
<option value="150">07</option>
<option value="120">06</option>
<option value="100" selected="selected">05</option>
<option value="50">04</option>
<option value="40">03</option>
<option value="30">02</option>
<option value="10">01</option>
</select>
<span style="color:#737373">(1最快,10最慢)</span>
<button class="cl3" onClick="saveMode()" alt="save" ></button>
<button class="cl2" id="cl" onClick="_blog_load_js();" disabled="true" >转为繁体</button>
<button class="cl4" id="cl" onClick="javascript:window.close()" alt="close"></button>
</div>
</div>
<div id="readModeTxt" class="readModeTxtBox">
<div id="ArticleTitle">
Dojo 教程 笔记 (转载) 一 </div>
<div id="AuthorReadMode">
<span id="Author">作者：小说</span>
<span id="PublicTime">2008-01-18 02:04:40</span>
</div>
<table width="480" border="0" cellpadding="0" cellspacing="0" class="reader_tag" align="center">
<tr>
<td width="60" height="20" align="right">标签：</td>
<td colspan="4" rowspan="2" align="center" valign="top"><div class="tagItem"><a href="http://search.blog.sina.com.cn/blog/search?q=dojo&tag=n&t=tag" target="_blank">dojo</a></div><div class="tagItem"><a href="http://search.blog.sina.com.cn/blog/search?q=%BD%CC%B3%CC&tag=n&t=tag" target="_blank">教程</a></div><div class="tagItem"><a href="http://search.blog.sina.com.cn/blog/search?q=it&tag=n&t=tag" target="_blank">it</a></div> <div style="clear:both"></div>
</td>
</tr>
<tr>
<td width="60" height="20"> </td>
</tr>
</table>
<div id="Content" style="word-wrap:break-word;word-break:break-all;overflow:hidden;" onselectstart="return false;">
Dojo学习笔记(1. 模块与包)
<p>Intro:</P>
<p>Dojo是一个非常强大的面向对象的JavaScript的工具箱,
建议读者能够去补充一下JavaScript下如何<br/>
使用OO进行编程的, 这对于你以后阅读Dojo Source有很大的用处.</P>
<p>请大家下载dojo 0.3.1, 以下的说明均针对此版本</P>
<p>
翻译自http://manual.dojotoolkit.org/WikiHome/DojoDotBook/BookUsingDojo</P>
<p>Getting Started</P>
<p>1: 把Dojo加入到我们的Web程序中</P>
<p>1. 标志</P>
<p><script type="text/javascript"><br/>
djConfig = { isDebug: false };<br/>
</script><br/>
djConfig是Dojo里的一个全局对象, 其作用就是为Dojo提供各种选项,
isDebug是最常用的属性之一,<br/>
设置为True以便能够在页面上直接看到调试输出,
当然其中还有些属性与调试有关, 这里就不罗索了</P>
<p>2. 引用 dojo 的启动代码</P>
<p><script type="text/javascript" src="/yourpath/dojo.js"
/><br/>
这样你就引用了dojo的代码, 并可以直接使用其中部分常用的对象,
下载下来的dojo.js是压缩<br/>
(remove comments and space)后的代码,
要阅读的话,建议阅读dojo.js.uncompressed.js, dojo.js<br/>
大概有127K, 而未压缩前有211K, ok, 为什么会这么大呢,
原来其已经把部分常用的模块整合进dojo.js里,<br/>
因此显得大了一点,
build.txt里就说明了默认的dojo.js包含了哪些模块</P>
<p>3. 声明你所要用到的包</P>
<p><script type="text/javascript"><br/>
dojo.require("dojo.math");<br/>
dojo.require("dojo.io.*");<br/>
dojo.require("dojo.widget.*");<br/>
</script><br/>
你就把这些代码当成是java的import语句或C#中的using语句一样,
如果你不require的话, 而模块本身又<br/>
没有整合在dojo.js中, 是会出现脚本错误的喔</P>
<p>2. 针对不同需求提供的预整合包</P>
<p>Dojo本身是由许多模块所组合而成的, 但是由于用户需求的多样性,
dojo针对不同的需求而提供了不同的<br/>
版本, 用户在下载dojo的时候就看见可以选择很多的版本,
比如Ajax版和Widget版, 每个版本最重要的区<br/>
别就在于dojo.js文件, 但是除此之外, 每一个版本都是全功能的,
dojo.js根据版本的不同而整合进了不<br/>
同的模块</P>
<p>3. 直接获取Dojo的最新源代码</P>
<p>首先你必须安装 Subversion,
当Subversion在你的电脑上能够正常工作后,你就可以通过如下命令下载<br/>
dojo的源代码:</P>
<p>svn co http://svn.dojotoolkit.org/dojo/trunk/<br/>
这会在你的当前目录下创建一个 trunk 的目录;
如果你希望直接Get到当前目录, 用这个命令:</P>
<p>svn co http://svn.dojotoolkit.org/dojo/trunk/ .<br/>
或者你希望Get到当前目录下的 MyDir 目录, 用这个命令:</P>
<p>svn co http://svn.dojotoolkit.org/dojo/trunk/ MyDir</P>
<p>模块与包</P>
<p>模块</P>
<p>Dojo的代码被划分为逻辑单元称之为模块,
这有点类似于Java中的package,除了dojo的模块能够包含类<br/>
(类似于java中的classes)和简单函数</P>
<p>比如: 模块"dojo.html"包含了一系列的函数,
比如dojo.html.getContentBox(), 模块"dojo.dnd"包含<br/>
了一系列的HtmlDragObject的类</P>
<p>注意名称约定, 函数的首字母为小写字母,类的首字母为大写</P>
<p>模块也可以称之为"命名空间"</P>
<p>包</P>
<p>在多数情况下, dojo的模块只需要定义在一个文件就可以了, 但有时,
一个模块可能划分到多个文件,<br/>
比如: 模块dojo.html, 本来是定义在一个文件中, 可是由于功能的增强,
文件逐渐变大, 我们不得不<br/>
将其拆分为多个文件, 这主要是为性能考虑,
以便浏览器可以只下载其需要用到的代码, 不幸的是其<br/>
实现细节对于dojo的用户看起来不那么透明,
你必须知道你想要用到的功能到底是包含在哪个文件,<br/>
然后才能require并使用它</P>
<p>这样的每一个文件都称之为一个包</P>
<p>dojo.require("dojo.html.extras")<br/>
将引用文件 src/html/extras.js, 这将定义模块 dojo.html
的若干(并非所有)函数</P>
<p>据我所知, 尽管单个文件可以定义包里的多个类,
单个脚本文件不能定义多个模块 (在Java可以等效于<br/>
在一个文件中定义2个类), 并且, 包的名称和模块的名称可以不同, 比如:
包dojo.widget.Button定义<br/>
了dojo.widget.html.Button</P>
<p>基本上你应该这样认为, 包和模块尽管密切相关,
但是是两个完全不同的实体</P>
<p>为什么会有模块和包这样的概念?</P>
<p>为什么会有模块和包这样的概念?
为了满足你的应用程序只需要加载其所用到的东西的需求, 充分利用<br/>
模块化设计的优点, dojo维护了最小的足印以便仍能提供你所需要的功能,
为什么要你的用户浪费时间<br/>
去下载用不到的JavaScript, 当一个包就是一个js文件时,
一个模块本质上就是一个命名空间, 比如:<br/>
dojo.style 或 dojo.html.extras<br/>
多数简单情况下, 一个包包含了一个模块, 但更常见的是,
一个模块可能被拆分为几个包文件</P>
<p>利用包和模块, 将能确保你能够交付最相关的功能代码,
最小程度的减少代码的膨胀和消除由此带来的<br/>
不好的用户体验,这就是模块设计的主要目标, 通过模块化,
你能够引入自定义模块(你自己拥有的<br/>
JavaScript 工具),
并且维护模块对于核心代码库基本不会产生什么影响</P>
<p>另外, Dojo的模块系统也提供了内建的机制来使用代码提供命名空间,
比如, 通过模块dojo.event定义<br/>
的Dojo的事件系统</P>
<p>怎样引用</P>
<p>设置引用语句</P>
<p>你怎样才能知道该引用哪个包到dojo.require()?</P>
<p>1. 模块</P>
<p>首先, 确定你要使用什么模块, 这个例子我们假定你要使用
dojo.lfx.html</P>
<p>2. 包</P>
<p>搜索代码后你发现dojo.lfx.html定义在2个文件:</P>
<p>src/lfx/html.js<br/>
src/lfx/extras.js<br/>
根据你要用到的功能, 你可以</P>
<p>dojo.require("dojo.lfx.html");<br/>
或</P>
<p>dojo.require("dojo.lfx.html");<br/>
dojo.require("dojo.lfx.extras");</P>
<p>通配符</P>
<p>新用户可能会对dojo.lfx.*这样就可以替代上面2句而感到诧异, 实际上,
__package__.js 中已经定义<br/>
了通配符可以代替的语句,
并且这样可以让dojo根据当时的环境而决定加载具体的模块</P>
<p>
/////////////////////////////////////////////////////////////////////////////////////////<br/>
Dojo学习笔记(2. djConfig解说)</P>
<p>
djConfig是dojo内置的一个全局设置对象，其作用是可以通过其控制dojo的行为</P>
<p>
首先我们需要在引用dojo.js前声明djConfig对象，以便在加载dojo.js的时候才能够取得所设置的值，<br/>
虽然在0.3版本以后dojo支持在加载后设置，但是强烈建议你把声明djConfig的代码作为第一段script</P>
<p>一个完整的djConfig对象定义如下（值均为dojo的默认值）</P>
<p><script type="text/javascript"><br/>
var djConfig = {<br/>
isDebug: false,<br/>
debugContainerId: "",<br/>
bindEncoding: "",<br/>
allowQueryConfig: false,<br/>
baseScriptUri: "",<br/>
parseWidgets: true<br/>
searchIds: [],<br/>
baseRelativePath: "",<br/>
libraryScriptUri: "",<br/>
iePreventClobber: false,<br/>
ieClobberMinimal: true,<br/>
preventBackButtonFix: true,<br/>
};<br/>
</script><br/>
isDebug是一个很有用的属性，顾名思义，如果设置为真，则所有dojo.Debug的输出有效，开发时应该设置<br/>
为true，发布时应该设置为false</P>
<p>
debugContainerId同样也是与调试有关的，如果不指定的话，调试信息将会直接利用
document.write输出，<br/>
这样可能会破坏页面的整体布局，所以你可以指定任何一个可以作为容器的html元素的id作为调试信息输<br/>
出容器</P>
<p>allowQueryConfig，这个属性指明
dojo是否允许从页面url的参数中读取djConfig中的相关属性，当值为<br/>
true时，dojo会优先从url参数中读取djConfig的其他属性，<br/>
比如:
http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug</P>
<p>
baseScriptUri，一般不需要设置，dojo会自动根据你引用dojo.js的路径设置这个值，比如，<br/>
<script type="text/javascript"
src="../dojo/dojo.js"></script>，自动获取的值便是
../dojo/<br/>
ps:
如果你有多个工程需要同时引用dojo.js的话，建议也把dojo当作一个独立的工程，引用的时候采用<br/>
绝对路径就可以了</P>
<p>
parseWidgets，这个是可以控制dojo是否自动解析具有dojoType的html元素为对应的widget，如果你没有<br/>
使用任何Widget，建议设置为false以加快dojo的加载速度</P>
<p>
searchIds，这是一个字符串数组，定义了所有需要解析为widget的html元素的ID，如果ID不在其中的html<br/>
元素是不会被解析的，当数组为空数组时，则所有具有dojoType的元素都会被解析</P>
<p>还有一个bindEncoding，是用来设置默认的bind请求的编码方式</P>
<p>至于其它的属性，不是用处不大，就是不知道有什么作用</P>
<p>
在实际开发中，可以把djConfig的定义放在一个js文件里，并将其作为第一个引用的js文件，这样应该是<br/>
最方便的。</P>
<p>
////////////////////////////////////////////////////////////////////////////////////////<br/>
Dojo学习笔记(3. Dojo的基础对象和方法)</P>
<p>
这里所说的基础对象和方法是指的不Require任何包就能够调用的对象和方法</P>
<p> 匿名函数</P>
<p>
在开始前，我想介绍一下js里的匿名函数，这个在阅读dojo的源代码的时候，会发现到处都有匿名函数</P>
<p>;(function(){<br/>
alert(123);<br/>
})();<br/>
//前面的分号是一个空语句，是可以不要的<br/>
匿名函数。一个匿名函数就是一个没有名字的函数。</P>
<p>
你可以认为他们是一次性函数。当你只需要用一次某个函数时，他们就特别有用。通过使用匿名函数，<br/>
没有必要把函数一直放在内存中，所以使用匿名函数更加有效率。</P>
<p>
当然你也可以根本不定义函数，但是使用匿名函数可以把你的代码分段，就像C#中的#region一样</P>
<p>dojo.byId</P>
<p> 非常有用的一个方法，与prototype.js的著名的$一样</P>
<p> 似乎以前的版本还有dojo.byIdArray,
不过最新的版本已经找不到这个函数了(除了src\compat\0.2.2.js)</P>
<p> 如果有多个元素具有指定的id，则返回的是一个集合</P>
<p> Usage Example:</P>
<p>dojo.byId("divTest");<br/>
dojo.byId("divTest", document);<br/>
dojo.byId(document.getElementById("divTest"));<br/></P>
<p>dojo.version</P>
<p> dojo的版本，可以取得major, minor, patch, flag和revision</P>
<p>
这个对象没什么太大用处，除非你要根据dojo的版本选择执行你的代码</P>
<p>dojo.raise</P>
<p> 抛出一个异常</P>
<p>dojo.errorToString</P>
<p> 将异常转换为字符串</P>
<p> Usage Example:</P>
<p>try<br/>
{<br/>
dojo.raise("打印失败", new Error("文件不存在"));<br/>
}<br/>
catch(e)<br/>
{<br/>
alert(dojo.errorToString(e));<br/>
}<br/></P>
<p>dojo.render</P>
<p> 系统环境对象</P>
<p>dojo.render.name 返回 browser ，说明是工作在浏览器下<br/>
dojo.render.ver 返回 4 ，似乎没什么用<br/>
dojo.os.win 返回true说明操作系统是Windows<br/>
dojo.os.linux 返回true说明操作系统是Linux<br/>
dojo.os.osx 返回true说明操作系统是MacOS<br/>
dojo.html.ie 返回true说明浏览器是Internet Explorer<br/>
dojo.html.opera 返回true说明浏览器是Opera<br/>
dojo.html.khtml 返回true说明浏览器是Konqueror<br/>
dojo.html.safari 返回true说明浏览器是Safari<br/>
dojo.html.moz 返回true说明浏览器是Mozilla FireFox<br/>
dojo.svg.capable 返回true说明浏览器支持svg<br/>
dojo.vml.capable 返回true说明浏览器支持vml<br/>
dojo.swf.capable 返回true说明浏览器支持swf<br/>
dojo.swt.capable 返回true说明浏览器支持swt (IBM开发的Standard
Widget Toolkit)<br/>
如果dojo.html.ie为true的话</P>
<p>dojo.html.ie50 返回true说明浏览器是IE 5.0<br/>
dojo.html.ie55 返回true说明浏览器是IE 5.5<br/>
dojo.html.ie60 返回true说明浏览器是IE 6.0<br/>
dojo.html.ie70 返回true说明浏览器是IE 7.0<br/></P>
<p>dojo.addOnLoad</P>
<p>
可以加载指定函数到window.load时执行，好处就是可以很方便的在window.load时执行多个函数</P>
<p>Usage Example:</P>
<p>dojo.addOnLoad(init); //init是一个函数<br/>
dojo.addOnLoad(myObject, init);
//init是myObject对象的一个方法<br/></P>
<p>dojo.require</P>
<p>
如果你想调用一个模块的对象的时候，你应该首先用dojo.require来请求这个模块，dojo会根据你的<br/>
请求自动取得相应的js文件，并加载到内存中，这样你才能调用或创建其中的对象</P>
<p> dojo会自动维护已加载的模块列表，所以是不会重复加载模块的</P>
<p>Usage Example:</P>
<p>dojo.require("dojo.event");<br/>
dojo.requireIf=dojo.requireAfterIf</P>
<p> 可以根据指定的条件来决定是否加载指定的模块</P>
<p> Usage Example:</P>
<p>dojo.requireIf(dojo.html.ie, "dojo.html");
//如果dojo.html.ie为true，才会加载dojo.html模块<br/></P>
<p>dojo.provide</P>
<p>
除非你要开发自己的模块，不然是用不到这个方法的，你可以这句看成是向系统注册这个模块名称</P>
<p> Usage Example:</P>
<p>dojo.provide("dojo.custom");<br/>
dojo.exists</P>
<p> 判断指定对象是否具有指定名称的方法</P>
<p> Usage Example:</P>
<p>dojo.exists(dojo, "exists"); //will return true<br/></P>
<p>dojo.hostenv.getText</P>
<p> 返回指定url的内容</P>
<p> PS:
由于浏览器的安全限制，因此只能用于取得同域名的url的内容，否则会报告权限不够</P>
<p> Usage Example:</P>
<p>aSync = false; //同步，确保返回内容不为null<br/>
silent = true; //不抛出错误<br/>
s = dojo.hostenv.getText("http://www.google.com/", aSync, silent);
//返回Google的首页的HTML<br/>
alert(s);<br/>
dojo.debug</P>
<p>
输出调试信息，如果在djConfig中指定了debugContainerId，则输出到指定的console容器中，否则<br/>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -