zoukankan      html  css  js  c++  java
  • 学习require.js中的一些总结

    最近学习了一下requirejs,对照官方文档和阮一峰大神的博客Javascript模块化编程(三):require.js的用法,学到了基本的用法,以下是我的一些总结和补充

    基本用法看官方文档和阮一峰大神的博客就可以了,我这里写一下感觉要注意的地方。

    (1)require.config({...})中的shim,官方文档中的解释是:为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。

      其实就是帮助我们以AMD模块的方式,使用那些不符合AMD规范的模块。有如下代码:

    require.config({
    
        shim:{
    
          'underscore':{         //'underscore'需要和paths中定义的别名一致,若underscore.js在BaseUrl目录下,则不用设置paths。后面的backbone也一样
    
            exports:'_'
    
          },
    
          'backbone':{
    
            deps:['underscore','jquery'],
    
            exports:'Backbone'
    
          }
    
        }
    
      });

      使用的时候:

      

    requirejs(['underscore','backbone'],function(_,Backbone){    // 'underscore'和'backbone'和paths中设置的别名一致
    
      ......
    
      })

      有两个属性,deps和exports,exports是模块的返回值,exports的值,一定要与JS库中暴露出的全局变量名称一致。显然,

      'underscore'与'backbone'这两个模块的返回值,就是这两个框架(underscore.js和backbone.js)暴露出的全局变量'_'和'Backbone'。

    (2)map的用法

      官方文档解释map:对于给定的模块前缀,使用一个不同的模块ID来加载该模块。

        该手段对于某些大型项目很重要:如有两类模块需要使用不同版本的"foo",但它们之间仍需要一定的协同。

       在那些基于上下文的多版本实现中很难做到这一点。而且,paths配置仅用于为模块ID设置root paths,而不是为了将一个模块ID映射到另一个。

      map示例:

      如果各模块在磁盘上分布如下:

    • foo1.0.js
    • foo1.2.js
    • some/
      • newmodule.js
      • oldmodule.js
    代码:
    requirejs.config({
        map: {
            'some/newmodule': {
                'foo': 'foo1.2'
            },
            'some/oldmodule': {
                'foo': 'foo1.0'
            }
        }
    });


      当“some/newmodule”调用了“require('foo')”,它将获取到foo1.2.js文件;而当“some/oldmodule”调用“`require('foo')”时它将获取到foo1.0.js。

    该特性仅适用于那些调用了define()并将其注册为匿名模块的真正AMD模块脚本。并且,请在map配置中仅使用绝对模块ID,“../some/thing”之类的相对ID不能工作。

    另外在map中支持“*”,意思是“对于所有的模块加载,使用本map配置”。如果还有更细化的map配置,会优先于“*”配置。示例:

    requirejs.config({
        map: {
            '*': {
                'foo': 'foo1.2'
            },
            'some/oldmodule': {
                'foo': 'foo1.0'
            }
        }
    });

    意思是除了“some/oldmodule”外的所有模块,当要用“foo”时,使用“foo1.2”来替代。对于“some/oldmodule”自己,则使用“foo1.0”。

      

      

      

      

  • 相关阅读:
    vue element 表格错位问题
    echarts tooltip 按值的降序显示 tip 信息
    前端 玫瑰花小样式
    echarts X轴数据过多批量显示
    微信js sdk的使用初步理解
    对象 的循环嵌套
    移动端拉起电话请求
    js后加版本号
    数组排序于数组去重
    es6数组的方法
  • 原文地址:https://www.cnblogs.com/xiaodongaini/p/4956706.html
Copyright © 2011-2022 走看看