使用 Require.js 引用第三方框架时遇到的一些情况

使用 Require.js 引用第三方框架时遇到的一些情况

在使用Require.js解析依赖的时候,会出现以下几种情况:

程序中的依赖关系 当前程序 依赖于 B包B包 依赖于 A包

  1. A包与B包两者都支持AMD,此时不需要任何操作:

     //B.js
    define(['A'],function(a){
    //code in module B
    })
  2. A包与B包两者都不支持AMD,此时,有以下两种解决方案:

    1. 修改库,使之支持AMD(这也是Sea.js中让人深恶痛绝的一点)

    2. 使用Shim的deps和exports,此时全局变量依然可用,这样可以防止出现奇怪的依赖问题

         //main.js
      require.config({
      //other configurations
      shim{
      'B':{
      deps:['A'],
      exports:'B'
      },
      'A':{
      exports:'A'
      }
      }
      }); //B.js
      var B = new function(){
      var a = new A();
      //code for B
      } //A.js
      var A = new function(){
      //code for A
      }
  3. A包不支持AMD,而B包支持AMD,此时只需要用shim把A包导入到require环境中,不需要任何其他操作。

  4. A支持AMD,而B包不支持AMD,这个时候,由于在引用的时候监测到为AMD的环境,

    所以有的框架就不会创建全局变量了,而B包并不支持AMD,它还是使用的全局变量,

    这个时候,就会出现无法引用的情况了。解决方案也很简单。就是在B包的shim配置中,

    加上init方法,并在init里将A包的变量设置成全局的:

     //main.js
    require.config({
    //other configurations
    shim{
    'B':{
    deps:['A'],
    exports:'B',
    init:function(A){
    window.A = A;
    }
    }
    }
    });

在引用angular.js的时候,需要在对应的html页面中把ng-app去掉,而在声明完angular模块的时候,

使用angular.bootstrap手动启动angular才行,否则会报错,特别是在与其他模块同时使用的时候。

    //myapp.js
require(['angular','jquery'],function(angular,$){
var app = angular.module('MyApp', []);
//your code in module
angular.bootstrap(document,['MyApp']);
});

以上就是我初次使用requirejs管理包的时候出现的一些问题。

上一篇:纯css 实现 三角形、梯形等 效果


下一篇:[Locked] Count Univalue Subtrees