zoukankan      html  css  js  c++  java
  • 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数组,表明该模块的依赖性。

  • 相关阅读:
    挂载银行前置机Ukey到windows server2012虚拟机的操作记录
    LVS负载均衡下session共享的实现方式-持久化连接
    Centos6.9下RabbitMQ集群部署记录
    Linux下绑定网卡的操作记录
    Redis Cluster集群知识学习总结
    Redis Cluster日常操作命令梳理
    android Unable to inflate view tag without class attribute
    java / android int类型如何判空?
    Android 倒计时按钮,倒计时发送短信验证码…
    Android 自定义View
  • 原文地址:https://www.cnblogs.com/fire-passiontao/p/5969609.html
Copyright © 2011-2022 走看看