開始學習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"