1 Preface 1.1 traditional JS foreground Programming
The traditional foreground programming mode is as follows:
<HTML> <br/> <pead> <br/> <! -The page dependency elements are introduced here, including JS files <br/> </pead> <br/> <body> <br/> <! -HTML elements --> <br/> <SCRIPT> <br/> <! -Your own script code --> <br/> </SCRIPT> <br/> </body>
It can be seen that the traditional foreground programming method is process-oriented and is not easy to expand or reuse. In a complex BS project, if you can abstract some areas on the interface that have common characteristics, you can define their behaviors (including interface elements, interface events, and data) encapsulation will greatly improve the front-end development efficiency.
1.2 introduction to dojoDojo is a toolbox that defines the following three modules:
1) Various JS standard library Methods
These standard library methods are all-encompassing and take into account browser compatibility and performance. We recommend that you use these library functions in the dojo framework to avoid browser differences.
2) All-in-One Web Components include basic components (dijit) and extensions (dojox)
In terms of Web Components, You can regard the Web Components of dojo as a front-end tag. After the page is loaded, dojo will call dojo. the parse method of the parser module scans all the DIV labels that have the dojotype attribute on the previous page and converts them into corresponding web components. It is worth mentioning that these components are all designed based on object-oriented thinking, which is very easy to expand. Users can inject their own interface behavior externally by redirecting the base class method, alternatively, you can simply override the methods of the parent class to define your own components.
1.3 introduction to basic conceptsThe idea of Object-oriented has been deeply rooted in the hearts of the people. The Web Components of dojo are also based on the object-oriented idea. Therefore, before introducing the Web components, we need to introduce the object-oriented features of Js.
1.3.1 ClosureClosure is essentially a combination of data and scope containing data. See the following example.
Function Foo () <br/>{< br/> var x = 10; <br/> return function bar () <br/>{< br/> alert (x); <br/>}< br/> var x = 5; <br/> var barref = Foo (); <br/> barref (); // The result is 10.
1.3.2 this keywordThis indicates the caller of the current Code.
Example 1)
<MCE: Script Type = "text/JavaScript"> <! -- </P> <p> alert (this = Window); <br/> // --> </MCE: SCRIPT>
The JS Code that runs independently on the page. This refers to the window object.
Example 2-1)
<Select id = "sel" onchange = "test (); "> <option> 1 </option> <option> 2 </option> </SELECT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- </P> <p> function test () <br/>{< br/> alert (this = document. getelementbyid ('sel '); <br/>}< br/> // --> </MCE: SCRIPT>
Example 2-2)
<Select id = "sel" onchange = "test (); "> <option> 1 </option> <option> 2 </option> </SELECT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- </P> <p> document. getelementbyid ('sel '). onchange = test () <br/>{< br/> alert (this = document. getelementbyid ('sel '); <br/>}< br/> // --> </MCE: SCRIPT>
Because the onchange event can be considered as a select attribute, it can be considered that the select event calls onchange, so this in the event response code is the DOM node.
Example 3)
<MCE: Script Type = "text/JavaScript"> <! -- </P> <p> var A ={}; <br/>. B = function () <br/>{< br/> alert (this = A) <br/>}< br/>. B (); <br/> // --> </MCE: SCRIPT>
This example is obvious because a calls a. B, so it is in the function. This is object.
1.3.3 use of the apply FunctionIn JavaScript, a function is actually an object, and any function has an apply method,
Description of the apply method JScript reference: apply a method of an object and replace the current object with another object. Apply ([thisobj [, argarray])
Parameters in apply ([thisobj [, argarray]) are array sets. Next let's take a look at the specific application of apply.
// Simple apply demo <br/> function simpleapplydemo (ARG) {<br/> window. alert (ARG); <br/>}< br/> function handlespa (ARG) {<br/> simpleapplydemo. apply (this, arguments); <br/>}
From the simple example above, we can see that apply can pass the current parameter to another function parameter to call another function application.
Another technique in apply is that after applying another function (class), the current function (class) has the method or attribute of another function (class, this can also be called "inheritance ". See the following example.
// Advanced apply demo <br/> function adapplydemo (x) {<br/> return ("this is never-Online, bluedestiny '" + x + "'demo "); <br/>}< br/> function handleadapplydemo (OBJ, fname, before) {<br/> var oldfunc = OBJ [fname]; <br/> OBJ [fname] = function () {<br/> return oldfunc. apply (this, before (arguments); <br/>}; <br/>}< br/> function hellowordfunc (ARGs) {<br/> ARGs [0] = "hello" + ARGs [0]; <br/> return ARGs; <br/>}< br/> function applybefore () {<br/> alert (adapplydemo ("world ")); <br/>}< br/> function applyafter () {<br/> handleadapplydemo (this, "adapplydemo", hellowordfunc ); <br/> alert (adapplydemo ("world"); // Hello world! <Br/>}
1.3.4 apply-based dojo. HitchIf you write obj. onclick = functiona (arguments1, arguments2 ){.....};
In functiona, This is the DOM node that triggers the click event.
Therefore, the following code often appears in our component code: This. connect (OBJ, 'click', dojo. hitch (this, functiona, arguments1, arguments2); in this way, this in functiona is consistent with this in the component code, so that you can access the attributes and methods in the component class.
Let's take a look at the code of dojo. Hitch and we will find the following parts:
Return function () {return scope [Method]. apply (scope, arguments | []) ;}; // function. It can be seen that it uses the apply feature to change the scope.
The parameter table of dojo. Hitch is: the first parameter is the scope, the second parameter is the function object, and the third parameter is the parameter table of the function corresponding to the second parameter.
1.3.5 frontend and backend interaction XMLHttpRequestModern browsers support XMLHttpRequest. XMLHttpRequest calls are asynchronous. That is to say, such calls do not require page Jump. The dojo. xhr class is encapsulated on it. The Web component of dojo accepts JSON (JavaScript Object notion) data. Therefore, you do not need to consider the specific implementation of the background when using the dojo component, as long as the background can provide an asynchronous request mechanism and be able to return JSON. In BME R4, an asynchronous request action mechanism is developed based on structs2 and jsonlib to call these actions. bmer4 defines the following functions:
Ajax. callqueryinterface = function (URL/* asynchronous action name */, indata/* object parameter */) {<br/> var tmpdata = dojo. tojson (indata); // convert the object to a JSON string <br/> var ret; <br/> var MSG; <br/> dojo. xhrpost ({// XMLHttpRequest method encapsulated by dojo <br/> URL: URL, <br/> content: {<br/> "data": tmpdata <br/> }, <br/> Timeout: 1000, <br/> error: function () {// error handling function <br/> ret = "-1 "; <br/> MSG = message. getstring ("p405237800"); <br/>}, <br/> load: Function (response) {// processing the returned results <br/> ret = dojo. fromjson (response); <br/> ......... <Br/> ......... <Br/> return ret; <br/> };
2 component development Introduction 2.1 dojo. DeclareDojo encapsulates a large number of details related to implementation class declarations and inheritance into a method. This method is Dojo. Declare, which includes three parameters.
Dojo. Declare (/* string */classname, // name of the constructor to be created
/* Function | function [] */supercalss, // The Super constructor to be inherited. If it is a constructor array, It is multi-inheritance.
/* Object * // Parameter definition in the object)
2.2 A simple Dojo-based Web component ---- hellow worldDojo. provide ("BMC. widget. helloworld "); <br/> dojo. require ("dijit. layout. contentpane "); <br/> dojo. declare (<br/> "BMC. widget. helloworld ", <br/> dijit. layout. contentpane, <br/>{< br/> postcreate: function () {<br/> This. inherited (arguments); <br/> var html = 'this is a hello word widget! <Br> <input type = button value = "alert"/> '; <br/> var panediv = document. createelement ('div '); <br/> panediv. innerhtml = HTML; <br/> var button = panediv. getelementsbytagname ('input') [0] <br/> dojo. place (panediv, this. containernode, 'first'); <br/> This. dataform = This. containernode. getelementsbytagname ('form') [0]; <br/> dojo. connect (button, 'click', dojo. hitch (this, this. alerthellow); <br/>}, <br/> alerthellow: function () <br/>{< br/> alert ('hello '); <br/>}< br/> });
HTML page
<Div class = 'box' dojotype = "BMC. widget. helloworld"> <br/> </div>
This is used in this example. connect binds a DOM event. First, this method does not destroy the existing event methods. If the button already has a click response function, this operation will set the dojo. hitch (this, this. alerthellow) the action of this function is appended to the end of the original operation. When the object is destroyed (page Jump, refresh), all functions connected will be bound, this prevents ie Memory leakage.
Dojo is also used in this example. hitch. This method can change the function scope. htich points this in the alerthellow function to this button. hitch function, then this function class points to the instance of this component. Through this mechanism, you can completely encapsulate the operations on the Internal interface of the component.
Postcreate is the method of the parent class dijit. layout. contentpane. By executing this. inherited (arguments);, the code of the parent class is executed. Without this call, the method of the parent class will be overwritten.
2.3 helloword upgrade: supports data input formsDojo. provide ("BMC. widget. helloworld "); <br/> dojo. require ("dijit. layout. contentpane "); <br/> dojo. declare (<br/> "BMC. widget. helloworld ", <br/> dijit. layout. contentpane, <br/>{< br/> data: NULL, <br/> postcreate: function () {<br/> This. inherited (arguments ); <br/> var html = '<form> <input name = "A"/> <input name = "B"/> <input type = "button" value = "Test "/> </form> '; <br/> var panediv = document. crea Teelement ('div '); <br/> panediv. innerhtml = HTML; <br/> var button = panediv. getelementsbytagname ('input') [2] <br/> dojo. place (panediv, this. containernode, 'first'); <br/> This. dataform = This. containernode. getelementsbytagname ('form') [0]; <br/> dojo. connect (button, 'click', dojo. hitch (this, this. setdata); <br/>}, </P> <p> setdata: function () <br/>{< br/> If (this. data) <br/> {<br/> VaR _ this = This; <br/> dojo. foreach (this. dataform. Elements, function (item) <br/>{< br/> If (! Item. name) <br/>{< br/> return; <br/>}< br/> item. value = _ this. data [item. name]; <br/>}); <br/>}< br/> });
HTML code
VaR datatest ={}; <br/> datatest. a = 1; <br/> datatest. B = 2; <br/> <Div class = 'box' dojotype = "dijit. layout. helloworld "Data =" datatest "> <br/> </div>
Click Test
In this method, dojo. foreach is used to traverse the form elements. In function (item)
{
}
This is not a component instance, so a Variable _ this is used to store this
2.4 conclusionThrough the above introduction, we can draw the following conclusions:
1) dojo is a pure JavaScript library. You only need to provide corresponding interfaces in the background to output data in JSON format to the foreground;
2) dojo defines a complete function library to avoid browser differences;
3) The component code of the Interface Component Library defined by dojo adopts the object-oriented idea to facilitate inheritance and expansion. As long as the component library is rich;
4) when the requirements for frontend interface interaction are complex, the page components based on dojo will be the first choice, because they can abstract a common area in the interface, encapsulate the Interface Behavior and data of this area, and you can build blocks to develop complex pages.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
