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. This reflects the rational performance of easyui as a lightweight framework (capable of dynamically loading required components ), easyloader is rarely used in general (it will 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. At this time, JS and CSS files of the component can be loaded as needed.
• You need to use a certain component, but you do not know whether the component depends on other components (simple JS references cannot be achieved). You can use easyloader to manually load dependent components.
• You need to combine jquery basic library with self-implemented js to achieve better performance.

Easyloader Loader

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	Define modules in advance	None
Locales	Object	Language Environment defined in advance (supported internationally)	None
Base	String	The basic folder of easyui, which must end with "/". The current folder is set "./"	Set Based on easyloader. j location
Theme	String	Topic name. The theme folder contains multiple themes that you can choose from. You can also expand the theme folder 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, for example:

Method Name	Number of shards	Descriptive information
Onprogress	Name	A module is loaded successfully.
Onload	Name	The module and its dependent modules are loaded successfully.

Method

The loader only has one method: load, the number of partitions is module, callback (callback function), load a specific module, when the callback function is successfully loaded, a single module name, array of storage module names, CSS style files, and JS script files can be created based on the number of modules that are effective.

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, including 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.

A module is defined above. Next, let's talk about how to add it? We define our own modules and load them through easyloader.

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

After reading the code (Compressed), we can easily 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 Performance of easyui (not recommended in General cases ).

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

Step 2: based on the original easyui module, expand it and add? Module.

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

The above code is added based on the original easyloader. modules? And defines the JS and CSS modules. So we can add? Is the first custom module added? Finished. The method used is the same as that used by easyloader to load other modules.

TIPS: the custom JS and CSS files must be absolute paths.

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