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整 ...
随机推荐
- redis Sentinel部署
sentinel 系统用于管理多个 Redis 服务器(instance) 执行以下三个任务: 监控(Monitoring): Sentinel 会不断地检查你的主服务器和从服务器是否运作正常. 提醒 ...
- Zookeeper系列二：分布式架构详解、分布式技术详解、分布式事务
一.分布式架构详解 1.分布式发展历程 1.1 单点集中式 特点:App.DB.FileServer都部署在一台机器上.并且访问请求量较少 1.2 应用服务和数据服务拆分 特点:App.DB.Fi ...
- 年关将至业内警示P2P跑路风险
年关将近,P2P网贷行业的问题平台亦不断增多,“跑路潮”会否再现,业内人士讨论热烈. “从历年数据统计来看,问题平台接近线性向上的增长趋势,即时间越往后,问题平台占比就越高,而每逢年关,问题平台占比都 ...
- vue跨域代理配置
实际:http://a.com/b.php 代理:http://localhost/b.php 配置config/index.js proxyTable: { '/api': { target:'ht ...
- Markdown 链接
如下,方括号显示说明,圆括号内显示网址, Markdown 会自动把它转成链接 [我是百度](https://www.baidu.com/) [我是淘宝](https://www.taobao.com ...
- redis最大缓存和回收策略
- sencha touch 带本地搜索功能的selectfield(选择插件)
带本地搜索功能的选择插件,效果图: 在使用selectfield的过程中,数据过大时,数据加载缓慢,没有模糊查询用户体验也不好, 在selectfield的基础上上稍作修改而成,使用方式同select ...
- hosts文件配置不生效的解决办法
分析可能的原因并给出相应的解决方案. 第一 种情况,在开启浏览器的时候修改磁盘上的hosts文件,比如说加了原先没有的一句"127.0.0.1 www.360.cn",保存host ...
- day_10py 简单地名字管理系统
#!/usr/bin/env/python #-*-coding:utf-8-*- ''' 名字管理系统 做程序迭代,由点到面一点一点来 ''' # 1.打印功能提示 print("=&qu ...
- js fetch api
MDN fatch 返回的对象 type string url string redirected boolean status number ok boolean statusText string ...