开始学习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"