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