zoukankan      html  css  js  c++  java
  • RequireJS 模块化加载框架使用

    RequireJS 是一个遵循 AMD 规范的模块化加载框架

    与上文seajs一样,这里简单介绍其相关用法

    同样的,首先是下载好 require.js --> http://requirejs.org/docs/download.html#requirejs

    AMD规范是预加载,也就是说会马上将所有模块全加载。

    写法跟seajs也类似,只不过 当需要包含模块时,一般会将模块名置入第一个参数。而不是直接require  详见

    (新版本的也有CMD版require包含依赖的方式,但本质还是一样,下面会提到)

    还是举个例子:

    目录结构同级

    index.html:

    注意到这里script标签多了一个data-main属性(加不加后缀js都可以),它标识了引用主模块入口 main.js

    (也可以不使用这种引用入口方式,下边会介绍另一种方式,注意啦~)

    <!DOCTYPE html>
    <html>
    <head>
        <title>require</title>
        <style type="text/css">
        </style>
    </head>
    <body>
    
    <script type="text/javascript" data-main='main' src="./require.js"></script>
    
    </script>
    </body>
    </html>

    main.js:

    将两个模块置入参数1,并以回调的方式传入使用

    define(['main1','main2'],function(main1,main2){ 
        console.log('module of main:');
        main1.say();
        main2.say();
    
    });

    main1.js:

    define(function(require,exports,module){ 
        console.log('module of main1:');
    
        module.exports = { 
            say: function(){ 
                console.log('main1--hello');
            }
        };
    });

    main2.js:

    define(function(require,exports,module){ 
        console.log('module of main2:');
    
        return { 
            say: function(){ 
                console.log('main2--hello');
            }
        };
    });

    浏览器打开index.html 可以发现结果:

    顺序乱了是不是

    其实这就是因为AMD规范预先加载的规则,预先把所有依赖都执行了(虽然我们还没用到)

    而且这加载是并行的,(默认情况下)main1和main2不分先后。

    假设 main.js文件因网络问题加载延迟后,就有可能出现以下结果

    module of main2:

    module of main1:

    module of main:

    ...

    不过,我们也可以为其什么依赖关系,比如main1依赖main2,则就能保证“所谓的顺序”-- 先有main2才有main1

    比如将index.html修改成

    <!DOCTYPE html>
    <html>
    <head>
        <title>require</title>
        <style type="text/css">
        </style>
    </head>
    <body>
    
    <script type="text/javascript" src="./require.js"></script>
    <script type="text/javascript">
      require.config({ 
          shim:{ 
              'main1':{ 
                  deps: ['main2']
              }
          }
      });
        require(['main'],function(main){ 
            console.log(main.num);
        });
    </script>
    </script>
    </body>
    </html>

    main.js:

    define(['main1','main2'],function(main1,main2){ 
        console.log('module of main:');
        main1.say();
        main2.say();
        return {num:10};
    });

    这时的结果:

    上面提到了requirejs也更新了遵循CMD规范的策略,但表面上遵循了,本质上还是AMD的

    为什么这么说呢? 引自:

    所以要用requirejs就老老实实使用AMD的,如果想使用CMD的方式,就用seajs吧

  • 相关阅读:
    python爬虫笔记(3-1)re模块
    python爬虫笔记(2-2)xpath解析实例
    python爬虫笔记(2-1)Xpath解析
    python爬虫笔记(1-2)requests模块实例
    python爬虫笔记(1-1)requests模块:请求数据获取响应内容
    小程序上传图片,放大,删除。
    小程序中多个echarts折线图在同一个页面的使用
    vue传值 ---- >> 子传父,$emit()
    vue传值 ---- >> 父传子,props()
    离线webpack创建vue 项目
  • 原文地址:https://www.cnblogs.com/imwtr/p/4666176.html
Copyright © 2011-2022 走看看