seajs和requirejs
一、seajs
1. 使用seajs的一般步骤
a)在主页面引入sea.js
b)写模块
c)在主页面使用模块
2.模块的写法
math.js
define(function(require, exports, module){
var squareObj=require("square");
module.exports={
add:function(a,b){
return a+b;
},
cube:function(a){
return squareObj.square(a)*a;
}
}
})
square.js
define(function(){
return {
square:function(a){
return a*a;
}
}
})
define是定义一个模块的固定用法，其中的参数分别表示：
require：依赖的文件，里面的参数是相对于sea.js文件的路径
exports：可以导出方法，但是它不能导出对象
module.exports:既可以导出方法，也可以导出对象
如果需要导出的方法有多个就用module.exports,只有一个就用exports。
这些参数都不是必须的，但是一定要注意，如果你要用exports，前面必须有require，因为参数的位置不能变。
3.使用模块
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="sea-debug.js"></script>
<script>
seajs.config({
base:"module",
alias:{
query:"jquery-1.12.4"
}
})
seajs.use("math.js",function(obj){
console.log(obj.add(8,3));
console.log(obj.cube(8,3));
})
</script>
</head>
<body> </body>
</html>
seajs.config：配置seajs，base是设置目录，alias是设置别名
seajs.use：使用模块
参数一：使用到的模块的路径，因为base设置了基本路径，所以这里的路径是在基本路径上的路径；如果使用到了多个模块，就用数组包裹多个模块
参数二：函数，函数里面的参数表示的是每个模块返回的对象，有多个模块就有多个对象，在这个函数里面就可以使用模块里的方法
二、requirejs
requirejs和seajs的用法基本相同，先引入，写模块，最后使用模块，区别在于使用模块上。
requirejs的使用模块：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="require.js"></script>
<script>
requirejs.config({
baseUrl:"scripts/module",
})
requirejs(["math.js"],function(obj){
console.log(obj.add(8,3));
console.log(obj.cube(8,3));
})
</script>
</head>
<body> </body>
</html>
三、seajs和requirejs的区别
1、 requirejs可以在引入require.js的script标签中设置模板加载选项，这样可以加载第一个模块
<script data-main="script/main" src="require.js"></script>
2、 requirejs的配置中设置基本路径的属性为baseUrl，它的路径是相对于该页面的路径
3、 requirejs使用模块时不需要写.use,它的第一个参数一定是个数组，即使它只引入一个模块，也要用数组的形式
4、 seajs是懒加载，懒加载就是什么时候调用，什么时候加载，requirejs是预加载，先加载完毕，然后再执行，所以在一些输出上的顺序会不同
5、 seajs是基于cmd规范，requirejs是基于amd规范
四、seajs使用jquery
因为seajs是基于cmd规范，而jquery是基于amd规范，所以seajs在使用jquery的时候，需要将jquery的规范也改成cmd
在这里我修改的是jquery-1.12.4.js，修改的位置在10972行 ，将amd改成了cmd，注释的部分为原来的代码，下面的代码是修改的
if ( typeof define === "function" && define.cmd ) {
//define( "jquery", [], function() {
// return jQuery;
//} );
define(function(require,exports,module){
module.exports=jQuery;
});
}
五、其它小知识点
1、 在写路径的时候，“main.js”可以写成”main“，因为在seajs和requirejs的内部会为我们加上.js
2、 如果路径相对于正在编写的文件目录在同一级，可以使用"./main"来加载路径 ，./就是在此文件目录下查找
3、模块中，可以用exports导出方法，用module.exports导出对象或方法，还可以用return导出对象或方法
4、seajs和requirejs的原理就是创建script标签，src等于要引入的文件路径，追加到head后面，引用完后再移除
seajs和requirejs的更多相关文章
- SeaJS与RequireJS最大的区别
SeaJS与RequireJS最大的区别 U_U 2013-06-20 16:21:12 执行模块的机制大不一样-----------------------------------由于 Requir ...
- seajs和requirejs对比；node初识
seajs 引包 载入主模块(seajs.use('./main')) 定义模块define(function(require,exports,module)) 模块化的好处 1.开发效率高 2.可以 ...
- SeaJS 与 RequireJS 的差异对比
这篇文章主要介绍了SeaJS 与 RequireJS 的差异对比,本文主要对CMD规范和AMD规范的弊端做了对比,并做出了一个总结,需要的朋友可以参考下 “历史不是过去,历史正在上演.随着 W3C 等 ...
- SeaJs与RequireJs执行差异
seajs与requirejs在模块的加载方面是没有差异的,无论是requirejs在定义模块时定义的依赖模块,还是seajs在factory函数中require的依赖模块,在会在加载当前模块时被载入 ...
- seajs与requirejs
1 seajs暴露的两个对象 二 define()定义 引用模块 三插件 css插件和requirejs插件 4 seajs使用和建议
- 从Java的角度理解前端框架，nodejs，reactjs，angularjs，requirejs，seajs
[前端神秘的面纱] 对后端开发来说,前端是神秘的, 眼花缭乱的技术,繁多的框架, 如果你还停留在前端等于只用jquery做开发,那么你out了, 本文从Java的角度简述下目前前端流行的一些框架. 水 ...
- RequireJS 和 SeaJS
RequireJS SeaJS CMD规范 CommonJS的规范: 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的 ...
- 对比requirejs更好的理解seajs
seajs遵循CMD规范,requirejs遵循AMD规范.AMD规范是预加载,CMD规范是赖加载. 下文举例假设有文件 b.js, c.js如下 //b.js define(function(req ...
- requirejs和seajs使用感受
这几天看了下前端模块化的知识,主要是requirejs和seajs相关的知识,还未看es6的模块化知识. 由于目前项目组内的开始推广使用vue,并且开始简单的封装组件,但发现组件js的使用方式依然是原 ...
随机推荐
- mariadb
MariaDB数据库管理系统是MySQL的一个分支
- 2016 Web开发资源工具大搜罗
来源于:https://zhuanlan.zhihu.com/p/22730771 作者:余博伦链接:https://zhuanlan.zhihu.com/p/22730771来源:知乎著作权归作者所 ...
- XStream简单入门
简单的讲,XStream 涉及的就五个知识点:详情参考 官网 混叠,注解,转换器,对象流和操作json! 下面就用几个简单的例子来实现上述五个知识点! 基本步骤: 第1步:创建XStream对象. 通 ...
- 【USACO 2.3】Money Systems（dp）
v种货币,求有多少种组成和为n. dp[i][j]表示前i种货币价格为j有多少种方案,dp[i][j]+=dp[i-1][j-c]. http://train.usaco.org/usacoprob2 ...
- shell知识点小结
目录 引言 shell中的数组 数组的定义 数组的使用 实际的例子 shell中大小的比较 shell中的括号 shell中函数的定义 杂项知识点 字符串转数组 常用判断标志 linux后台运行相关 ...
- CentOS6.5下Redis安装与配置
http://blog.csdn.net/ludonqin/article/details/47211109
- 出现could not find developer disk image解决办法和不受信任的开发者
真机测试问题 最近一直遇到这样的问题,很是让人心烦,但是还是要自己解决的,我也是从网上查了很多这样的解决办法,都没有成功,所以今天我要把自己的总结的方法和大家分享一下. iOS测试当中的问题 iOS ...
- R语言排序:sort()，rank()，order()示例
> x<-c(97,93,85,74,32,100,99,67) > sort(x) [1] 32 67 74 85 93 97 99 100 > order(x) [1] 5 ...
- R读取溢出的数据
读取含多位数的数据 1(首选). install.packages("readxl")library(readxl) x<-read_excel("C:\\User ...
- 介绍DSA数字签名，非对称加密的另一种实现
接下来我们介绍DSA数字签名,非对称加密的另一种实现. DSA DSA-Digital Signature Algorithm 是Schnorr和ElGamal签名算法的变种,被美国NIST作为DSS ...