easyloader分析与使用.pdfVIP

easyloader 分析与使用 使用脚本库总要加载一大堆的样式表和脚本文件，在 easyui 中，除了可以使用通常的方式加载之外，还提供了使用 easyloader 加载的方式。这个组件主要是为了按需加载组件而诞生。什么情况下使用它呢？ 1. 你觉得一次性导入 easyui 的核心 min js 和 css 太大 2. 你只用到 easyui 的其中几个组件 3. 你想使用其中的一个组件，但是你又不知道这个组件依赖了那些组件。 如果你有以上三中情况，那么推荐你使用 easyLoader。它可以帮你解决这些问题。 easyloader 用来帮助我们自动加载所需的脚本文件和样式文件，这样，我们只需要在页面中引用 jquery 脚本 和 easyloader 脚本，easyloader 就可以帮助我们分析模块的依赖关系，先加载依赖项。模块加载好了会调用 parse 模块来解 析页面。把 class 是 easyui 开头的标签都转化成 easyui 的控件。 下面我们，以使用 messager 和 dialog 模块为例，使用 easyloader 加载所需的模块。 我们的页面可以简单的仅仅写入下面的内容。注意，并不需要通常的样式表和一大堆的脚本引用。 1 %@ page language=java pageEncoding=UTF-8% 2 !DOCTYPE HTML 3 html 4 head 5 title EasyUI 入门——EasyUI 的 easyloader 的使用/title 6 !-- 引入JQuery -- 7 script type=text/javascript src=${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.min.js/script 8 !-- 引入easyloader.js -- 9 script type=text/javascript src=${pageContext.request.contextPath}/jquery-easyui-1.4.1/easyloader.js/script 10 11 script type =text/javascript 12 $(function(){ 13 //使用 easyloader 加载 dialog 模块使用到的相关js 和 css 样式 14 easyloader.load(dialog,function(){ 15 /*使用 JavaScript 动态创建 EasyUI 的 Dialog 的步骤： 16 1、定义一个 div ，并给div 指定一个 id 17 2、使用Jquery 选择器选中该 div ，然后调用dialog()方法就可以创建 EasyUI 的 Dialog 18 */ 19 //使用自定义参数创建 EasyUI 的 Dialog 20 $(#dd2).dialog({ 21 title: 使用 JavaScript 创建的 Dialog, 1 / 3 22 width: 400, 23 height: 200, 24 closed: false, 25 cache: false, 26 modal: true 27 }); 28 }); 29 30 easyloader.locale = zh_CN; 31 //easyloader.load 还