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整 ...
随机推荐
- c# 调用非托管c++dll 参数问题（转）
在C#中调用C(C++)类的DLL的时候,有时候C的接口函数包含很多参数,而且有的时候这些参数有可能是个结构体,而且有可能是结构体指针,那么在C#到底该如何安全的调用这样的DLL接口函数呢?本文将详细 ...
- C++ 智能指针六
/* 智能指针unique_ptr */ #include <iostream> #include <string> #include <memory> #incl ...
- Sword STL迭代器prev,next相关函数
迭代器的头文件中定义了4个实现迭代器模板的函数模板. .advance(iterator,num):将迭代器iterator 移动了num个位置 .distance(iterator1,iterato ...
- (笔记)Linux内核学习(三)之进程调度
进程调度: 在可运行态进程之间分配有限处理器时间资源的内核子系统. 一 调度策略 1 进程类型 I/O消耗型进程:大部分时间用来提交I/O请求或是等待I/O请求,经常处于可运行状态,但运行时间短,等待 ...
- Java如何从文件中打印与给定模式匹配的所有字符串？
在Java编程中,如何从文件中打印与给定模式匹配的所有字符串? 以下示例显示了如何使用Util.regex类的Patternname.matcher()方法从文件中打印与给定模式匹配的所有字符串. p ...
- Oracle Enterprise Linux 6.4 下挂载ISCSI 设备
Oracle Enterprise Linux 6.4 下挂载ISCSI 设备一.发现① 要求安装iscsi客户端软件 yum install iscsi-initiator-utils ② 发现 ...
- [Full-stack] 跨平台大框架 - RN
前言 React-Redux的大全栈代码复用理论有点意思,给出一个具体的例子:[React] 15 - Redux: practice IM 因为与react内容天然地部分重合,故这里将重点放在了对c ...
- [Node.js] 08 - Web Server and REST API
有了 [Node.js] 07 - Html and Http 作为基础,再继续下面的内容. Node.js 路由 Node.js GET/POST请求 Node.js Web 模块 Node.js ...
- phpdoc生成文档（暨pear/pecl管理包）
1.win下安装pear $file = 'http://pear.php.net/go-pear.phar'; $file2 = 'f:\go-pear.phar'; // Open the fil ...
- 【netcore基础】.Net core使用swagger自动生成开发文档
之前写过一篇 .Net 版本的博客 https://www.cnblogs.com/jhli/p/8317566.html 现在只不过用了 netcore 之后的版本,其实差不多 netcore版本的 ...