文档章节

Dojo与JS、JQuery的简单比较

Mr_Tank_
 Mr_Tank_
发布于 2015/06/23 14:20
字数 733
阅读 121
收藏 0

平时开发都是用的JQuery,最近有空学习了一下Dojo,也有了个简单的了解,所以记录一下;

DOJO官网地址:dojotoolkit,在官网可以在里面找到快速入门的栗子和文档,Dojo的文档很完善,所以看着文档学习还是比较快的。

快速入门:http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/

比较:

1、元素选择器,dojo把id选择器和其他的分开了,不像jquery那样全部都是使用jquery对象,比如:$符号;

(1)根据id查找DOM元素:

javascriptjquerydojo
document.getElementById()$("#id")dom.byId()

查看dojo/dom.js源码的一个片段(全部共30行),实现方式也比较简单,源码里还有很多其他的处理,应该是为了处理浏览器的兼容性,可以下载下来看看:

dom.byId = function(id, doc){
    return ((typeof id == "string") ? (doc || win.doc).getElementById(id) : id) || null; 
};

使用方法:

dom.byId("helloworld").innerHTML = " Hello New World! ";

Dojo也提供了一个方法dom.isDescendant,用于判断一个元素是否是另一个元素的子元素;

(2)CSS选择器

javascriptjquerydojo
document.querySelector("...")/querySelectorAll()$("...")query(selector,context)

dojo的一个使用实例,需要依赖query模块:

<div id="btn-list">
	<button id="btn-hello" custom-attr="i am a btn">hello</button>
	<button id="btn-hello2"  custom-attr="i am a btn2" class="hello2">hello btn2 by query</button>
	<button id="btn-hello3"  custom-attr="i am a btn3" >hello btn3 by query</button>
	<button id="btn-hello4"  custom-attr="i am a btn4" attr2="btn4">hello btn4 by query</button>
</div>
require(["dojo/query","dojo/domReady!"],function(query){
		
		var _btn_hello_2 = query("#btn-list .hello2"),
			_btn_hello_3 = query("#btn-hello3"),
			_btn_hello_4 = query("button[attr2=btn4]");
			
			_btn_hello_2.on( "click" , function(evt){
				alert("id:"+evt.target.id+";"+evt.target.innerHTML);
			});'
			
			console.log(_btn_hello_3);
			console.log(_btn_hello_4);
	});

2、元素属性

|| javascript | jquery | dojo | | -------- | ----- | ---- | |获取元素属性值|dom.attributes| $("#selector").attr("attr-name") |domAttr.get(dom/domid,"attr-name")| |设置元素属性值|| $("#selector").attr("attr-name","value") |domAttr.set(dom/domid,"attr-name","value")|

dojo还可以批量设置DOM属性值,这个还是比较方便的:

domAttr.set("attr-test",{
    "attr1":"attr1-value",
    "attr2":"attr2-value",
    "attr3":"attr3-value",
    "attr4":"attr4-value"
});

3、事件绑定

javascriptjquerydojo
addEventListener("")$("#selector").on()on()

最后看看文档里一个比较完整的例子:

require(["dojo/query", 
        "dojo/request", 
        "dojo/dom-form", 
        "dojo/dom-construct",
        "dojo/dom-style"
        ], function(query, request, domForm, domConstruct, domStyle){
            query("input[type='submit']").on("click", function(e){
            e.preventDefault(); // prevent sending the form
            var btn = e.target;
            request.post("http://example.com/", {
            data: domForm.toObject(btn.form)
        }).then(function(response){
            // replace the form with the response
            domConstruct.create(div, {innerHTML: response}, btn.form, "after");
            domStyle.set(btn.form, "display", "none");
        });
    });
});

小小的总结:dojo使用给我的感觉就像是在对dojo提供的工具方法的使用,需要在不同的应用场景引入不同的模块,一开始看起来需要记很多东西的样子,但是其实常用的模块比如dom,domAttr写一下就记住了;这种严格的引入看起来有点繁琐,但是也会让人很清晰地看到我们需要使用什么,这是dojo本身的设计和特色,而jquery没有那么多限制,只需要持有jquery对象便可以做很多事情了。

由于我的见识比较少,那么问题来了,为什么没怎么看到有人在用dojo呢?

© 著作权归作者所有

共有 人打赏支持
Mr_Tank_

Mr_Tank_

粉丝 228
博文 38
码字总数 14095
作品 0
深圳
前端工程师
私信 提问
加载中

评论(1)

英强
英强
jQuery太强大了,解决了我们大部分的js需求。
Dojo 与 jQuery 综合比较分析

最近Dojo 和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD、相同的选择 器 引擎Sizzle等。作为业界知名的Javascript库,...

鉴客
2012/07/09
12.4K
21
初看jQuery,比较dojo与jQuery的不同点

以下观点是建立在我初看jQuery,但并没有对jQuery详细理解的情况下。 可能随着后面对jQuery的使用,而增加更深的了解。也可能发现我当初的观点是错误的。 大体浏览了一下jQuery的文档,发现j...

xpbug
2012/08/18
0
0
mootools,jquery,dojo

最近,我开始关注Dojo了,Dojo是一个强大的面向对象JavaScript框架,既然我那么喜欢MooTools,也没理由不喜欢Dojo。与Dojo相比我对MooTools 和 jQuery 是比较熟的。这并不重要,不管使用什么样...

水稻
2015/01/20
0
0
[信息图表]Javascript框架和jQuery

我们一直想知道最流行的JavaScript框架间的对比,以及那些框架开发的web应用。下面的Javascript Frameworks 和 jQuery 信息图表, 包括了jQuery, Mootools, Prototype, YUI, Dojo, Extjs等。...

小卒过河
2011/06/15
1K
1
jQuery 十周年:将继续开启下一个辉煌的十年

jQuery 已经十周年了,是在 2006 年 1 月 14 日的 BarCamp NYC 上由 John Resig 发布的一个 JavaScript 库。jQuey 最初的目标是解决一些基础性问题,不再需要多一个 JavaScript 库依赖。jQu...

oschina
2016/01/15
4.7K
25

没有更多内容

加载失败,请刷新页面

加载更多

独家解密:阿里超大规模数据中心性能分析

郭健美,阿里巴巴高级技术专家,目前主要从事数据中心的性能分析和软硬件结合的性能优化。CCF 系统软件专委和软件工程专委的委员。曾主持国家自然科学基金面上项目、入选上海市浦江人才计划A...

阿里云云栖社区
18分钟前
2
0
独家解密:阿里大规模数据中心性能分析

郭健美,阿里巴巴高级技术专家,目前主要从事数据中心的性能分析和软硬件结合的性能优化。CCF 系统软件专委和软件工程专委的委员。曾主持国家自然科学基金面上项目、入选上海市浦江人才计划A...

zhaowei121
21分钟前
1
0
mongodb系列~配置文件的优化与处理

mongodb系列~配置文件的优化与处理 一 简介:讲讲如何优化mongo配置文件 二 常规参数 port= //端口 fork=true//守护进程方式启动mongo logpath=shard.log //mongo日志存放路径 journal= tru...

linjin200
23分钟前
1
0
同一台 windows10 设备,安装两个不同版本的mysql

两个mysql 的my.ini文件需要 配置不同的端口。 [mysqld]# 设置3307端口port=3307# 设置mysql的安装目录basedir=F:\\mysql-5.7.24-winx64 # 切记此处一定要用双斜杠\\,单斜杠我这里...

无敌小学僧
23分钟前
2
0
条码插件TBarCode Office系列教程一(Word Add-In篇)

TBarCode Office是一款适用于Microsoft Word 2007、2010和2013的条码插件,通过此插件可以轻松的在您的文档中嵌入代码。此系列教程旨在介绍TBarCode Office的常见问题及解答,帮助大家学习使...

ymy_666666
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部