Javascript中AMD规范下requirejs实现模块化编程

最新推荐文章于 2022-04-15 11:19:41 发布

水星灭绝

最新推荐文章于 2022-04-15 11:19:41 发布

阅读量274

点赞数

分类专栏： h5 前端

本文链接：https://blog.csdn.net/wulong710/article/details/113986904

版权

JS中模块化编程方法，就用实现了AMD规范的requireJS做例子。

在html中加入引入require.js的代码

my.html中data-main后面跟随的就是我的入口JS，相当于其它语言中的main

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <h3>title1：</h3>
    <p id="idempty"></p>
    <h3>title2：</h3>
    <p id="idmymath"></p>
    <h3>title3：</h3>
    <p id="idmyson"></p>
    <h3>title4: </h3>
    <p id=idgirl></p>
    <script src="require.js" defer async="true" data-main="src/my.js">
    </script>

</body>

</html>

info.js

define(function () {
    var age = function (x) {
        return "年纪:" + x;
    }

    return {
        age: age
    };
});

girl.js

//使用了info模块
define(["info"],function (info) {
    var show = function (x) {
        return "girl.show  " + info.age(x);
    };

    return {
        show: show
    };
});

myson.js

define(function () {
    var show = function (x) {
        return "name + " + x;
    };
    return {
        show: show
    };
});

mymath.js


define(function(){
    var add = function(x,y){
        return x+y;
    };

    return{add:add};
});

my.js

//空模块依赖
require([], function () {
    document.getElementById("idempty").innerHTML = "require测试直接加载";
});

//同一目录下依赖
require(["mymath"], function (mymath) {
    document.getElementById("idmymath").innerHTML = " mymath = " + mymath.add(83, 3);
});


//直接paths定位模块位置
require.config({
    baseUrl: "src",
    paths: {
        "girl": "neighbor/girl",
        "myson": "children/myson",
        "info": "util/info"

    }
});

require(["girl", "myson"], function (girl, myson) {
    document.getElementById("idgirl").innerHTML = "g " + girl.show(83);

    document.getElementById("idmyson").innerHTML = "son " + myson.show("sssson");

})

点击my.html浏览器中看执行结果

1.模块写法

参考：http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。（正在制定中的ECMAScript标准第六版，将正式支持"类"和"模块"，但还需要很长时间才能投入实用。）

Javascript社区做了很多努力，在现有的运行环境中，实现"模块"的效果。本文总结了当前＂Javasc

最低0.47元/天解锁文章

水星灭绝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript中AMD规范下requirejs实现模块化编程

JS中模块化编程方法，就用实现了AMD的requireJS做例子。下载requireJS放到项目根目录下在html中加入引入require.js的代码my.html中data-main后面跟随的就是我的入口JS，相当于其它语言中的main<!DOCTYPE html><html><head></head><body> <h3>title1：</h3> <p id=".
复制链接

扫一扫