推荐dojo学习笔记


Posted in Javascript onMarch 24, 2007

在引用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 src="../dojo/dojo.js" type="text/javascript"></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    
先介绍这么多,祝大家周末愉快!

Javascript 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
js实现图片轮播效果
Dec 19 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
详解Vue-Router源码分析路由实现原理
May 15 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 #Javascript
tbody元素支持嵌套的注意方法
Mar 24 #Javascript
xml 与javascript结合的问题解决方法
Mar 24 #Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 #Javascript
this[] 指的是什么内容 讨论
Mar 24 #Javascript
javascript对象的property和prototype是这样一种关系
Mar 24 #Javascript
Ajax一统天下之Dojo整合篇
Mar 24 #Javascript
You might like
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python中enumerate函数代码解析
2017/10/31 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
服装采购员岗位职责
2014/03/15 职场文书
机械专业求职信
2014/05/25 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
工作收入住址证明
2014/10/28 职场文书
解析MySQL binlog
2021/06/11 MySQL