zoukankan      html  css  js  c++  java
  • 对比requirejs更好的理解seajs

    seajs遵循CMD规范,requirejs遵循AMD规范。AMD规范是预加载,CMD规范是赖加载。

    下文举例假设有文件 b.js, c.js如下

    //b.js
    define(function(require, exports, module){
        console.log('b is loaded')
    
        function run(){
            console.log('b run');
        }
        exports.run = run;
    })
    
    //c.js
    define(function(require, exports, module){
        console.log('c is loaded')
    
        function run(){
            console.log('c run');
        }
        exports.run = run;
    })

    1. seajs对依赖模块只加载不执行,requirejs对依赖模块既加载也执行

    运行代码:

    // seajs
    <!DOCTYPE html>
    <html>
    <head>
        <title>seajs</title>
        <script type="text/javascript" src="./sea.min.js"></script>
    </head>
    <body>
    <button id="btn">OK</button>
    <script type="text/javascript"> seajs.use('./a.js') </script> </body> </html> // requirejs <!DOCTYPE html> <html> <head> <title>requirejs</title> <script type="text/javascript" src="./require.js"></script> </head> <body>
    <button id="btn">OK</button>
    <script type="text/javascript"> require(['a']) </script> </body> </html> // a.js define(['b'], function(){ })

    运行结果:

    seajs:

    控制台无输出

    requirejs:

    控制台:

    2. seajs ,requirejs在 require文件时既加载也执行

    //a.js
    define(function(require, exports, module){
        var b = require('b')
    })

    requirejs:

    控制台:b is loaded

    seajs:

    控制台:b is loaded

    3. seajs可以在任意处直接require文件,无需提前写依赖模块;一旦提前写了任意一个依赖模块,下面的所有require的使用必须保证也有其对应的依赖模块

    seajs可以直接如下使用,无需写依赖['b']:

    //a.js
    define(function(require, exports, module){ var b = require('b') })


    define(['b'], function(require, exports, module){
        var b = require('b')
    })

     运行结果:

    控制台:b is loaded

    假如 a.js 依赖了另一个 c.js,则在 a.js 中使用 require('b') 时必须也写上依赖['b'],否则b.js将因为查找不到而不会加载

    define(['c'], function(require, exports, module){
        var b = require('b')
    })

    运行结果:

     控制台无输出(不会输出c is loaded, 因为没有require('c') )

    如果此时我们执行b.run()

    define(['c'], function(require, exports, module){
        var b = require('b')
        b.run()
    })

    控制台将会报错,因为此时b为null:

     此时正确写法应该写上依赖 ['b']:

    define(['c', 'b'], function(require, exports, module){
        var b = require('b')
        b.run()
    }) 

    运行结果:

     

    结论:

    对于seajs,如果不写依赖那就一个都不要写,一旦写了,下面所有require的地方都需要提前在头部写上依赖

    但对require.ascnc例外,可以如下写法:
    //a.js
    define(['c'], function(require, exports, module){ var b = require.async('b'); })
    此时c.js, b.js都被加载,只有 b.js 被执行
    下一点将会介绍require.async

    requirejs的依赖写法如下:

    define(['c', 'b'], function(c, b){
        var b = require('b')
        b.run()
    })
    
    或
    
    define(function(require, exports, module){
        var b = require('b')
        b.run()
    })
    
    //错误写法
    define(['c'], function(c){
        var b = require('b')
        b.run()
    })

    4. seajs的require.async在执行到使用位置的时候才去异步加载

    seajs:

    如下例:

    // a.js
    define(function(require, exports, module){
        document.getElementById('btn').addEventListener('click',       function(){
         document.getElementById('btn').innerHTML = 'btn is clicked' init() })
    function init(){ var b = require('b'); b.run() } })

    运行结果:

    控制台无输出

    点击OK按钮, b.js 加载并执行b.js和run方法:

    大家注意到,在未点击按钮之前,虽然没有执行init方法,但b.js依然被提前加载了进来,但没有被执行(没有输出b is loaded)。

    很多时候我们想在执行init方法的时候再去加载b.js,而不是提前在页面加载的时候就把b,js加载。

    这时候就需要用到require.async,如下:

    //a.js
    define(function(require, exports, module){
        document.getElementById('btn').addEventListener('click', function(){
            document.getElementById('btn').innerHTML = 'btn is clicked'
            init()
        })
        
        function init(){
            require.async('b', function(b){
                b.run()
            });
        }
    })

    这时候运行结果:

    b.js没有被加载:

    控制台无输出:

    点击OK按钮:

    b.js被加载

    控制台输出:

    这是因为当执行一个js时,seajs会先去查找匹配require,然后加载相应资源,但不执行。匹配到require.async时不加载。

    所以,require.async达到了用到时再去异步加载并执行的目的。

    小问题:

    如果是requirejs执行下面代码:

    //a.js
    define(function(require, exports, module){
        document.getElementById('btn').addEventListener('click', function(){
            document.getElementById('btn').innerHTML = 'btn is clicked'
            init()
        })
        
        function init(){
            var b = require('b');
            b.run()
        }
    })


    资源如何加载?控制台又会输出什么呢?点击ok按钮又会输出啥?
    答:资源加载了a.js, b.js, 控制台输出:b is loaded, 点击OK按钮控制台继续输出:b run
    (选择“答”后面的部分查看答案)

    总结:
    
    1. seajs对依赖模块只加载不执行,requirejs对依赖模块加载并执行
    
    2. seajs ,requirejs在 require具体文件时既加载也执行
    
    3. seajs可以在任意处直接require文件,无需提前写依赖模块;一旦提前写了任意一个依赖模块,下面的所有require的使用必须保证也有其对应的依赖模块
    
    4. seajs的require.async在执行到使用位置的时候才去异步加载

    本文demo:

    https://github.com/saysmy/seajs-requirejs-demo

     

  • 相关阅读:
    apt-get
    微博
    字符串操作
    fly
    Oracle数据库只Dual表
    如何配置一个Oracle服务
    排序算法
    排序算法
    排序算法
    ArcEngine几个空间操作
  • 原文地址:https://www.cnblogs.com/saysmy/p/7560823.html
Copyright © 2011-2022 走看看