文档章节

Dojo与JS、JQuery的简单比较

Mr_Tank_
 Mr_Tank_
发布于 2015/06/23 14:20
字数 733
阅读 109
收藏 0
点赞 1
评论 1

平时开发都是用的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_

粉丝 226
博文 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
从Asset Packager升级到Assets Pipeline

最近做的一个项目是把一个原来 Rails 2 的网站升级到 Rails 3.2。 这个 project 里面用到了Asset Packager 来管理 Javascript 文件。Rails 3.1 开始采用 Assets Pipeline 来管理 Javascript...

绿海荡舟
2012/12/14
0
0
开发人员常用的10个JavaScript库

最近有很多学员在问我,有没有常用的javascript库,他们在日常使用的时候不知道去哪儿找。我在此整理出来,供麦子学院的学员们参考。 MooTools MooTools是一个简洁,模块化,面向对象的JavaS...

yexiaobo1990
2015/07/24
0
0
AJAX框架/库比较和选择:ECHO2, GWT, DOJO, PROTOTYPE, JQUERY

看了几篇中英文的AJAX库/框架比较文章,为方便选择使用,特归纳如下: 首先,要在两个类别中选择,一个是编译类,一个是非编译类别。 Echo2/GWT是将JAVA代码编译成JAVASCRIPT,乍看很方便,不...

晨曦之光
2012/03/09
0
0
应用最广的十大Javascript框架

【CSDN 2月20日消息】近日,知名技术开发网站SYS-CON 媒体列出十个应用最广的Javascript框架,文章说,Javascript库已经成为设计优秀网站的基础,当今几乎所有站点都带有Javascript或Ajax元素...

晨曦之光
2012/03/09
0
0
美国主流网站所使用的JavaScript框架

作者:Pingdom时间:2008-10-04来自:翻译技术等级: 哪些JavaScript框架是最常见,使用最频繁的? 要回答这个问题,我们对大约200个美国主流网站进行了调研,检查他们是否使用了JavaScript框...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python以太坊类库web3.py概览

python通过web3.py库与以太坊交互共同入口是web3对象。web3对象提供API接口,python开发应用与以太坊进行交互如钱包创建、支付、转账等连接JSON-RPC服务器进行。 Providers提供者 Providers使...

智能合约
1分钟前
0
0
【Android学习笔记】设置App启动页

先将启动页放到项目资源中,图片一般是1080*1920的jpg。 新建一个activity,如图: 创建成功之后,打开刚刚创建的activity,来进行代码的编写: >>>阅读全文

全部原谅
3分钟前
0
0
什么是React-redux、为什么使用React-redux、怎么使用React-redux

1、什么是React-redux React-redux是用于连接React和Redux的 2、为什么使用React-redux 使用React-redux可以使redux部分代码更简洁更明了,比如组建中需要使用到的数据都在mapStateToProps方...

kimyeongnam
5分钟前
0
0
Spring核心——Stereotype组件与Bean扫描

在注解自动装载中介绍了通过注解(Annotation)自动向Bean中注入其他Bean的方法,本篇将介绍通过注解(Annotation)向容器添加Bean的方法。 Spring的核心容器提供了@Component和@Bean注解来标...

随风溜达的向日葵
5分钟前
0
0
利用世界杯,读懂 Python 装饰器

Python 装饰器是在面试过程高频被问到的问题,装饰器也是一个非常好用的特性, 熟练掌握装饰器会让你的编程思路更加宽广,程序也更加 pythonic。 今天就结合最近的世界杯带大家理解下装饰器。...

猫咪编程
9分钟前
0
0
flink fold example

flink fold例子 import org.apache.flink.api.common.functions.*;import org.apache.flink.streaming.api.datastream.DataStream;import org.apache.flink.streaming.api.environment.S......

coord
10分钟前
0
0
c++ qt 组播总结

每个人都有不同的认知规律和习惯, 有的人喜欢搞一套严密的大理论, 论述起来滔滔不绝, 不管自己懂不懂, 反正读者/听者是没搞懂。 有的人喜欢从实践出发, 没看到代码, 不运行一下, 不看...

backtrackx
14分钟前
0
0
Sublime text2安装json格式化插件SublimePrettyJson[Windows]

一、下载SublimePrettyJson插件包 https://github.com/dzhibas/SublimePrettyJson 二、将下载的文件解压放到在package目录下面 C:\Users\lucky\AppData\Roaming\Sublime Text 3\Packages 每个......

lazy~
14分钟前
0
0
安装vue-cli 报4058错误

1. 4058是网络代理错误。 安装淘宝源修改一下就可以了: npm --registry https://registry.npm.taobao.org info underscore 改为cnpm执行: cnpm install --global vue-cli 安装成功: 试试版...

MrBoyce
16分钟前
0
0
CPU飙升分析

1、top -----看具体的进程 2、top -H -p pid ------该进程的线程 3、printf 0x%x 15248 ------将线程改为16进制 4、jstack 进程...

北极之北
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部