文档章节

Dojo与JS、JQuery的简单比较

Mr_Tank_
 Mr_Tank_
发布于 2015/06/23 14:20
字数 733
阅读 111
收藏 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_

粉丝 227
博文 38
码字总数 14028
作品 0
深圳
前端工程师
加载中

评论(1)

英强
英强
jQuery太强大了,解决了我们大部分的js需求。
初看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
7个常见Javascript框架介绍

设计开发中的“框架”指一套包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,目标是使设计师和开发人员把重点放在任务项目所特有的方面,避免重复开发。通俗的讲,框...

Junn
2012/09/16
0
0
大胆预测下几个JavaScript框架的走势

Posted on September 21st, 2008 in 前端开发 by lifesinger MooTools将在接下来的几年内像jQuery一样迅速窜红 而jQuery则会慢慢销声匿迹 YUI将不尴不尬的活着,YUI 3.x将成为小部分人的玩物...

晨曦之光
2012/03/09
0
0
几种流行的AJAX框架:jQuery,Mootools,Dojo,Ext JS的对比

轻量级的选择:主要是mootools和jquery,由于它们的设计思想的不同,jQuery是追求简洁和高效,Mootools除了追求 这些目标以外,其核心在于面向对象,所以jQuery适合于快速开发,Mootools适合...

MiniBu
2013/03/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

play framework 如何支持多数据源

有段时间没有写博客了,但今天又写一篇了,主要是因为这事有一丝自己的思考和动手实践,所以就记录下来了。 现有的问题: play 1.2.4 两台数据库服务器,但是play1.2.4 并不支持同时连接两台...

tuerqidi
26分钟前
1
0
Mysql only_full_group_by解析

查看当前数据库模式: select @@sql_mode; 原因: mysql 5.7中的sql_mode的值中包含'ONLY_FULL_GROUP_BY'; 处理:执行以下SQL set GLOBAL sql_mode ='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,N......

年轻的中年大叔
28分钟前
1
0
防止表单重复提交

1:前端方式(治标不治本) $("#admin-role-save").click(function(){//admin-role-save为submit的idvar ts=$(this);var ts_old_val=ts.val();ts.val("提交中....");ts.att...

uug
28分钟前
1
0
保持屏幕常亮

getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON, WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); 在act的created方法中调用即可,一般是播放视频的时候......

Carbenson
28分钟前
1
0
智能合约实施指南

与区块链技术一样,智能合约在商业领域也非常有价值。 为了让我们的读者彻底了解智能合约是什么以及它们如何影响现代商业的交易方式,我们准备了本指南。 集中商业模式正在给去中心化的模式让...

geek12345
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部