Easyui Study Summary (ii)--easyloader analysis and use

The script library is used to load a whole bunch of stylesheets and script files, and in Easyui, in addition to being loaded in the usual way, provides a way to load using Easyloader. This component was created primarily to load components on demand. Under what circumstances should it be used?

1. You think one-time import Easyui core min js and css too big
2. You only use a few of the components of Easyui.
3. You want to use one of these components, but you don't know that the component is dependent on those components.

If you have the above three cases, then you are recommended to use Easyloader. It can help you solve these problems.

Easyloader is used to help us automatically load the required script files and style files, so that we only need to reference the jquery script and the Easyloader script in the page, and Easyloader can help us analyze the dependencies of the modules and load the dependencies first. The module loads well and invokes the parse module to parse the page. The tags that start with class Easyui are converted into Easyui controls.

Below we use Easyloader to load the required modules using the Messager and dialog modules as an example.

Our page can simply be written to the following content. Note that the usual style sheets and a whole bunch of script references are not required.

<%@ page language= "java" pageencoding= "UTF-8"%><! DOCTYPE html>$ (function () {//use Easyloader to load the relevant JS and CSS styles used by the dialog moduleEasyloader.load (' dialog ', function () {/*To dynamically create Easyui dialog with javascript: 1, define a DIV, assign an ID of 2 to the Div, select the div with the jquery selector, and then call dialog () method to create a Easyui dialog*/                //to create a Easyui dialog using a custom parameter$ (' #dd2 '). Dialog ({title:' Dialog created with JavaScript ', Width:400, Height:200, closed:false, Cache:false, modal:true                });                    }); Easyloader.locale= "ZH_CN"; //Easyloader.load also has an alias using defined on the Window object//use Easyloader to load the relevant JS and CSS styles used by the Messager moduleusing ("Messager", function () {alert ("Loaded successfully!" "); $("#btnAlert"). Click (function () {$.messager.alert (' Warning ', ' The Warning message ');        });      });  }); </script> To Create a Easyui dialog by using pure HTML:1, define a div2. Set div's class style property to Easyui-dialog, so you can turn the normal div into a easyui dialog.--%> <divclass= "Easyui-dialog" id= "dd1" title= "Easyui Dialog" style= "width:500px;height:300px;" >Hello World! </div> <div id= "DD2" >dialog content</div> <a id= "Btnalert"class= "Easyui-linkbutton" > Popup box </a> </body>
Watch it! Only jquery scripts and Easyloader scripts do not have a whole bunch of styles and other script files.
The page works as follows:
　　
Load is used to describe the module that needs to be loaded, which is a function defined in Easyloader, the first parameter of the function is the name of the module to be loaded, and the second parameter is the callback function after the load succeeds. This is used to prompt for a successful load.
Load-loaded modules have two formats, either a single module represented by a string, or an array of strings, loaded with multiple modules at the same time.
// There are two types of name, one string and one string array, so that you can load more than one plugin at a time, all  by calling the Add method. if (typeof name = = ' String ')    {else  {    for (var i = 0; i < name.length; I++
   
     >) {        Add (Name[i]);}    }
   
Easyloader.load also has an alias using defined on the Window object, as follows:
Therefore, the loaded code can also be written in this way.
using ("Messager", function () {     alert ("Load succeeded!") "); });
　　
Once the load is successful, we can use the loaded modules in the code.
The page also uses class to illustrate a button, where class= "Easyui-linkbutton" is used, and Easyloader can also help us parse the special class name in the element and use the module directly on the page.
Easyloader will find the script in the Plugins subfolder, and the style sheet in the Themes folder in the folder where it is located. So you need to keep the files in the right place. However, Easyloader also provides a base property that specifies the starting point for finding plugins and scripts.
Jquery-easyui root directory, when loading Easyloader, will automatically change depending on where you place it   
In addition to base, there are several important properties
Base: '. ',// This property is to load JS,  record folder path / / default theme   CSS:true,     Locale:null
For example, if you want to use a Chinese language pack, you can use the following. You will see that the text in the button of the Cue box has been converted from OK to "OK".
Easyloader.locale = "ZH_CN"; using ("messager", function () {     alert ("load succeeded!") "); });
The above is about Easyloader analysis and use.
Easyui Study Summary (ii)--easyloader analysis and use