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整 ...
随机推荐
- ORACLE 11.2.0.4 OCR VOTING DISK 模拟恢复场景
① 备份 ocrconfig -export 文件名 或者 ocrconfig -manualbackup 或者 找到备份 ocrconfig -local -showb ...
- Solr中的q与fq参数的区别
转自:搜索系统5:Solr中的q与fq参数的区别在那儿 1.对结果排序有影响 今天遇到一个问题,把相同的参数比如name:张三,放到q与fq,两者返回的结果完全不一样. 经过debug发现,原因是这两 ...
- 前端分页插件pagination
摘要: 最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高 不依赖任何库 作为一次技术沉 ...
- 利用Google开源Java容器化工具Jib构建镜像
转载:https://blog.csdn.net/u012562943/article/details/80995373 一.前言 容器的出现让Java开发人员比以往任何时候都更接近“编写一次,到处运 ...
- THINKPHP5 volist标签循环不能设置循环变量为$i
在thinkphp5的volist标签中不要用$i作为id,举个简单例子 控制器这样写 模板这样写 结果是 这很令人费解啊.然后换一个循环变量看看 循环正常了,看来这个id这里设置循环变量的时候 不能 ...
- Mac下git通过SSH进行免密码安全连接github
Git——The stupid content tracker(傻瓜内容跟踪器) Git是Linux的缔造者Linus Torvalds为了帮助管理Linux内核源码而开发的一款免费.开源的分布式版本 ...
- 2. Mysql数据库的入门知识
2. Mysql数据库的入门知识 (1)打开Windows系统提供的服务查看相应的服务. (2)在Windows任务管理器的进程中查看 (3)使用命令行管理windows的Mysql数据库服务. Ne ...
- 7.13python多进程
所以引入了 多进程*(异步) 处理效率高 #!/usr/bin/env python #!--*--coding:utf-8 --*-- #!@Time :2018/7/13 19:26 #! ...
- parent对象
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...
- SPRING的事务配置详解
spring事务配置的两种方式: 1.基于XML的事务配置.2.基于注解方式的事务配置. 前言:在我们详细介绍spring的两种声明式事务管理之前,我们需要先理解这些概念 1)spring的事务管理是 ...