dojo Quick Start/dojo入门手册--开始使用dojo.js
2011-07-26 18:40
435 查看
2006年初,dojo还是0.22的时候就很关注它的发展,可一直没有在实际项目中使用。一来是由于文档的缺少,而来是dojo的相关介绍总是让人望而生畏。
到现在都如此,第一个hello world就搞了一大堆东西,比如widget组件,自定义的script标签等,加上要引入什么css文件,djConfig、dojo.require等等,让人很迷惑,这么复杂,到底dojo该怎么使用呢?
我只是想把dojo当作一个普通的js类库,就像prototype那样?OK,闲话少说,来看看如何使用dojo。
[b]第一步,引入dojo.js[/b]
dojo的发行包里有4个子目录,要引入的文件是名叫"dojo"的子目录里的dojo.js。 假设你是这样的目录结构:
[b]开始使用dojo[/b]
现在开始使用dojo的第一个函数:dojo.byId ,dojo.byId就等同于常用的document.getElement 。
OK,是不是和普通的js库一样,没有任何玄机?
[b]dojo.addOnLoad[/b]
现在我们想在window.onload里面处理一点东西,就像Ext.onReady,这个东西在dojo里叫做dojo.addOnLoad。
[b]dojo.connect[/b]
OK,window.onload搞定了,那么如何监听普通的dom事件呢?没问题,强大的dojo.connect出场。
是不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多? 用prototype时最烦的就是那个长长的bindAsListener了,使用dojo.conncect,可以在第三个参数中指定当前的scope:
OK,点击按钮,将输出:Hello Karl。这里dojo.connect的第三个参数变成了scope,而handler函数是第四个,实际上dojo.connect(btn,"onclick",sayHello); 与dojo.connect(btn,"onclick",null,sayHello); 相同。
更加复杂的用法这里不作介绍,写太多就越搞越复杂了,后面再写文章详细介绍dojo.connect,这里只简单介绍如何绑定DOM事件。
到现在都如此,第一个hello world就搞了一大堆东西,比如widget组件,自定义的script标签等,加上要引入什么css文件,djConfig、dojo.require等等,让人很迷惑,这么复杂,到底dojo该怎么使用呢?
我只是想把dojo当作一个普通的js类库,就像prototype那样?OK,闲话少说,来看看如何使用dojo。
[b]第一步,引入dojo.js[/b]
dojo的发行包里有4个子目录,要引入的文件是名叫"dojo"的子目录里的dojo.js。 假设你是这样的目录结构:
project | +--dojo-lib | | | +--dijit | +--dojo | +--dojox | +--util | +--dojo_hello_world.html |
<script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script> |
现在开始使用dojo的第一个函数:dojo.byId ,dojo.byId就等同于常用的document.getElement 。
<input type="text" name="username" id="username" value="Mark" /> <script type="text/javascript"> var username = dojo.byId('username').value alert(username); </script> |
[b]dojo.addOnLoad[/b]
现在我们想在window.onload里面处理一点东西,就像Ext.onReady,这个东西在dojo里叫做dojo.addOnLoad。
dojo.addOnLoad(function(){ var username = dojo.byId('username').value alert(username); }); |
OK,window.onload搞定了,那么如何监听普通的dom事件呢?没问题,强大的dojo.connect出场。
<script type="text/javascript"> function sayHello(event) { alert("Hello"); } dojo.addOnLoad(function(){ var btn = dojo.byId('hello'); dojo.connect(btn,"onclick",sayHello); }); </script> <input type="button" id="hello" value="Hello" /> |
var name = "Mark" function sayHello() { alert("Hello " + this.name); } var obj = { name: "Karl" } dojo.addOnLoad(function(){ var btn = dojo.byId('hello'); dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数 }); |
更加复杂的用法这里不作介绍,写太多就越搞越复杂了,后面再写文章详细介绍dojo.connect,这里只简单介绍如何绑定DOM事件。
相关文章推荐
- 开始使用dojo.js --dojo Quick Start/dojo入门手册1
- 获取json、xml的数据类型--dojo Quick Start/dojo入门手册3
- 类似于Function.bind的dojo.hitch --dojo Quick Start/dojo入门手册4
- dojo里如何定义和继承Class --dojo Quick Start/dojo入门手册5
- dojo的package机制--dojo Quick Start/dojo入门手册6
- dojo Quick Start/dojo入门手册
- dojo Quick Start/dojo入门手册--xmlhttp dojo.xhrGet
- dojo Quick Start/dojo入门手册--json
- dojo Quick Start/dojo入门手册--dojo.hitch scope/context
- Ajax 对象 xmlhttp --dojo Quick Start/dojo入门手册2
- dojo Quick Start/dojo入门手册--面向对象,定义Class
- dojo Quick Start/dojo入门手册--package机制
- Vue.js 2 Quickstart Tutorial 2017(Vue.js 2快速入门教程2017)
- THREE.JS入门教程-1.开始使用THREE.JS
- Dojo QuickStart 快速入门教程 (4) 简单的测试框架
- [译] THREE.JS入门教程-1.开始使用THREE.JS
- Dojo QuickStart 快速入门教程 (2) 基本框架
- Turtlebot3入门手册之六:开始使用和远程操作
- Dojo Quick Start Guide 快速入门 基本框架
- javascript入门经典学习三(使用变量,字符串数组)(附js中文手册)