码迷,mamicode.com
首页 > Web开发 > 详细

require.js扫盲版

时间:2019-01-15 19:32:28      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:语句   exports   script   asc   path   模块化编程   efi   class   math   

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数组,表明该模块的依赖性。

 

 

require.js扫盲版

标签:语句   exports   script   asc   path   模块化编程   efi   class   math   

原文地址:https://www.cnblogs.com/donglt-5211/p/10273733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!