原文链接： http://kalllx.iteye.com/blog/787031

?

原作者观点：

想找一份好的jsui 来做软件的外壳，最好是原创的，看了不少jquery代码，发现了不少的jqueryplugins.但是都比较零散，唯独jquery easyui ,比较系统。 功能和元素都比较全，自己想写一套类似的，可惜现在功力还不行。所以先学习easy-ui的源码吧。今天看了里面的第一个类。eayload。当 然看这个源码之前，最好将jquery源码先读一遍。因为easyui是基于jquery写的。如果想对jquery 深入了解，最好下一番功夫在ec-262-3上，详读后会对scope ,excute-context ,this等有更深入了解。 easyloader.js可以说是easyui的最基础的一个类，它负责加载js,css,以及locale文件，里面的结构比较简单。

?

本人实践后观点：这不过是一个锦上添花的功能，放弃

1. 放弃使用easyloader.js的功能。 其作用不过是根据页面上使用了哪些easyUi组件，动态装载相应的js，和css。其中js组件之间，有定义一个依赖关系。

比如，treegrid依赖于datagrid；如果页面上用到了treegrid，easyloader会将plugins下的jquery.treegrid.js和jquery.datagrid.js一起加载到页面中：

treegrid: {
??? ??? ??? js: "jquery.treegrid.js",
??? ??? ??? css: "tree.css",
??? ??? ??? dependencies: ["datagrid"]
??? ??? },

2. 其原理可能是 ： 拦截在页面中的easyUi特有的class； 比如class="easyui-dialog"；easyloader.js可以判定它用了dialog组件。【没时间研究……有兴趣的同学告知一下】

3. 放弃原因： 意义不大，节省不了多少流量，本来easyUi的js就不大，压缩以后就更小了。相反，我在使用easyloader过程中，倒是会出现脚本错误（可能在form上面忘了加class，后面又用了其clear方法），可能是本人写法不对，但是不想浪费时间。

4. 最终引入文件截图:

?

--------------------------以下为转载内容 ------------------------------------------

/**
?* easyloader - jQuery EasyUI
?*
?* Licensed under the GPL:
?*?? http://www.gnu.org/licenses/gpl.txt
?*
?* Copyright 2010 stworthy [ stworthy@gmail.com ]
?*
?*/
(function(){
??? //将所有的插件，和插件资源和依赖文件放进modules对象中。
??? var modules = {
??? ???
??? ??? draggable:{
??? ??? ??? js:'jquery.draggable.js'
??? ??? },
??? ??? droppable:{
??? ??? ??? js:'jquery.droppable.js'
??? ??? },
??? ??? resizable:{
??? ??? ??? js:'jquery.resizable.js'
??? ??? },
??? ??? linkbutton:{
??? ??? ??? js:'jquery.linkbutton.js',
??? ??? ??? css:'linkbutton.css'
??? ??? },
??? ??? pagination:{
??? ??? ??? js:'jquery.pagination.js',
??? ??? ??? css:'pagination.css',
??? ??? ??? dependencies:['linkbutton']
??? ??? },
??? ??? datagrid:{
??? ??? ??? js:'jquery.datagrid.js',
??? ??? ??? css:'datagrid.css',
??? ??? ??? dependencies:['panel','resizable','linkbutton','pagination']
??? ??? },
??? ??? treegrid:{
??? ??? ??? js:'jquery.treegrid.js',
??? ??? ??? css:'tree.css',
??? ??? ??? dependencies:['datagrid']
??? ??? },
??? ??? panel: {
??? ??? ??? js:'jquery.panel.js',
??? ??? ??? css:'panel.css'
??? ??? },
??? ??? window:{
??? ??? ??? js:'jquery.window.js',
??? ??? ??? css:'window.css',
??? ??? ??? dependencies:['resizable','draggable','panel']
??? ??? },
??? ??? dialog:{
??? ??? ??? js:'jquery.dialog.js',
??? ??? ??? css:'dialog.css',
??? ??? ??? dependencies:['linkbutton','window']
??? ??? },
??? ??? messager:{
??? ??? ??? js:'jquery.messager.js',
??? ??? ??? css:'messager.css',
??? ??? ??? dependencies:['linkbutton','window']
??? ??? },
??? ??? layout:{
??? ??? ??? js:'jquery.layout.js',
??? ??? ??? css:'layout.css',
??? ??? ??? dependencies:['resizable','panel']
??? ??? },
??? ??? form:{
??? ??? ??? js:'jquery.form.js'
??? ??? },
??? ??? menu:{
??? ??? ??? js:'jquery.menu.js',
??? ??? ??? css:'menu.css'
??? ??? },
??? ??? tabs:{
??? ??? ??? js:'jquery.tabs.js',
??? ??? ??? css:'tabs.css',
??? ??? ??? dependencies:['panel','linkbutton']
??? ??? },
??? ??? splitbutton:{
??? ??? ??? js:'jquery.splitbutton.js',
??? ??? ??? css:'splitbutton.css',
??? ??? ??? dependencies:['linkbutton','menu']
??? ??? },
??? ??? menubutton:{
??? ??? ??? js:'jquery.menubutton.js',
??? ??? ??? css:'menubutton.css',
??? ??? ??? dependenci