• JavaScript模块化编程之require.js与sea.js


     

    JS中的模块规范(CommonJS,AMD,CMD)

    CommonJS规范-是用在服务器端的(不能用在浏览器端),同步的,如nodejs 
    AMD规范, CMD规范是用在浏览器端的,异步的,如RequireJS SeaJS 

    AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
    CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
    其中,AMD 先提出(国外),CMD 是根据commonjs和amd基础上提出的(国内-玉伯)。 

    RequireJS 遵循AMD规范,CMD和AMD基本相同,最大的区别是就CMD是懒加载,AMD是预加载.

    简单来说,就是SeaJS 属于懒加载,RequireJS属于预加载(RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过))。

    1.首先原理上的区别

    sea.js遵循CMD规范.书写方式类似node.js的书写模板代码.依赖的自动加载,配置的简洁清晰.说白了就是懒加载.

    在这里,顺便扩展一下预加载和懒加载的优缺点

    预加载:当第一次访问时将所有的文件加载出来

    优点:第一次访问完成以后, 再次访问的速度会很快

    缺点:第一次加载页面要等待很久.

    懒加载:使用的时候才会加载对应的文件.

    优点:第一次访问速度相对快点

    缺点:再访问其他新的模块时速度会变慢.

    2.书写上面的区别

    都是用define来定义一个模板.通过require,exports,module三个参数来调动函数.

    基本上他们的用法是大同小异的.不过要两点较大的区别是需要大家去注意的:

    1)sea.js使用模块时用方法seajs.use,而require.js直接用require关键字

    2)sea.js只使用一个模块时可以只传入一个字符串,但是require传入的必须是一个数组.




    CommonJS 

    CommonJs 是服务器端模块的规范,Node.js采用了这个规范。 

    2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程。这标志"Javascript模块化编程"正式诞生。因为老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限;但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。NodeJS是CommonJS规范的实现,webpack 也是以CommonJS的形式来书写。

    基于commonJS规范的nodeJS出来以后,服务端的模块概念已经形成,很自然地,大家就想要客户端模块。而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行。但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境。还是上面的代码,如果在浏览器中运行,会有一个很大的问题,你能看出来吗?

      var math = require('math');

      math.add(2, 3);

    第二行math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等。您会注意到 require 是同步的。

    这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于"假死"状态。

    因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。

    CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范。



    根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。 

    例如: 
    // foobar.js 

    //私有变量 
    var test = 123; 

    //公有方法 
    function foobar () { 

        this.foo = function () { 
            // do someing ... 
        } 
        this.bar = function () { 
            //do someing ... 
        } 


    //exports对象上的方法和变量是公有的 
    var foobar = new foobar(); 
    exports.foobar = foobar; 

    //require方法默认读取js文件,所以可以省略js后缀 
    var test = require('./boobar').foobar; 

    test.bar(); 


    CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。但如果是浏览器环境,要从服务器加载模块,这是就必须采用异步模式。所以就有了 AMD  CMD 解决方案。 


    AMD((Asynchromous Module Definition) 

    AMD 是 RequireJS 在推广过程中对模块定义的规范化产出 

    AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各种类型的模块。 

    适用AMD规范适用define方法定义模块。 

    //通过数组引入依赖 ,回调函数通过形参传入依赖 
    define(['someModule1', ‘someModule2’], function (someModule1, someModule2) { 

        function foo () { 
            /// someing 
            someModule1.test(); 
        } 

        return {foo: foo} 
    }); 
    AMD规范允许输出模块兼容CommonJS规范,这时define方法如下: 

    define(function (require, exports, module) { 
         
        var reqModule = require("./someModule"); 
        requModule.test(); 
         
        exports.asplode = function () { 
            //someing 
        } 
    }); 



    CMD 

    CMD是SeaJS 在推广过程中对模块定义的规范化产出 

    CMD和AMD的区别有以下几点: 

    1.对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过)。 

    2.CMD推崇依赖就近,AMD推崇依赖前置。 
    //AMD 
    define(['./a','./b'], function (a, b) { 

        //依赖一开始就写好 
        a.test(); 
        b.test(); 
    }); 

    //CMD 
    define(function (requie, exports, module) { 
         
        //依赖可以就近书写 
        var a = require('./a'); 
        a.test(); 
         
        ... 
        //软依赖 
        if (status) { 
         
            var b = requie('./b'); 
            b.test(); 
        } 
    }); 
    虽然 AMD也支持CMD写法,但依赖前置是官方文档的默认模块定义写法。 

    3.AMD的api默认是一个当多个用,CMD严格的区分推崇职责单一。例如:AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。 

     
    AMD 即Asynchronous Module Definition,中文名是异步模块定义的意思。
    CMD 即Common Module Definition通用模块定义,CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同 

    requireJS主要解决两个问题

    1、多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器 
    2、js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长 

  • 相关阅读:
    缓冲式I/O
    事件轮询接口
    博弈游戏
    多任务I/O之poll函数
    好的link
    做纹理处理的。。。
    快毕业了!
    语音处理的资料
    google图像搜索原理
    install opencv in centos
  • 原文地址:https://www.cnblogs.com/zhangruiqi/p/7831600.html
Copyright © 2020-2023  润新知