Learn how to analyze and use easyloader

A script library always loads a large number of style sheets and script files. In easyui, in addition to loading in the usual way, easyloader is also provided.

This component was born to load components as needed. Under what circumstances should I use it?

1. You think the core min JS and CSS for one-time import of easyui are too large
2. You only use several components of easyui.
3. You want to use one of the components, but you do not know that the component depends on those components.

If you have the above three cases, we recommend that you use easyloader. It can help you solve these problems.

Easyloader is used to automatically load the required script files and style files. In this way, we only need to reference the jquery script and easyloader script on the page, so that easyloader can help us analyze the dependencies between modules, load the dependency first. After the module is loaded, the parse module is called to parse the page. Convert all the labels starting with easyui into easyui controls.

Next, we will use the Messager module as an example to load the required modules using easyloader.

Our page can simply write the following content. Note that you do not need to reference a regular style sheet or a large number of scripts.

 <!  Doctype html  >  <  Html  Lang = "En"  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head  >      <  Meta  Charset  = "UTF-8"   />      <  Title  > </  Title  > </  Head  >  <  Body  >      <  A  ID  = "Btnalert"  Class  = "Easyui-linkbutton"  > Pop-up prompt box </  A  >      < Script  SRC  = "Scripts/jquery-1.8.0.min.js"  Type  = "Text/JavaScript"  > </  Script  >      <  Script  SRC  = "Scripts/easyloader. js"  Type  = "Text/JavaScript"  > </  Script >      <  Script  Type  = "Text/JavaScript"  >  Easyloader. locale  =   "  Zh_cn  "  ; Using (  " Messager  "  ,  Function  () {Alert (  "  Loaded successfully!  "  ); $ (  "  # Btnalert "  ). Click (  Function  () {$. Messager. Alert (  '  Warning  '  ,  '  The warning message  ' );});});  </  Script  >  </  Body  >  </  Html  > 

 

Watch it! There are only jquery scripts and easyloader scripts, and there is no pile of styles or other script files at all.

LoadCodeThe module to be loaded. This 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 loading is successful. It is used to prompt that the load is successful.

The load module can be a single module represented by a string, an array of strings, and multiple modules are loaded at the same time.

//There are two types of name: string and string array. In this way, multiple plugins can be loaded at a time, and the add method is called.If(TypeofName = 'string') {Add (name );}Else{For(VaRI = 0; I <name. length; I ++) {Add (name [I]) ;}}
 

Easyloader. Load also has an alias using defined on the window object, as shown below:

 
Window. Using = easyloader. load;
 

Therefore, the loaded code can also be written in this way.

 
Using ("Messager", function () {alert ("loaded successfully! ");});
 

After loading, we can use the loaded modules in the code.

The page also uses class to describe a button.Class= "Easyui-linkbutton"Easyloader can also help us parse the special class names in the element and directly use the modules on the page.

Easyloader searches for scripts in the Plugins sub-folder and style sheets in the themes folder in the folder where it is located. Therefore, ensure that the file is saved in the correct location.

However, easyloader also provides a base attribute to specify the starting point for finding plug-ins and scripts.

 
// The root directory of jquery-easyui. When easyloader is loaded, the base: '.' is automatically changed based on your location :'.',
 

In addition to base, there are several important attributes

 
Base :'.',//This property is used to load JS and record the folder pathTheme: 'default ',//Default topicCSS:True, Locale:Null,
 

For example, if you want to use a Chinese Language Pack, you can use it as follows. You will see that the text in the button in the prompt box has been converted from OK to "OK ".

Easyloader. locale = "zh_cn"; Using ("Messager ",Function() {Alert ("Loaded successfully! ");});
 

 

Related reading:

Read the easyloader. js source code of kalllx.

Download resources:

Click to download the sample file