require.js

requirejs的作用:

1.实现js文件的异步加载,防止页面失去响应;
2.管理模块与模块之间的依赖性,以便于开发人员的编写与维护

 如何引用

方式一,放在网页底部进行加载

方式二,

<script src="js/require.js" defer async="true"></script>

如何加载自己的文件

如果我们的文件为main.js

<script src="js/require.js" data-main="js/main"></script>

 如何编写主模块

1.不依赖其他模块
直接写js代码
2.依赖其他模块
require(['A','B', 'C'], function(A, B, C)){ //类似于angularjs中的DI依赖注入
    //
});    

require()函数有两个参数,第一个参数是数组,为所依赖的模块;第二个参数为回调函数,当前面指定的模块都加载成功后,它将会被调用,加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

加载模块

require.config({
   paths: {
      "jquery": "jquery.min",
    "underscore": "underscore.min",
    "backbone": "backbone.min"    
   } 
});
路径可以直接改变基目录baseUrl,也可直接指定网址。
这个配置写在main.js头部

如何编写AMD模块

1.如果不依赖其他模块,那么可直接定义在define()函数中
 // math.js
  define(function (){
    var add = function (x,y){
      return x+y;
    };
    return {
      add: add
    };
  });
   加载方式
      // main.js
  require(['math'], function (math){
    alert(math.add(1,1));
  });
2.如果这个模块还依赖其他模块,那么define()函数的第一个参数须是一个数组,致命该模块的依赖性
  define(['myLib'], function(myLib){
    function foo(){
      myLib.doSomething();
    }
    return {
      foo : foo
    };
  });

加载非规范的模块

  require.config({
    shim: {

      'underscore':{
        exports: '_'
      },
      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }
    }
  });

require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块,具体来说,每个模块要定义,exports值输出的变量名,表明这个模块外部调用时的名称,deps数组,表明该模块的依赖性。

原文地址:https://www.cnblogs.com/fire-passiontao/p/5969609.html