这写都还是很容易明白的,我也就不多说什么了。那么GodSon就告诉大家一些他起他的用处吧。
easyloader呢,其实还是一个js和css异步加载和按模块加载的实现。那么我们怎么用他来实现我们自己js和css的异步加载呢?我想这个才是大家最关心的东西吧。
看到属性中modules属性了吧。这个属性就是easyui定义模块用的。modules是一个json格式对象。这个对象的完全定义形式是
modules = {draggable:{js : "jquery.draggable.js",css : "pagination.css",dependencies : ["linkbutton"]}};
键值是定义的模块名称 ,值又是一个json对象,包含三个属性js,css,dependencies。js就是这个模块需要导入的js名称,css是模块依赖的样式,dependencies就是这个模块依赖的其他模块。
下面就开始说明怎么添加我们自己的模块,并且用他来加载。
首先要小小改造一下easyload这个js,他的第二行定义了一个var _1 = {},这个就是他自己本身已经定义的modules。我们要改造就的就是下面代码中应用到这个_1变量的地方。把用到这个_1变量的地方换成EasyLoader.modules,记住最后一个“modules:_1”的引用不要修改。这样第一步就完成了。
第二步,你的自己宽展这个modules加人你自己的模块。
modules 内容如下:
1 | easyloader.modules = $.extend({},{ |
2 | "mymodule" :{ |
4 | },easyloader.modules); |
看上面的那段js,这段js的意思就是在原有easyloader.modules的基础上在增加一个mymodule的模块,并且定义了模块的js和css
这样我增加的第一个自定义模块就添加完成了。那么使用的方式也和easyload加载其他模块一样。这里需要注意的是我们自己定义的js和css
必须是要绝对路径的。
1 | easyloader.load( 'mymodule' , function (){ |
2 | //do something |
3 | }); |
是不是很简单呢。如果你有更多模块的话
01 | easyloader.modules = $.extand({},{ |
02 | "mymodule" :{ |
03 | js: 'http://easyui.btboys.com/mymodule.js' , |
04 | css: 'http://easyui.btboys.com/mymodule.css' }, |
05 | "mymodule2" :{ |
07 | "mymodule3" :{ |
09 | ....... |
10 | },easyloader.modules); |
源自:http://easyui.btboys.com/post-52.html