seajs和requirejs

时间:2020-12-24 08:26:10

一、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后面,引用完后再移除