首页 > 代码库 > seajs和requirejs

seajs和requirejs

2024-08-18 14:40:44   220人阅读

一、seajs

　　1. 使用seajs的一般步骤

　　　　a)在主页面引入sea.js

　　　　b)写模块

　　　　c)在主页面使用模块

　　2.模块的写法

　　math.js

 1 define(function(require, exports, module){
 2     var squareObj=require("square");
 3     module.exports={
 4         add:function(a,b){
 5             return a+b;
 6         },
 7         cube:function(a){
 8             return squareObj.square(a)*a;
 9         }
10     }
11 })

　　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


联系
我们