Find some pathetic information about dojo, thanks to the author! _javascript Tips

Introduced:
This will give you an initiation course for dojo. You might say to yourself, "This is a good time to skip because I already know JavaScript and I know a lot about web development." "But there is a chance for you to realize that your knowledge is not so solid, there are many basic things to learn."

When we introduced dojo to people, we encountered two difficult problems. Some users have been using DHTML for a long time and have a deep understanding of JavaScript, they know what JavaScript can do, what not to do, there are stereotypes in their minds, and sometimes it's harder to make these people understand dojo. The second problem is that for beginners, they are too inexperienced and familiar with JavaScript.

I encourage both of these friends to read the introductions, even if you don't see them all.

What is Dojo?

It's really hard to summarize what dojo really is. I say it's difficult to summarize dojo because Dojo is an extensible collection of code (expandable collection's). The expansion is not just from many developers, but you will find that you can expand your own set of things according to your own needs. That is, the reason you look at Dojo is because dojo can complement JavaScript.

There are 3 main sections in the development client (Client-side Development): events, which repeatedly use DHTML blocks to deliver information to clients and servers. Dojo is good at these three things and makes them easy.

History

Translator Note: History I really do not want to translate, if someone is very interested in words, you can give me a message, I have time to translate.

。。。。。。。。。。。。

What is a tool (Toolkit)?

Many people think that the structure (framework), library, tool is the same meaning. But figuring out the difference between them is helpful for later understanding.

Framework

In software development, a structure (framework) is usually defined in order for other projects to be shared and collaborated. A structure typically contains support programs (support programs), libraries, and a script program. You may realize that Dojo is part of the framework, but not the framework itself.

Library

The library file defines a number of methods that can be referenced (function) that can be run anywhere, not the way we normally define them in our program. Look at this, you might say, "Hey! Dojo is the collection of libraries! ”。 You should be right, but dojo is a lot more inclusive than a collection of libraries.

Toolkit

Read the previous article, you may still be wondering exactly what dojo is for. Obviously, he is not a structure (framework), is it a tool (toolkit) or a library? Finally, let me answer, usually the library is defined previously, you can refer to your program and use them, but in dojo, we add a layer of encapsulation system outside the library. This makes it somewhat different from the general library.

In this system, we divide the library into many parts. There are core methods (cores functions), and many other fader (sub library) that are not commonly used. This allows you to use dojo to feel that it is very concise. Here's a more specific analysis that will make you more aware of dojo.

What will dojo give you?

Netscape was once prevalent, and most people were using it, so Netscape gave a standard for Web site production. After a while, Microsoft's Ie,ie was stronger than Netscape and became the new standard. But there is a certain difference between this standard and the web, so when people make websites, they start to move closer to the new IE standard.

Many years have passed, ie still undefeated, and has not been updated a lot. The same number of bugs, lack of standardization. Slowly the Nets are starting to use Firefox,opera,safari, which is updated quickly in order to keep up with the standards of the world's consortium.

Many of the same features, but what does it mean for us to write different code for different browsers? means that we have to make a perfect site is very difficult. What is a programmer going to do then?

Knowledge Supplement

If you use static HTML to make a Web site, of course, it does not appear above the problem, but it also means that the site can not be interactive, the most is simply to provide a form (form) for users to submit, and then return a new page to display data.

The advent of JavaScript is precisely to address these challenges.

Solve all problems

Dojo is not only present in the abstraction layer, but also exists independently. Not only provide some libraries, some methods, some features, but also make the code more concise, to ensure that your code contains only the necessary parts.

Dojo can make your life simpler because he links a lot of things to you, dividing your complex projects into small problems, making your code simpler, more efficient, and more reusable.

Chapter One: Start using Dojo

There are many versions of Dojo, you can suddenly not know which to choose, here you can rest assured that no matter what version you use, the example in this book you can run.

Download Dojo

(Translator Note: This is the version I use, zip file, you can also go to the Dojoa homepage for download.) ）

Dojo Module (Modules)

The library definition for dojo uses modules, just like Java. This allows you to quote only the parts you need, not all of them, to ensure the browsing speed.

For example, the Dojo event package is defined in the module dojo.event.

(Translator Note: This part of the original book is very verbose, I gave a brief, interested friends can see the original.) ）

Referencing module formats:

Dojo.require ("Dojo.module[.sub Module]");

For example, we would like to quote lite effects systems,

Dojo.require ("Dojo.lfx");

This will introduce all the LFX under the dojo.lfx.*, and of course you can also use the Toggle module under LFX If you want to refer to it separately:

Dojo.require ("Dojo.lfx.toggle");

Widgets

What is a widget? A button, a picture, this is a widget, the most common HTML widget has links, buttons, input boxes.

Using Dojo, you can change widgets, such as adding a color calendar next to the Date entry box to allow the user to select a date, while Dojo does not break your original input box, because dojo extends your HTML instead of replacing it.

The advantages of using widgets are mainly three points:
Cross-platform: The use of dojo widgets, regardless of any browser, will accurately get the correct effect.
Automatic degradation: Some old browsers may not be as perfect for JavaScript support, and dojo can let them display the correct content, such as the previous color calendar example, if the browser does not support, then dojo will automatically degenerate the calendar to a simple selection box, or other (depending on the widget).
Extensibility: You can use the widgets provided by dojo to create new widgets, in which you do not need to copy any code from the library or modify the code in the library.

How to use Widgets

Widgets have many ways to use them. The widget searches the entire page frame and automatically adds the content that should be added to it.

Here's a simple example, and we can see how the widget is automatically degraded, because we don't define the ComboBox for the option, but only a value, and so the final display is just a simple InputBox, if the user disables JavaScript , the results will be the same.

<input dojotype= "ComboBox" value= "Default" dataurl= "Comboboxdata.js" >

But if we only want to use the standard of the Consortium (translator: Without those extra tags, such as dojotype), we can use the following method.

<input class= "Dojo-combobox" value= "Default" dataurl= "Comboboxdata.js" >

<dojo:combobox? Value= "Default" dataurl= "Comboboxdata.js" >

You may have noticed the dataurl, his role is to add comboboxdata.js content to the ComboBox, but now comboboxdata.js no content. (Translator Note: Of course you can change the content of Dataurl, the name is not fixed.) ）

The following is an example of a select:

<select dojotype= "ComboBox" >
<option value= "foo" >foo</option>
<option value= "Bar" >bar</option>
<option value= "Baz" >baz</option>
<option value= "Thud" >thud</option>
</select>

From the example above, you know a lot of things, but it doesn't seem to be useful, just to tell you that dojo isn't that complicated.

Back and forth.

Dynamic Web application, which avoids frequent refresh of pages, often brings back and forward buttons out of action. More, sometimes, users may find it difficult to add a Web page to their favorites.

Dojo provides a workaround for the Web page program to handle the browser's back and forward, and to provide the browser with a unique address. The solution is to use Dojo.undo.browser.

Using Dojo.undo.browser

In the Dojo version 0.2.2, there was no dojo.undo.browser, which was added after 0.3.

First, you need to use the Dojo.undo.browser.setInitialStae (state) setting when the browser first loads the page.

Theory

The Dynamic Web program calls XMLHttpRequest and DOM to update the content of the Web page without refreshing, updating the browsing history, and not changing the browser's address bar. This means that when the user clicks the Back button, the entire Web page program loses its current running state. And even if the user wants to add the current page content to the favorites, it is not possible, because the favorites will not record the status of the Web program running, but only a simple record of the Web page program address (URL).

Developers can use the Dojo.undo.browser package to get users to click Back and Forward Events (event), and then update the page content based on these events. Dojo.undo.browser passes the browsing history by using a hidden form (hidden IFRAME) or a unique label (fragment identifier). (Translator Note: Can be imagined as a cookie or a session, but this session information is stored in the hidden iframe or tag) for example:

Http://some.domain.com/my/path/to/page.html

(Translator note: #fragmentIdentifier就是标签记录)

Because when you change the label does not make the page refresh, so it is very suitable to record the status of the current Web page program. Of course, developers can customize a more readable label and allow users to add it to the Favorites folder.

Dojo.undo.browser allows developers to create an object (state object) relative to the runtime, and the object gets called back (callback) when the user clicks the back or forward button.

Development

Here are some things you must do before using Dojo.undo.browser:

1: Set up Preventbackbuttonfix:false in Djconfig. This ensures that the hidden form (hidden IFRAME) will be added to the page, and Dojo.undo.browser will not work if you do not join this section.

The setting method is to add the following code to the header:

<script language= "JavaScript" type= "Text/javascript" >
Djconfig = {isdebug:true, preventbackbuttonfix:false};
</script>

2: Join Dojo.require ("Dojo.undo.browser");

To set the initial state of a Web page program:

Dojo.undo.browser.setInitialState (state);

The state object is invoked each time the user clicks forward or backward.

Then we need to create several methods (function) for the state object.
Get back (), backbuttion (), or handle (type), type can be "behind" or "forward".
Get forward Hint: forward (), Forwardbutton () or handle (type), type as above.

Here's a simple example:

var state = {
Back:function () {alert ("Back is clicked!");},
Forward:function () {alert ("Forward was clicked!");}
};

Registering a State object uses the following method:

Dojo.undo.browser.addToHistory (state);

If you change the browser's address (URL), refer to the Changeurl property of the State object. If Changeurl is True,dojo.undo.browser, a unique label will be generated, and if Changeurl is defined as any other value (excluding undefined,null,0 and empty string), then this value will be used as a label. This allows the user to add the current page to the Favorites folder.

Tips
If you want to use Changeurl, even if you do not set your own label, it is defined at least as true.
If you want to test in this machine, do not use IE. Because the history list ifram_history.html is not created when IE accesses a local file. Please upload the Web page to the server for testing.
safari2.0.3+: Only the Back button works, and only when Changeurl is not used.
Opera 8.5.3: Not running properly.

Here is an example of an online:

Http://archive.dojotoolkit.org/nightly/tests/undo/test_browser.html

Publishing Dojo

Translator Note: This part of the English version has not been completed, so temporarily do not translate, will certainly fill up.

June 27 Update:

/ o

Dojo.io.blind Introduction

When we were making dojo, the goal was to get both users and developers to enjoy the DHTML program. With the support of many friends, especially Aaron Boodman and Mark Anderson, we have found a way to solve usability. We provide a separate Easy-to-use API and a wrapper class that requires only two files. The Dojo.io package provides support for XMLHTTP and some other more complex transport structures.

The Dojo.io.bind () method is the most commonly used in Dojo.io packages. Dojo.io.blind () is a standard asynchronous request API that contains a variety of transport layers (transport layers), including queues of iframes,xmlhttp,mod_pubsub,livepage, and so on. Dojo tries to select the most appropriate transmission method for the current request, because the other transports are not used when doing the site, so we only use XMLHTTP. Dojo accepts an anonymous class, but takes it as a method parameter (function argument) when it knows the properties of the class. The following code creates a request that returns the original string from the URL.
Dojo.io.bind ({
URL: "Http://foo.bar.com/sampleData.txt",
Load:function (type, data, evt) {/* do something w/the data */},
MimeType: "Text/plain"
});

That's all, you've provided a data address, and a function to perform when you get the return value. But what if something goes wrong in the request process? We will then create a register to resolve:

Dojo.io.bind ({
    URL: "Http://foo.bar.com/sampleData.txt",
    Load: function (type, data, evt) {/*do something w/the data */},
    error:function (type, error) {/*do Somet Hing W/the error*/},
    mimetype: "Text/plain"
});

You can also create a separate handler to resolve:
Dojo.io.bind ({
    URL: "Http://foo.bar.com/sampleData.txt",
    handle:function (type, data, evt) {
        if (type = =) Load ") {
           //Do something with the data object
       }else if (type = "Error") {
            /Here, "data" are our Error object
            //respond to the error here
       }else{
 & nbsp;         //Other types of the events might get passed, handle them here       }
   },
    mimetype: "text/ Plain "
});

The following code submits a section of JavaScript program and then lets the server run it, and generally we do this to expedite the program, note mimetype:
Dojo.io.bind ({
    URL: " Http://foo.bar.com/sampleData.js ",
    load:function (type, evaldobj) {/* do something/},
    mimetype: "Text/javascript"
});

If you want to make sure that the program uses XMLHTTP, you can write this:
Dojo.io.bind ({
URL: "Http://foo.bar.com/sampleData.js",
Load:function (type, evaldobj) {/* do something */},
MimeType: "Text/plain",//Get plain text, don t eval ()
Transport: "Xmlhttptransport"
});
Being a jack-of-all-trades, bind () also supports the submission of forms via a request (with the only caveat that it won ' t do file upload over XMLHTTP:
As a jack-of-all-trades (Know-it-All), bind () also supports data from the form submission.
Dojo.io.bind ({
URL: "http://foo.bar.com/processForm.cgi",
Load:function (type, evaldobj) {/* do something */},
FormNode:document.getElementById ("Formtosubmit")
});
These are just some of the basics, but they don't all have to be customized by the developer.

Rpc
As you can see, Dojo provides a simple, powerful way through Dojo.io.bind to use a wide variety of I/O functions. However, during the development process, programmers will call a lot of I/O, which will also add to the burden on the server and the client. The Dojo RPC service is designed to reduce burden, ease of use, and simplify code.

The full name of RPC is remote Procedre Calls, or remote method invocation, (Translator: Remote method invocation). Most fundamentally, RPC allows developers to invoke methods (method) on a remote server. Dojo not only provides the basic RPC client package, but it also expands it to support the JSON-RPC service and Yahoo Services. You can also write your own classes relative to other services.

We assume that there is a small program that needs to invoke the server-side program, assuming that you want to invoke add (X,y) and subtract (x,y). In the absence of special circumstances, our clients will write this:
Add = function (x,y) {

Request = {x:x, y:y};

Dojo.io.bind ({
URL: "add.php",
Load:onaddresults,
MimeType: "Text/plain",
Content:request
});
}

Subtract = function (x,y) {

Request = {x:x, y:y};

Dojo.io.bind ({
URL: "Subract",
Load:onsubtractresults,
MimeType: "Text/plain"
Content:request
});
}

You see, it's not hard. But whether we let the server run add and subtract or let the client compute for itself, this is a very simple program. What if we were to call 30 different method on the server? I guess we're going to have to write almost the same code over and over again, each time you create a request class, set a URL, set a variable, and so on. It's not only easy to make mistakes, but it's also boring.
The Dojo RPC client simplifies this process:
{
"ServiceType": "Json-rpc",
"serviceurl": "rpcprocessor.php",
"Methods": [
{
"Name": "Add",
"Parameters": [
{' name ': ' X '},
{' name ': ' Y '}
]
},
{
"Name": "Subtract",
"Parameters": [
{' name ': ' X '},
{' name ': ' Y '}
]
}

]
}

These are the definitions for the server. Once the definition has been created, other things are simple, and we can also create a class:
var myObject = new Dojo.rpc.JsonService? (defintion);
Methods to use the server:
Myobject.add (3,5);

I bet you're thinking, "I'm not just calling the method, I've got the result of the calculation." "You're right, but it's also very easy." The server-side Myobject.add () returns a deferred class (deferred object). Twisted python users may be familiar with the deferred class (deferred object), which allows developers to append one or more callback (callbacks) and error handling (Errbacks) based on the type of data returned. Here's a simple example:
var mydeferred = Myobject.add (3,5);
Mydeferred.addcallback (Mycallbackmethod);

We add Mycallbackmethod as callback to our deferred class mydeferred. At this time, 8 will be passed into the mycallbackmethod. On the other hand, we can also add a Errback method to handle the error messages returned by the server. We add the callback method (callback) at will, as many as we want, and they are invoked in the order we define.

The above examples are all around the dojo.rpc.JsonService unfold. We can also use Dojo.rpc.YahooService, and the specification and structure are the same. These two classes inherit the Dojo.rpc.RpcService. To create your own class is described in detail in Chapter two.

Reprinted from Http://www.blogjava.net/burnet

Original Address http://www.blogjava.net/burnet/articles/54186.html