seajs和requirejs

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

  

  

时间: 2024-10-07 16:13:52

seajs和requirejs的相关文章

SeaJS 与 RequireJS 的差异对比

这篇文章主要介绍了SeaJS 与 RequireJS 的差异对比,本文主要对CMD规范和AMD规范的弊端做了对比,并做出了一个总结,需要的朋友可以参考下 “历史不是过去,历史正在上演.随着 W3C 等规范.以及浏览器的飞速发展,前端的模块化开发会逐步成为基础设施.一切终究都会成为历史,未来会更好.”——引用玉伯原文最后一段话,我个人也非常赞同.既然谈到了“未来”,我个人认为:前端 js 模块如果继续发展,其模块格式很可能会成为未来 WEB 一种标准规范,产生多种实现方式.就好比 JSON 格式一

SeaJs与RequireJs执行差异

seajs与requirejs在模块的加载方面是没有差异的,无论是requirejs在定义模块时定义的依赖模块,还是seajs在factory函数中require的依赖模块,在会在加载当前模块时被载入,异步,并且顺序不可控.差异在于factory函数执行的时机. 为了增强对比,我们在定义依赖模块的时候,故意让它们的factory函数要执行相当长的时间,比如1秒: // dep_A.js定义如下,dep_B.dep_C定义同理 define(function(require, exports, m

SeaJS与RequireJS最大的区别

1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行.不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同).CMD 推崇 as lazy as possible. 2. CMD 推崇依赖就近,AMD 推崇依赖前置. 3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一.比如 AMD 里,require 分全局 require 和局部 require,都叫 require.CMD 里,没有全局 require,而是

SeaJS 与 RequireJS 的差异1

SeaJS 遵循 CMD 规范,RequireJS 遵循 AMD 规范. CMD 模块依赖声明方式: define(function (require) { var a = require('./a'); var b = require('./b');}) CMD 规范的弊端 不能直接压缩:require是局部变量,意味着不能直接的通过压缩工具进行压缩,若require这个变量被替换,加载器与自动化工具将无法获取模块的依赖. 模块书写有额外约定:路径参数不能进行字符串运算,不能使用变量代替,否则

从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs

[突然领悟] 今天看了一遍reactjs,突然发现和自己一直用的freemarker的宏十分相似, 突然领悟了很多前端吊炸天的概念,框架,特写此文,欢迎批评指正. [nodejs] 官网:https://nodejs.org/ 简介:对前端来说极其重要的一个"框架",简直可以说是开天辟地 类比Java中:JVM 详述: 就前端来说nodejs具有划时代的意义,做前端的没用过nodejs都不好意思说自己是前端, 做后端的没听过nodejs,或者说不出nodejs和java的优缺点,也不是

CMD和seaJS

前面的话 CMD(Common Module Definition)表示通用模块定义,该规范是国内发展出来的,由阿里的玉伯提出.就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS和requireJS一样,都是javascript的模块化解决方案.本文将详细介绍CMD和seaJS CMD 在Sea.js中,所有JavaScript模块都遵循CMD(Common Module Definition)模块定义规范.该规范明确了模块的基本书写格式和基本交互规则 AMD规范简单

seaJS 模块加载过程分析

先看一个seajs的官方example,  以下以seajs.use('main')为例, 解析加载mod main的过程 //app.html seajs.use("main"); //main.js define(function(require) { var Spinning = require('./spinning'); var s = new Spinning('#container'); s.render(); }); //spinning.js define(funct

requirejs 简单示例一

现在web前端动不动就模块化,艾玛,吓死宝宝了.所以最近就打听模块化的消息,结果不知咋地就撞到了requirejs,说到Requirjs就要说到 AMD和CMD, 首先:AMD和CMD是规范,而requirejs和sealjs是具体的实现. 可以参考: 关于 CommonJS AMD CMD UMD SeaJS与RequireJS最大的区别 JavaSript模块规范 - AMD规范与CMD规范介绍 基于 AMD(Asynchronous Module Definition)的 JavaScri

好好的Seajs,说不用就不用了

话说最近看到的关于Seajs的坑,真不少:说什么seajs.use的相对路径解析有坑.依赖模块的缓存问题.自动化的压缩合并问题.es6来了,seajs过时啦!:是的,这些个问题确实不是不常见!那么,兵来将挡,水来土掩,选择了出击,咱就得迎难而上啊! seajs.use的相对路径解析的问题,纯属个人写法的问题:无论是页面上seajs.use还是在合并在config里的seajs.use都是没问题的,seajs.use的相对路径是指向调用页面的,但是有静态资源站,所以用绝对路径肯定不会指错的:我个人