Heim >Web-Frontend >js-Tutorial >推荐dojo学习笔记_dojo
在引用dojo.js前,最好声明djConfig对象,以便在加载dojo.js时能够取得所设置的值,虽然在0.3版本以后dojo支持在加载后设置,但是强烈建议你把声明djConfig的代码作为第一段script:
一个完整的djConfig对象定义如下(值均为dojo的默认值)
js 代码
var djConfig = {
isDebug: false,
debugContainerId: "",
bindEncoding: "",
allowQueryConfig: false,
baseScriptUri: "",
parseWidgets: true
searchIds: [],
baseRelativePath: "",
libraryScriptUri: "",
iePreventClobber: false,
ieClobberMinimal: true,
preventBackButtonFix: true,
debugContainerId同样也是与调试有关的,如果不指定的话,调试信息将会直接利用 document.write输出,这样可能会破坏页面的整体布局,所以你可以指定任何一个可以作为容器的html元素的id作为调试信息输出容器
allowQueryConfig,这个属性指明 dojo是否允许从页面url的参数中读取djConfig中的相关属性,当值为true时,dojo会优先从url参数中读取djConfig的其他属性,比如: http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug
baseScriptUri,一般不需要设置,dojo会自动根据你引用dojo.js的路径设置这个值,比如,<script></script>,自动获取的值便是 ../dojo/
ps: 如果你有多个工程需要同时引用dojo.js的话,建议也把dojo当作一个独立的工程,引用的时候采用绝对路径就可以了
parseWidgets,这个是可以控制dojo是否自动解析具有dojoType的html元素为对应的widget,如果你没有使用任何Widget,建议设置为false以加快dojo的加载速度
searchIds,这是一个字符串数组,定义了所有需要解析为widget的html元素的ID,如果ID不在其中的html元素是不会被解析的,当数组为空数组时,则所有具有dojoType的元素都会被解析
还有一个bindEncoding,是用来设置默认的bind请求的编码方式。
dojo.raise抛出一个异常
dojo.errorToString将异常转换为字符串
js 代码
try {
dojo.raise("打印失败", new Error("文件不存在"));
} catch(e)
{
alert(dojo.errorToString(e));
}
isDebug是一个很有用的属性,如果设置为真,则所有dojo.Debug的输出有效,开发时应该设置为true,发布时应该设置为false。
1 计算HTML中一个块的size
js 代码
dojo.style.getOuterWidth / dojo.style.getOuterHeight
dojo.style.getInnerWidth / dojo.style.getInnerHeight
2 修改CSS
js 代码
dojo.html.addClass(node, className)
dojo.html.prependClass(node, className)
dojo.html.removeClass(node, className)
dojo.html.replaceClass(node, className, oldClassName)
3 动画
js 代码
fadeIn, fadeShow, fadeOut, fadeHide,
wipeIn, wipeOut
explode, implode
highlight, unhighlight
举例:
function wipeOut(elId){
dojo.lfx.wipeOut(elId, 300).play();
}
function wipeIn(elId) {
dojo.lfx.wipeIn(elId, 300).play();
}
function fadeOut(elId){
dojo.lfx.html.fadeOut(elId, 300).play();
}
function fadeIn(elId){
dojo.lfx.html.fadeIn(elId, 300).play();
}
function opacity(elId){
dojo.html.setOpacity(elId, 0.5);
}
function opacityApp(){
$("#opacity").click(function(){
opacity('fadeElm');
});
}
function fadeInApp(){
$("#fadein").click(function(){
fadeIn('fadeElm');
});
} dojo.lang模块:
dojo.lang.mixin将一个对象的方法和属性增加到另一个对象上:
js 代码
var s1 = {name: "TestObj", test1: function(){alert("this is test1!");}}
var s2 = {value: 1000, test2: function(){alert("this is test2!");}}
var d = {};
dojo.lang.mixin(d, s1, s2); //执行后d就具备了s1和s2的所有属性和方法d.test1();
dojo.lang.extend为指定类的原型扩展方法与属性:
js 代码
TestClass = function() {};
dojo.lang.extend(TestClass, {name: "demo", test: function(){alert("Test!");}});
var o = new TestClass();
//TestClass本来是没有test方法的,但是extend以后就有test方法了o.test();
dojo.lang.find=dojo.lang.indexOf查找指定对象在指定数组中的位置:
js 代码
var arr = [1,2,3,3,2,1];
dojo.lang.find(arr, 2); //will return 1
dojo.lang.extrasdojo.lang.setTimeout延迟指定时间后执行指定方法:
js 代码
function onTime(msg){dojo.debug(msg)}
dojo.lang.setTimeout(onTime, 1000, "test"); //1秒后会输出调试信息"test"
DOM操作
js 代码
dojo.dom.isNode
dojo.dom.getTagName
dojo.dom.firstElement
dojo.dom.lastElement
dojo.dom.nextElement
dojo.dom.prevElement
dojo.dom.moveChildren (srcNode, destNode, trim)
dojo.dom.copyChildren (srcNode, destNode, trim)
dojo.dom.removeChildren(node)
dojo.dom.replaceChildren(node, newChild)
dojo.dom.removeNode(node)
dojo.dom.getAncestors
dojo.dom.getAncestorsByTag
dojo.dom.innerXML
dojo.dom.createDocumentFromText
dojo.dom.prependChild
dojo.dom.insertAfter
dojo.dom.insertAtPosition
dojo.dom.textContent
先介绍这么多,祝大家周末愉快!