Requirejs 使用
一、不依赖其他模块的module创建
- 创建math的module
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
- 将require引入的js全部写在
html(当然可以用data-main属性)
<body>
<div class="box">box</div>
<script type="text/javascript" src="lib/require.js"></script>
<script type="text/javascript">
require(['./js/math'], function(math) {
var box = document.querySelector('.box')
box.innerText = math.add(1, 1);
});
</script>
</body>
或者
<head>
<script type="text/javascript" src="lib/require.js" ></script>
<script type="text/javascript" defer async="true">
require(['./js/math'], function(math) {
var box = document.querySelector('.box')
box.innerText = math.add(1, 1);
});
</script>
</head>
二、 引入jquery
由于jquery本身是没有通过defined(虽然它源码是用requirejs开发的)，单独引入jquery，然后执行jquery语法代码，显然会报错。（同样的道理，在seajs也是一样的）。
requirejs提供require.config()
<body>
<div class="box"></div>
<script type="text/javascript" src="lib/require.js"></script>
<script type="text/javascript" defer async="true">
require.config({
paths: {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "./lib/jquery"],
}
})
require(["jquery"], function($) {
$(function() {
$('.box').css({
'width':'100px',
'height':'100px',
'background':'red',
'border-radius':'10px'
})
})
})
</script>
</body>
说明： 通常情况下现在加载CDN下jquery，如果没有才加载本地的jquery文件。
当然自己定义的模块，也可以通过这种方式调用了。如下：
<body>
<div class="box">box</div>
<script type="text/javascript" src="lib/require.js"></script>
<script type="text/javascript" defer async="true">
/* 第一种
require(['./js/math'], function(math) {
var box = document.querySelector('.box')
box.innerText = math.add(1, 1);
});
*/
// 第二种
require.config({
paths: {
'math': './js/math'
}
});
require(['math'], function(math) {
var box = document.querySelector('.box');
box.innerText = math.add(1, 2);
})
</script>
</body>
三、模块依赖
- 创建
boxText模块，可以直接依赖 jquery 模块。
define(['jquery'],function() {
var addText = function () {
$('.box').text('box').css({
'line-height': '100px',
'text-align': 'center',
'color': '#fff'
})
}
var removeText = function() {
$('.box').text('');
}
return {
addText: addText,
removeText: removeText
}
})
- 创建
boxStyle模块，可在调用是在require.config中使用shim
define(function() {
var green = function() {
$('.box').css({
'background-color': 'green'
});
};
var red = function() {
$('.box').css({
'background-color': 'red'
})
}
return {
green: green,
red: red
}
})
index.html
require.config({
path: {
'boxStyle': 'file\path\boxStyle'
},
shim: {
"boxStyle": {
exports: 'boxStyle',
deps: ['jquery']
}
}
})
模块之间的依赖如果是通过require，并没有通过require.config来定义，那只能通过require来依赖
//req/demo6.html
require.config({
paths: {
"jquery": ["http://libs.baidu.com/jquery/2.0.3/jquery", "./lib/jquery"],
},
});
require(['jquery','./js/attr/index'], function($, attr) {
$(function() {
attr.remove();
attr.add();
})
})
req/js/attr/index.js
define(['./remove','./add'],function(remove,add){
return {
remove: remove,
add: add
}
})
req/js/attr/add.js
define(['jquery'],function($) {
function add() {
console.log('addattr');
$('body').css('background','#ddd');
}
return add;
})
req/js/attr/remove.js
define(function(){
function remove() {
console.log('removeattr');
}
return remove
})
seajs，当初找着文档演示一篇。当时发现requirejs方便，但现在一直使用。现在es6的模块流行，所以没在学习seajs，也不打算学习seajs。
Requirejs 使用的更多相关文章
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 实现一个类 RequireJS 的模块加载器 (二)
2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...
- 使用RequireJS并实现一个自己的模块加载器 (一)
RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...
- 使用gulp解决RequireJS项目前端缓存问题（二）
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
- AngularJs2与AMD加载器(dojo requirejs)集成
现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...
- angularjs集成requirejs
其实说成使用requirejs加载angularjs应用会更贴切一些 <body> <span ng-controller="homeController"> ...
- 使用gulp解决RequireJS项目前端缓存问题（一）
1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...
- CommonJS, AMD 和 RequireJS之间的关系(转载)
先说说CommonJS CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScript设计之初不仅仅是针对客户端设计的语言.后来只是由于Web的迅速流行, ...
- RequireJS与SeaJS模块化加载示例
web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...
- 【requireJS源码学习01】了解整个requireJS的结构
前言 现在工作中基本离不开requireJS这种模块管理工具了,之前一直在用,但是对其原理不甚熟悉,整两天我们来试着学习其源码,而后在探寻其背后的AMD思想吧 于是今天的目标是熟悉requireJS整 ...
随机推荐
- linux 网络配置 (配置/etc/sysconfig/network-scripts/ifcfg-ethx)
背景 需要往服务器上安装软件:并且像maven代理的话必须连接公网.首先配置了网关,发现可以通过ip访问公网了,在配置了DNS可以通过域名访问公网了 实例 配置linux 可以上网的操作 vi /et ...
- 多线程开发之二 NSOperation
效果如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UITableViewControll ...
- [Stats385] Lecture 01-02, warm up with some questions
Theories of Deep Learning 借该课程,进入战略要地的局部战斗中,采用红色字体表示值得深究的概念,以及想起的一些需要注意的地方. Lecture 01 Lecture01: De ...
- Eclipse常用的几个快捷键
快速修正: Ctrl+1 查看方法说明: F2 单词补全: Alt+/ 快速层次结构: Ctrl+T 保存: Ctrl+S 变为大/小写: Ctrl+Shift+X/Y 前一个编辑的页面: Alt ...
- Markdown 标题
用 Markdown 书写时,只需要在文本前面加上 # 即可创建标题,Markdown 支持六级标题,语法及效果如下 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五 ...
- 解决在antd中使用 autoprefixer 9.4.5 会抛出错误 Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed 的问题
其实这个和antd的版本有关系,只需要把antd的版本升级到3.12.4就可以了 yarn add antd@ --save 记得重新运行一下项目
- VBA 根据Find方法根据特定内容查找单元格
http://club.excelhome.net/thread-940744-1-1.html 2. Find方法的语法[语法]<单元格区域>.Find (What,[After],[L ...
- 7.11python多进程
#!/usr/bin/env python #!--*--coding:utf-8 --*-- #!@Time :2018/7/11 19:27 #!@Author TrueNewBee import ...
- 解决css设置背景透明，文字不透明
设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标 ...
- hdu4763 Theme Section【next数组应用】
Theme Section Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...