EasyUI基础入门之Easyloader(载入器)

2023-02-22 14:45:26

在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了。

什么是EasyLoader

正如其名字一样easyloader的作用是为了动态的载入组件所需的js文件,这体现了EasyUI作为轻量级框架对性能的合理掌握（能够动态的载入所需组件）,只是一般而言非常少使用到easyloader(会给使用者带来一定的难度)。那么使用EasyLoader的场景有哪些呢？

EasyLoader使用场景

出于性能的考虑,不一次性的载入easyui核心js、css文件,而是先展示基础文档结构。
项目仅仅是简单的用到easyui的几个组件,此时能够按需载入该组件的js和css文件。
你须要使用某个组件,可是不知道该组件是否依赖于其它组件(简单的js引用无法达到),使用easyloader能够自己主动载入依赖组件。
你须要把JQuery基础库和自己实现的js结合起来，以达到更好的展示性能。

EasyLoader载入器

简单的了解了什么是easyloader以及其大概的使用场景,接下来看看easyloader的属性、事件和方法。

properties

easyloader有7个属性，详细例如以下表格：

属性名	值类型	描写叙述	默认值
modules	object	提前定义模块	无
locales	object	提前定义的语言环境(国际化支持)	无
base	string	easyui的基础文件夹,必须以"/"结束,当前文件夹但是设置为"./"	依据easyloader.j位置设置
theme	string	主题名称，theme文件夹下有多个可供选择的主题，也可自己扩展	default
css	boolean	定义载入模块的时候是否载入css样式文件	true
locale	string	语言环境名称	null
timeout	number	超时时间,单位毫秒	2000

Event

载入器包括两个事件,详细例如以下:

方法名	參数	描写叙述信息
onProgress	name	一个模块载入成功
onLoad	name	模块和依赖他的模块载入成功

Method

加载器仅仅有一个方法:load,其參数为module,callback(回调函数)，加载特定的模块，当加载的成功的时候调用该回调函数有效的模块參数能够使一个单一的模块名称、存储模块名称的数组、css样式文件、js脚本文件。

EasyLoader使用

接下来我们着眼于easyloader怎样使用，通过上面属性表中的modules，不难猜到这个属性就是easyui定义模块用的。modules本质上来说是一个json格式对象。其形式例如以下:

modules = {

      draggable:{

         js : "jquery.draggable.js",

         css : "pagination.css",

         dependencies : ["linkbutton"]

       }

    };

key值即是定义的模块名称,值又是一个json对象,包括三个属性js、css、dependencies。js就是模块须要导入的js名称,css是该模块的样式,dependencies定义该模块的依赖模块。

上面定义了一个模块,接下来谈谈该怎样加入�我们自己定义的模块,而且通过easyloader进行载入。

第一步:我们先要打开easyloader.js文件，详细例如以下图:

阅读代码(压缩过)我们能够简单的看出来easyui载入的时候究竟载入了哪些模块,“_1”是easyui已经定义好的模块.以及各个模块之间的依赖关系。这样,我们通过改动easyloader.js的代码就能够有选择性的载入所需的模块,提高easyui的性能(普通情况下不建议)。

那么我们怎样简单的定义下自己的模块呢? 我们须要改造一下easyload.js，我们将easyloader.js代码中的全部_1变量替换为easyloader.modules，只是最后一个"modules:_1"的引用不要改动。

第二步,在easyui原有的模块基础上,我们扩展它,添�自己的模块。

easyloader.modules = $.extend({},{

	"test":{

		js:'test.js'		css:'test.css'	}

},easyloader.modules);

上面的代码在原有easyloader.modules的基础上在添加�了一个test模块而且定义了模块的js和css。这样我们添加�的第一个自己定义模块就加入�完毕了。使用的方式和easyloader载入其它模块一样。

Tips:我们自定义的js和css文件必须是绝对路径。

easyloader.load('mymodule', function(){

 //do something

});

码农公寓