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整 ...
随机推荐
- [微信开发] 微信JSAPI - 获取用户地理位置信息
参考博客 http://blog.csdn.net/u013142781/article/details/50503299 主要JS 方法 wx.getLocation 获取地理位置信息传递参数 成功 ...
- Go指南练习_斐波纳契闭包
源地址 https://tour.go-zh.org/moretypes/26 一.题目描述 让我们用函数做些好玩的事情. 实现一个 fibonacci 函数,它返回一个函数(闭包),该闭包返回一个斐 ...
- [GPU] DIY for Deep Learning Workstation
Link: jcjohnson/cnn-benchmarks Ref: Build a super fast deep learning machine for under $1,000 Graphi ...
- 【代码审计】YUNUCMS_v1.0.6 后台代码执行漏洞分析
0x00 环境准备 QYKCMS官网:http://www.yunucms.com 网站源码版本:YUNUCMSv1.0.6 程序源码下载:http://www.yunucms.com/Downl ...
- M0 M4时钟控制（一）
时钟控制器为整个芯片提供时钟源,包括系统时钟和所有外围设备时钟.该控制器还通过单独时钟的开或关,时钟源选择和分频器来进行功耗控制.在CPU使能低功耗PDEN(CLK_PWRCTL[7]) 位和Cort ...
- vs2017更新后web项目部分后台代码类没有颜色，也没有自动提示输入功能
vs2017有的版本更新后默认.net framework框架是.net framework4.6.1,将项目的.net framework框架更改为4.6.1,颜色和自动提示出现
- 基础知识——CentOS7操作系统的安装图文教程
学习了很久的Linux操作系统,也看了不少的资料,对于操作系统的安装,相对来说都在不断的改进,安装的难度也在不断的降低,操作步骤也变得非常的简单了. 有很多CentOS系统的安装教程,但是比较不全面或 ...
- Ubuntu 配置vsftpd实现FTP服务器
0.vsftpd是啥玩意 都不知道安装了个啥东西,那就没意思了,所以先去了解下什么是vsftpd.vsftpd意思为“very secure FTP daemon(非常安全的FTP进程)”,当然只有更 ...
- adb.exe,start-server' failed
解决方法: 来自为知笔记(Wiz)
- MacTex TexStudio Configuration 配置
在Mac上使用Latex的话主流是安装MacTex,对于IDE的选择有很多,像什么自带的TexShop,或者是TexStudio,Latexian,Texpad,Texmaker等,甚至可以直接使用一 ...