zoukankan      html  css  js  c++  java
  • 学习 easyui 之一:easyloader 分析与使用

    学习 easyui 之一:easyloader 分析与使用

    使用脚本库总要加载一大堆的样式表和脚本文件,在 easyui 中,除了可以使用通常的方式加载之外,还提供了使用 easyloader 加载的方式。

    这个组件主要是为了按需加载组件而诞生。什么情况下使用它呢?
    1. 你觉得一次性导入 easyui 的核心 min js 和 css 太大
    2. 你只用到 easyui 的其中几个组件
    3. 你想使用其中的一个组件,但是你又不知道这个组件依赖了那些组件。
    如果你有以上三中情况,那么推荐你使用easyLoader。它可以帮你解决这些问题。

    easyloader 用来帮助我们自动加载所需的脚本文件和样式文件,这样,我们只需要在页面中引用 jquery 脚本 和 easyloader 脚本,easyloader 就可以帮助我们分析模块的依赖关系,先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成easyui的控件。

    下面我们,以使用 messager 模块为例,使用 easyloader 加载所需的模块。

    我们的页面可以简单的仅仅写入下面的内容。注意,并不需要通常的样式表和一大堆的脚本引用。

    复制代码
    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    
        <a id="btnAlert" class="easyui-linkbutton">弹出提示框</a>
    
        <script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="scripts/easyloader.js" type="text/javascript"></script>
    
        <script type="text/javascript">
            $(function () {
    
                // easyloader 提供了一个函数 load, 使用下面的方法加载模块
                easyloader.load("messager",
                   function () {
                       alert("加载成功!");
                   });
    
                $("#btnAlert").click(function () {
                    $.messager.alert('Warning', 'The warning message');
                });
            });
        </script>
    </body>
    </html>
    复制代码

    注意看!只有 jquery 的脚本和 easyloader 的脚本,完全没有一大堆的样式和其他脚本文件。

    load 用来使用代码来说明需要加载的模块,这是在 easyloader 中定义的一个函数,函数的第一个参数为准备加载的模块名称,第二个参数为加载成功之后的回调函数。这里用来提示已经加载成功。

    easyloader.load 还有一个别名 using 定义在 window 对象上,如下所示:

    window.using = easyloader.load; 

    所以,加载的代码也可以这样写。

    using("messager", function () {
        alert("加载成功!");
    });

    加载成功之后,我们就可以在代码中使用已经加载的模块了。

    页面中还使用 class 说明了一个按钮,这里使用了 class="easyui-linkbutton",easyloader 还可以帮助我们解析元素中的特殊类名,直接就在页面中使用过的模块。

    easyloader 会在它所在文件夹中,寻找 plugins 子文件夹中的脚本,和 themes 文件夹中的样式表。所以需要保证文件保存在正确的位置。

    不过,easyloader 还提供了一个 base 属性,用来指定寻找插件和脚本的起点。

    // jquery-easyui的根目录,在加载easyloader时,会自动根据你放置的位置而改变  
    base:'.', 

    除了 base , 还有几个重要的属性

    base:'.',//该属性是为了加载js,记录文件夹路径的  
    theme:'default', //默认主题  
    css:true,    
    locale:null, 

    比如,希望使用中文语言包,则可以如下使用。你会看到提示框的按钮中的文字已经从 Ok 转换为了 "确定"。

    easyloader.locale = "zh_CN";
    using("messager", function () {
        alert("加载成功!");
    });

     相关阅读:

    kalllx 的 easyloader.js源码阅读

     资源下载:

    点击下载示例文件

     
    分类: javascript
  • 相关阅读:
    JS-BOM操作-Location、history、常用弹窗、屏幕属性
    JS的基础DOM操作-选取父子级元素、动态生成元素、修改元素、Classlist
    setup
    循环请求接口,统一处理
    多个url文件下载
    扁平数据结构转Tree
    es6 解构赋值
    watch与computed与props
    v-model与.sync组件通信
    v-on="$listeners"和v-bind="$attrs"
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3037202.html
Copyright © 2011-2022 走看看