zoukankan      html  css  js  c++  java
  • 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加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长 

  • 相关阅读:
    HDU 2955 Robberies(01背包)
    HDU 2602 Bone Collector(01背包)
    HUST 1352 Repetitions of Substrings(字符串)
    HUST 1358 Uiwurerirexb jeqvad(模拟解密)
    HUST 1404 Hamming Distance(字符串)
    HDU 4520 小Q系列故事――最佳裁判(STL)
    HDU 2058 The sum problem(枚举)
    【破解】修改程序版权、添加弹窗
    HDU 1407 测试你是否和LTC水平一样高(枚举)
    HDU 1050 Moving Tables(贪心)
  • 原文地址:https://www.cnblogs.com/zhangruiqi/p/7831600.html
Copyright © 2011-2022 走看看