Easyloader for getting started with EasyUI)

After learning about the parser of easyui, the next step is to learn about easyloader.

What is EasyLoader?

Just like its name, easyloader is used to dynamically load js files required by components, which reflects the rational performance of EasyUI as a lightweight framework (which can dynamically load required components ), however, easyloader is rarely used (which may make it difficult for users ). So what are the scenarios for EasyLoader?

EasyLoader application scenarios

• For performance considerations, instead of loading core js and css files of easyui at one time, the basic document structure is displayed first.
• The project simply uses several components of easyui, And the js and css files of the component can be loaded as needed.
• You need to use a component, but you do not know whether the component depends on other components (simple js references cannot be achieved). You can use easyloader to automatically load dependent components.
• You need to combine JQuery basic library with self-implemented js to achieve better performance.

EasyLoader

I briefly understood what easyloader is and its general application scenarios. Next I will look at easyloader's attributes, events, and methods.

Properties

Easyloader has seven attributes, as shown in the following table:

Attribute name	Value Type	Description	Default Value
Modules	Object	Pre-defined Module	None
Locales	Object	Predefined language environment (International Support)	None
Base	String	The basic directory of easyui must end with "/". The current directory is set "./"	Set according to easyloader. j location
Theme	String	Topic name. The theme directory contains multiple optional topics, which can be expanded by yourself.	Default
Css	Boolean	Define whether to load the css style file when loading the module	True
Locale	String	Language Environment name	Null
Timeout	Number	Timeout time, in milliseconds	2000

Event

The loader contains two events:

Method Name	Parameters	Description
OnProgress	Name	A module is loaded successfully.
OnLoad	Name	The module and its dependent modules are loaded successfully.

Method

The loader has only one method: load. Its parameters are module, callback (callback function), and specific modules are loaded, when the callback function is successfully loaded, an array of a single module name, storage module name, css style file, and js script file can be called.

EasyLoader

Next we will focus on how easyloader is used. Through the modules in the above attribute table, it is not hard to guess that this attribute is used by the easyui definition module. Modules is essentially a json object. The format is as follows:

modules = {      draggable:{         js : "jquery.draggable.js",         css : "pagination.css",         dependencies : ["linkbutton"]       }    };

The key value is the defined Module name, and the value is a json object, which contains three attributes: js, css, and dependencies. Js is the js name to be imported to the module. css is the style of the module. dependencies defines the dependency module of the module.

We have defined a module above. Next we will talk about how to add a custom module and load it through easyloader.

Step 1: Open the easyloader. js file first, for example:

After reading the code (Compressed), we can simply see which modules are loaded when easyui is loaded. "_ 1" is a defined module of easyui. and dependencies between modules. In this way, we can selectively load the required modules by modifying the easyloader. js code to improve the easyui performance (not recommended in general ).

So how can we define our own modules in a simple way? We need to modify easyload. js. We will replace all the _ 1 variables in easyloader. js code with easyloader. modules, but do not modify the reference of the last "modules: _ 1.

Step 2: based on the original easyui module, we can expand it and add our own modules.

easyloader.modules = $.extend({},{"test":{js:'test.js'css:'test.css'}},easyloader.modules);

The above Code adds a test module based on the original easyloader. modules and defines js and css of the module. In this way, the first custom module is added. The method used is the same as that used by easyloader to load other modules.

Tips: The js and css files we define must be absolute paths.

easyloader.load('mymodule', function(){       //do something});