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 相关文章推荐
javascript 实现字符串反转的三种方法
Nov 23 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
javascript 实现map集合
Apr 03 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
vue中是怎样监听数组变化的
Oct 24 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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
简单的编程0基础下Python入门指引
2015/04/01 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Python字典遍历操作实例小结
2019/03/05 Python
python操作kafka实践的示例代码
2019/06/19 Python
python适合人工智能的理由和优势
2019/06/28 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
python os.rename实例用法详解
2020/12/06 Python
python 装饰器的基本使用
2021/01/13 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
买房子个人收入证明
2014/01/16 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
大学班干部竞选稿
2015/11/20 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
德生BCL3000抢先使用感受和评价
2022/04/07 无线电