zoukankan      html  css  js  c++  java
  • require.js扫盲版

    Javascript模块规范有两种:commonJs和AMD

    commonJs起源于nodeJs。nodeJs标志着模块化编程正式诞生。在commonJs中,有一个全局性方法require(),应用于加载模块

    举例---require()主要用于加载模块

    var math = require('math');
    math.add(2,3); // 5

    问题:越来越多的项目采用“模块化”,但是,对于浏览器而言,所有的模块化的语言都放置在---服务器端,页面的渲染取决于网速的快慢。如果待加载的数据过多,会导致浏览器处于假死的状态。所以:异步加载应时而生

    AMD规范:它采用异步加载模块,模块的加载不影响后面的语句的运行,所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完,这个回调函数才会运行

      require([module], callback);
    
       require(['math'], function (math) {
    
        math.add(2, 3);
    
      });

    解释上面的函数:math这个模块加载完毕,才会执行math.add这个函数。所以,浏览器就不会产生假死的状态

    require.js出现的原因

    1):实现js文件的异步加载,避免网页失去响应

    2):管理模块之间的依赖性,便于代码的编写和维护

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

    加载完全部的require之后,就要加载我们自己编写的代码---main.js

    data-main 属性的作用:指定网页程序的主模块,指定的文件会第一个被requireJs加载。主模块--顾名思义:整个网页代码的入口

    requireJs常用的方法和命令

    require.config({});  我们对模块的加载行为进行自定义。path:表示指定各个模块的加载路径。

       require.config({
        paths: {
          "jquery": "jquery.min",
          "underscore": "underscore.min",
          "backbone": "backbone.min"
    
        }
    
      });

    2.模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数中,如果还依赖于其他的模块,那么define()函数的第一个参数,必须是数组,指明该模块的依赖性,于是先加载myLib.js这个文件

        define(['myLib'], function(myLib){
        function foo(){
          myLib.doSomething();
        }
        return {
          foo : foo
        };
      });

    加载非规范的模块

    requireJs能加载非规范的模块。如果要加载它们,必须先定义它们的特征。

     require.config({
        shim: {
          'underscore':{
            exports: '_'
          },
          'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
          }
        }
      });

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

     

  • 相关阅读:
    脱发
    jquery radio 选择值
    今天看了非诚勿扰记忆哥,觉得人和人还是差的是能力
    如果要在数组中删除东西还是用倒序的数是正确的
    jquery操作 xml
    偶然在一个帖子上看到的
    jquery 队列的应用
    阅读
    Request的getParameter和getAttribute方法的区别
    jsp与jspx文件
  • 原文地址:https://www.cnblogs.com/donglt-5211/p/10273733.html
Copyright © 2011-2022 走看看