教你5分钟学会用requirejs(必看篇)

时间 2019-11-09

原文原文链接

requirejs是干啥的啊？html

曾经，咱们将一些js组件放到不一样的文件，而后经过script标签引入，若是几个组件有依赖，那么要当心了，你必须将被依赖的放到前面，不然的话会出现啥啥啥is undefined或者啥啥啥is not a function之类的错误。好比一个jquery的插件显然是依赖jquery核心库的，因此jquery核心库文件必须先引入。项目小组件少依赖简单还好，要是项目大组件多依赖复杂就糟糕了。咋办？用requirejs啊！java

只要按照requirejs规范写，他会从一个根开始检查依赖，根据这些依赖关系自动的帮助咱们插入script标签，很棒，对不对？这样依赖咱们不就不再用纠结哪一个标签应该放在前，哪一个该放在后了吗？node

requirejs咋用啊？jquery

请记住使用requirejs的口诀，两函数一配置一属性数组

data-main属性app

requirejs须要一个根来做为搜索依赖的开始，data-main用来指定这个根。函数

1requirejs

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

这里就指定了根是app.js,只有直接或者间接与app.js有依赖关系的模块才会被插入到html中。

require.config() 配置

经过这个函数能够对requirejs进行灵活的配置，其参数为一个配置对象，配置项及含义以下：

baseUrl——用于加载模块的根路径。

paths——用于映射不存在根路径下面的模块路径。

shims——配置在脚本/模块外面并无使用RequireJS的函数依赖而且初始化函数。假设underscore并无使用 RequireJS定义，可是你仍是想经过RequireJS来使用它，那么你就须要在配置中把它定义为一个shim。

deps——加载依赖关系数组

require.config({
  //默认状况下从这个文件开始拉去取资源
 baseUrl:'scripts/app',
  //若是你的依赖模块以pb头，会从scripts/pb加载模块。
 paths:{
  pb:'../pb'
 },
 // load backbone as a shim，所谓就是将没有采用requirejs方式定义
 //模块的东西转变为requirejs模块
 shim:{
  'backbone':{
   deps:['underscore'],
   exports:'Backbone'
  }
 }
});

该函数用于定义模块。形式以下。define()函数

//logger.js
 define(["a"], function(a) {
 'use strict';
 function info() {
  console.log("我是私有函数");
 }
 return {
  name:"一个属性",
  test:function(a){
   console.log(a+"你好！");
   a.f();
   info();
  }
 }
});

* 第一个是一个字符串数组，表示你定义的模块依赖的模块，这里依赖模块a;define函数就受两个参数。

* 第二个参数是一个函数，参数是注入前面依赖的模块，顺序同第一参数顺序。在函数中可作逻辑处理，经过return一个对象暴露模块的属性和方法，不在return中的能够认为是私有方法和私有属性。

require()函数

该函数用于调用定义好的模块，能够是用define函数定义的，也能够是一个shim。形式以下：

//app.js
require(['logger'], function (logger) {
logger.test("大熊");
console.log(logger.name);
});
//输出结果：
//大熊你好！
//不肯定（取决于a模块的f方法）
//我是私有函数
//一个属性

实战练习一下

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script src="../js/libs/require.js" data-main="index.js"></script>
</body>
</html>

index.js

require.config({
//By default load any module IDs from js/
    baseUrl: 'js',
//except, if the module ID starts with "pb"
    paths: {
        "cat":"cat",
        "test_define":"test_define",
    },
    shim: {
        'test_define': {
            deps:['test_nodefine'],
            // use the global 'Backbone' as the module name.
            exports: 'test_define'
        }
    }
});
require(['cat','test_define'], function (cat,test_define) {
    test_define.test();
    cat.say();
});

animal.js

define([], function() {
    'use strict';
    function _showName(name){
        console.log(name);
    }
    return {
        say(words){
            console.log(words);
        },
        showName(name){ //练习私有方法
            _showName(name);
        }
    }
});

cat.js

//这个animal是引用的文件路径
define(['animal'], function(animal) {
    'use strict';
    return {
        say(){
            animal.say("cat say");
            animal.showName("cat showName");
        }
    }
});

define中能够调用非define中的内容，要在index.js中shim定义

test_define.js

define(["/libs/jquery"], function() {
    'use strict';
    return {
        test(){
            noDefine();
        }
    }
});

test_nodefine.js

window.noDefine = function() {
    console.log("this no define function!");
}