开始学习requirejs+easyui的使用.

目录结构:

|-project

　　|-easyui01

　　　　|-js

　　　　　　|-main.js

　　　　|-index.html

　　|-libs

libs目录下放入的是easyui和require.js . jquery包含在easyui中.

自己写的代码就index.html和main.js 如下:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>easyui+requirejs+demo[1]</title>
    <link rel="stylesheet" href="../libs/easyui/themes/default/easyui.css">
    <link rel="stylesheet" href="../libs/easyui/themes/icon.css">
</head>
<body>
    <p>(1)shim: shim参数解决了使用非AMD方式定义的模块（如jQuery插件）及其载入顺序.</p>
    <p>(2)easyui的easyui-lang-zh_CN.js也是依赖jquery的.</p>
    <p>
        (3)easyui是jquey的插件,使用'$'就可以访问到easyui,但是编码时仍然需要引入.例如:
        require(['jquery','zhCN','easyui'], function($,zhCN,easyui){});
    </p>
    <p>
        (4)easyui必需的css文件要自行导入在html页面中.
        如: link rel="stylesheet" href="../libs/easyui/themes/default/easyui.css"
    </p>
    <script src="../libs/require.js" data-main="js/main"></script>
</body>
</html>

main.js

require.config({
    //baseUrl: 'js',
    shim: {
        //easyui-lang-zh_CN.js也依赖jquery
        'zhCN': ['jquery'],
        'easyui': ['jquery']
    },
    paths: {
        //引入的js文件不需要带入后缀'.js'
        jquery: '../../libs/easyui/jquery.min',
        easyui: '../../libs/easyui/jquery.easyui.min',
        zhCN: '../../libs/easyui/locale/easyui-lang-zh_CN'
    }
});
//require(['easyui']);
require(['jquery','zhCN','easyui'], function($,zhCN,easyui){
    console.log($().jquery);
    //
    $.messager.alert('提示','hello,world!');
});

总结:

(1)shim: shim参数解决了使用非AMD方式定义的模块（如jQuery插件）及其载入顺序.

(2)easyui的easyui-lang-zh_CN.js也是依赖jquery的.

(3)easyui是jquey的插件,使用'$'就可以访问到easyui,但是编码时仍然需要引入.例如: require(['jquery','zhCN','easyui'], function($,zhCN,easyui){});

(4)easyui必需的css文件要自行导入在html页面中. 如: link rel="stylesheet" href="../libs/easyui/themes/default/easyui.css"

开始学习requirejs+easyui的使用.

相关推荐