推荐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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
利用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按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
读jQuery之十 事件模块概述
2011/06/27 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
jQuery实现增删改查
2020/12/22 jQuery
python+opencv识别图片中的圆形
2020/03/25 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
python实现控制台输出彩色字体
2020/04/05 Python
python os模块在系统管理中的应用
2020/06/22 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
班级体育活动总结
2014/07/05 职场文书
终止劳动合同通知书
2015/04/16 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python