开始学习requirejs+easyui的使用.

目录结构:

|-project

　　|-easyui01

　　　　|-js

　　　　　　|-main.js

　　　　|-index.html

　　|-libs

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

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

index.html

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

main.js

  1. require.config({
  2.     //baseUrl: 'js',
  3.     shim: {
  4.         //easyui-lang-zh_CN.js也依赖jquery
  5.         'zhCN': ['jquery'],
  6.         'easyui': ['jquery']
  7.     },
  8.     paths: {
  9.         //引入的js文件不需要带入后缀'.js'
  10.         jquery: '../../libs/easyui/jquery.min',
  11.         easyui: '../../libs/easyui/jquery.easyui.min',
  12.         zhCN: '../../libs/easyui/locale/easyui-lang-zh_CN'
  13.     }
  14. });
  15. //require(['easyui']);
  16. require(['jquery','zhCN','easyui'], function($,zhCN,easyui){
  17.     console.log($().jquery);
  18.     //
  19.     $.messager.alert('提示','hello,world!');
  20. });

总结:

(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的使用.的更多相关文章

  1. EasyUI学习(一)——EasyUI入门

    EasyUI学习总结(一)——EasyUI入门 一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:j ...

  2. 作为新手在学习SSM+Easyui过程中遇到一系列问题

    对于初学SSM来说,如果不熟悉SSM中SpringMVC对数据处理,会造成很大的困扰, SSM中对前台页面放在WEB-INF下,对于读取外部信息,例如导入easyui的js文件.以及不能直接进行跳转. ...

  3. 【requireJS源码学习03】细究requireJS的加载流程

    前言 这个星期折腾了一周,中间没有什么时间学习,周末又干了些其它事情,这个时候正好有时间,我们一起来继续学习requireJS吧 还是那句话,小钗觉得requireJS本身还是有点难度的,估计完全吸收 ...

  4. jQuery EasyUI学习资源汇总

    jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...

  5. easyUI 学习

    )省份-城市-区域三级联动[struts2 + ajax +非数据库版] (1)省份-城市-区域,基于jQuery的AJAX三级联动,用Struts2整合AJAX[非数据库版] $.ajax( { t ...

  6. 浅谈requireJS

    项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下.通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requi ...

  7. 第 1 章 jQuery EasyUI 入门

    学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下 ...

  8. RequireJS入门之一——实现第一个例子

    为什么学习RequireJS? 像我这种菜鸟,会提到海量文章里提到的AMD.JS模块化编程.异步... ... 等等 RequireJS是一个Javascript 文件和模块框架,它可以帮我们去管理j ...

  9. 使用 RequireJS 优化 Web 应用前端

    基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery.Dojo.MooTools.EmbedJ ...

随机推荐

  1. 人工神经网络(Artificial Neural Networks)

    人工神经网络的产生一定程度上受生物学的启发,因为生物的学习系统是由相互连接的神经元相互连接的神经元组成的复杂网络.而人工神经网络跟这个差不多,它是一系列简单的单元相互密集连接而成的.其中每个单元有一定 ...

  2. PAT 1026

    1026. Table Tennis (30) 时间限制 400 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A table ...

  3. poj1149--PIGS（最大流）

    题意: 有m个猪圈 每个猪圈有不同数量的猪 [0, 1000]有n个顾客 每个顾客需要Bi头猪 有Ai个钥匙 能打开Ai个不同的猪圈顾客按顺序来买猪 只能买他有钥匙的猪 买完之后 这几个猪圈的猪可以相 ...

  4. dedecms 常用标签

    都是常用的一些标签,大家可以用ctrl+F实现搜索. 网站名称:{dede:global.cfg_webname/} 网站根网址:{dede:global.cfg_basehost/} 网站根目录:{ ...

  5. 最新版postgresql+pgboucer安装

    安装postgresql: wget https://pgbouncer.github.io/downloads/files/1.7.2/pgbouncer-1.7.2.tar.gz wget htt ...

  6. 2015AppStore 上传步骤及常见问题

      ——————辛苦手写,转载请注明出处!——————   *************华丽分割线*****************   一.注意开发者账号:注意格式不能有一点错. 二.下载证书:生成描 ...

  7. 利用Splatting提交参数（Hash，哈希）

    $infos = @{} $infos.Path = 'c:\Windows' $infos.Recurse = $true $infos.Filter = '*.log' $infos.ErrorA ...

  8. Kinect开发学习笔记之（一）Kinect介绍和应用

    Kinect开发学习笔记之(一)Kinect介绍和应用 zouxy09@qq.com http://blog.csdn.net/zouxy09 一.Kinect简单介绍 Kinectfor Xbox ...

  9. .Net程序猿玩转Android开发---(8)表格布局TableLayout

    表格布局TableLayout是Android中比較经常使用的一个布局控件,既然是表格,肯定有行和列,TableLayout中的行有TableRow组成.列依据每行控件的数量来确定 假如第一行有3个控 ...

  10. bind的例子

    10.24 给定一个string,使用bind和check_size在一个int的vector中查找第一个大于string长度的值. #include<iostream> #include ...