EasyUI基础入门之Easyloader(载入器)
在了解完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
});
EasyUI基础入门之Easyloader(载入器)的更多相关文章
- EasyUI基础入门之Parser(解析器)
前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...
- EasyUI基础入门之Resiable(可缩放)
easyui的base插件学习已经进行到Resizable(可缩放)了.照旧看看easyui官网的API. Resiable 正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展 ...
- easyUI基础入门
头部需要引人文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <ti ...
- EasyUI基础入门之Droppable(可投掷)
怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的.只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为 ...
- EasyUI基础入门之Pagination(分页)
前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
- (一)jQuery EasyUI 的EasyLoader载入原理
1.第一次看了官网的demo.引用的是EasyLoader.js文件,而不是引用jquery.easyui.min.js文件,我就有疑问了,百度一下. jQuery EasyUI是一款基于JQuery ...
- ECMAScript 6.0基础入门教程
ECMAScript 6.0基础入门教程 转:https://blog.csdn.net/hexinyu_1022/article/details/80778727 https://blog.csdn ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 从零3D基础入门XNA 4.0(2)——模型和BasicEffect
[题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...
随机推荐
- Java [leetcode 27]Remove Element
题目描述: Given an array and a value, remove all instances of that value in place and return the new len ...
- CF GYM 100703M It's complicate
题意:龙要做茶,需要n种原料,给出他有的原料个数,和每份茶需要的原料个数,和每种原料的价格,要求做整数份茶,把他之前有的原料用完最少要花多少钱. 解法:水题. 代码: #include<stdi ...
- (转载)linux环境变量
转自:http://www.cnblogs.com/growup/archive/2011/07/02/2096142.html Linux 的变量可分为两类:环境变量和本地变量 环境变量,或者称为全 ...
- UPC OJ 一道水题 STL
Problem C: 字符串游戏 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 10 Solved: 3 [Submit][Status][Web ...
- MVC 实现计算页面执行时间
使用 ActionFilterAttribute 来实现: public class PerformanceActionAttribute:ActionFilterAttribute { public ...
- LeetCode题解——ZigZag Conversion
题目: 把一个字符串按照Z型排列后打印出来,例如 "PAYPALISHIRING" 重新排列后为3行,即 P A H N A P L S I I G Y I R 那么输出为&quo ...
- win10+vs2013+Qt5.4 安装方法
环境:win10 cn_visual_studio_ultimate_2013_x86_dvd_3009109 qt-opensource-windows-x86-msvc2013_64_opengl ...
- [转载]maven基础入门
用 Maven 做项目构建 本文转载自:https://www.ibm.com/developerworks/cn/java/j-lo-maven/ 本文将介绍基于 Apache Maven 3 的项 ...
- 【Java基础】Java网络编程基础知识
什么是网络编程 网络编程是通过使用套接字来达到进程间通信目的,那什么是套接字呢?其实套接字是支持TCP/IP的网络通信的基本操作单元,可以看做是不同主机之间的进程进行双向通信的端点,简单的说就是通信的 ...
- HDU-4611 Balls Rearrangement 循环节,模拟
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4611 先求出循环节,然后比较A和B的大小模拟过去... //STATUS:C++_AC_15MS_43 ...