背景

FA框架大量使用了requrieJS。要理解框架如何使用的，代码藏得比较深，不易于理解。
本案例就脱离FA框架，没有一行框架的代码，基于requireJS从零实现一个简单的功能，包括：
1、演示一：封装一个模块，实现两位数的加法。输入数字，就实时显示计算结果。
2、演示二：封装一个模块，实现输入什么文字，就显示:机器人回复：您好，我是飞哥。我收到你的消息：XXX
html

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>requireJs加载原理</title>
</head>
<body>
    <h1>requireJs加载原理</h1>

    <h2>演示一：调用math.js的函数</h2>
    <br/>
    <div>
        <span>第一个数</span>
        <input id="num1" type="text" value=""/>
    </div>
    <div>
        <span>第二个数</span>
        <input id="num2" type="text" value=""/>
    </div>
    <div>
        <span>求和：</span>
        <span id="result"></span>            
    </div>

    <h2>演示二：调用sayhi.js的函数</h2>
    <br/>
    <div>
        <span>输入文字</span>
        <input id="msg" type="text" value=""/>
    </div>

    <div>
        <span>机器人回复：</span>
        <span id="reply"></span>      
    </div>
    
</body>

主js

就是上面data-main="main"执行是main.js

require.config({

baseUrl: "js", // 指定根目录。表示本main.js文件的相当路径下的js文件夹为根目录
paths: { 
    'jquery': '/assets/libs/jquery/dist/jquery.min',  //如果不具体到js后缀，默认或加上js后缀的
    'feige_robot': 'sayhi'//特意演示：给sayhi.js文件起了个别名feige_robot。
}

});

//注意require函数第一个入参是数组，里面的元素表示要加载的js文件。
//先到require.config中的paths配置找路径，找不到再到根目录找。
//例如如下的jquery、feige_robot在paths中配置了路径，就会从这些路径加载对应的js文件
//例如如下的math在paths中没有配置路径，就会从根目录找,就会找到js/math.js
require(['jquery', 'feige_robot','math'], function($, feige_robot,math) {

$("#num1").keyup(function() {
    var num1 = $("#num1").val();
    var num2 = $("#num2").val();
    if(num1=="") num1 = 0;
    if(num2=="") num2 = 0;

    //调用了math的函数
    var result = math.add(num1, num2);
    $("#result").text(result);
})

$("#num2").keyup(function() {
    var num1 = $("#num1").val();
    var num2 = $("#num2").val();
    if(num1=="") num1 = 0;
    if(num2=="") num2 = 0;

    //调用了math的函数
    var result = math.add(num1, num2);
    $("#result").text(result);
})

$("#msg").keyup(function() {
    var msg = $("#msg").val();

    //调用了feige_robot的函数
    var reply = feige_robot.say(msg);
   
    $("#reply").text(reply);
})

})

从以上的代码，可以看出加载了如下的模块'jquery', 'feige_robot'（其实就是下面的模块二：sayhi.js，feige_robot是起来个别名）,'math'（其实就是下面的模块一：math.js）。
加载了这些模块后，在函数里就可以直接调用模块暴露出来的方法，例如math.add(num1, num2)或者feige_robot.say(msg)。
模块一：math.js

define(function (){

var add = function (x,y){    
    //x 字符转数字
    x = parseFloat(x);
    //y 字符转数字
    y = parseFloat(y);
    return x+y;    
};

return {    
    add: add
};

});

模块二：sayhi.js

define(function (){

var say = function (msg){    
    return "您好，我是飞哥。我收到你的消息："+msg;    
};

return {    
    say: say
};

});

运行效果

image.png

标签: none

添加新评论