RequireJS用法简单示例


Posted in Javascript onAugust 20, 2018

本文实例讲述了RequireJS用法。分享给大家供大家参考,具体如下:

建立如下工程目录:

|-test

   |-index.html

   |-index.js

   |-main.js

   |-require.min.js

   |-test.js

其中,index.html如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
</head>
<body>
<script type="text/javascript" data-main="main.js" src="require.js"></script>
</body>
</html>

data-main为入口。

main.js如下:

define(['require','main'],function (require) {
  require(['index','test'],function (index,test) {
    console.log(index.index());
    console.log(test.test());
  });
});

index.js如下:

define(['require','index'],function (require) {
  var index = {
    index:function () {
      console.log("index");
    }
  };
  return index;
});

test.js如下:

define(['require','test'],function (require) {
  var test = {
    test:function () {
      console.log("test");
    }
  };
  return test;
});

当要简单包装CommonJS来定义模块,则main.js改为:

define(function(require, exports, module) {
    var index = require('index');
    var test = require('test');
  }
);

即可引入index.js 和 test.js。

希望本文所述对大家RequireJS程序设计有所帮助。

Javascript 相关文章推荐
提示$ is not defined错误分析及解决
Apr 09 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 #Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 #Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 #Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 #Javascript
获取layer.open弹出层的返回值方法
Aug 20 #Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 #Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 #Javascript
You might like
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python算法应用实战之队列详解
2017/02/04 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
师范生实习的个人自我鉴定
2013/10/20 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
卫生安全检查制度
2014/02/04 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL