I usually use JQuery for development. I recently learned about Dojo when I have time, and I have a simple understanding, so record it;
DOJO official website address: dojotoolkit, which can be found on the official website Find the chestnuts and documentation for quick start. Dojo’s documentation is very complete, so it is relatively fast to learn from the documentation.
Quick start: http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/
Comparison:
1. Element selector, dojo handle The id selector is separated from others. Unlike jquery, all use jquery objects, such as: $ symbol;
(1) Find DOM elements based on id:
| javascript | jquery | dojo |
|---|---|---|
| $(“#id”) | dom.byId() |
< p>Check a snippet of the dojo/dom.js source code (all 30 lines in total). The implementation is also relatively simple. There are many other processes in the source code. It should be for browser compatibility. You can download it and have a look:
dom.byId = function(id, doc){
return ((typeof id == "string")? (doc || win.doc).getElementById(id): id) || null;
};
How to use:
dom.byId("helloworld").innerHTML = "Hello New World! ";
< p>Dojo also provides a method dom.isDescendant to determine whether an element is a child element of another element;
(2)CSS selector
| javascript | jquery | dojo |
|---|---|---|
| document.querySelector(“…”)/querySelectorAll() | query(selector,context) |
A use case of dojo, need to rely on query module:
require(["dojo/query","dojo/domReady!"],function(query){< br />
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);
});
< p>2, element attributes
|| javascr ipt | jquery | dojo | | ——– | —– | —- | |Get element attribute values|dom.attributes| $(“#selector”).attr(“attr- name”) |domAttr.get(dom/domid,”attr-name”)| |Set element attribute value|| $(“#selector”).attr(“attr-name”,”value”) |domAttr.set (dom/domid,”attr-name”,”value”)|
Dojo can also set DOM attribute values in batches. This is quite convenient:
domAttr.set(" attr-test",{
"attr1":"attr1-value",
"attr2":"attr2-value",
"attr3":"attr3-value",
"attr4":"attr4-value"
});
3, event binding
| javascript | jquery | dojo |
|---|---|---|
| addEventListener(“”) | $(“# selector”).on() | on() |
Finally look at a more complete example in the document:
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");
});< br /> });
});
Small summary: The use of dojo makes me feel like I am using the tools and methods provided by dojo. It needs to be used in different application scenarios. Introducing different modules, it looks like a lot of things need to be remembered at first, but in fact, commonly used modules such as dom, domAttr are written and remembered; this kind of strict introduction seems a bit cumbersome, but it will also make people very clear Seeing what we need to use, this is the design and characteristics of dojo itself, and jquery does not have so many restrictions, you only need to hold the jquery object to do a lot of things.
Because I have less knowledge, then the question arises, why don’t you see people using dojo?