手机版
你好,游客 登录 注册
背景:
阅读新闻

应用require.js进行JavaScript模块化编程实例

[日期:2017-04-15] 来源:Linux社区  作者:leftfist [字体: ]

长久以来都渴望应用JavaScript的模块化编程。今日紧迫更甚,岁月蹉跎,已经不能再等了。最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。

下面的网页代码,相信很多人都见过。

  <script src="1.js"></script>
  <script src="2.js"></script>
  <script src="3.js"></script>
  <script src="4.js"></script>
  <script src="5.js"></script>
  <script src="6.js"></script>

这段代码依次加载多个js文件。

这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

一试之下,果然走了一些弯路,加深了理解。

一、下载require.js
http://requirejs.org/docs/download.html

二、编写相应测试代码。计有:
页面:/index.html
主体结构定义JS:/main.js
符合AMD规范的模块化JS:

/js/amd/module-A.js
/js/amd/module-B.js

传统意义上的,不符合AMD规范、非模块化的JS

/js/noamd/file-C.js

这里写图片描述

代码如下:

//module-A.js
//define方法,应该是在require.js定义的。这也是AMD规范的内容之一
define(function (){
    var add = function (x,y){
        return x + y;
    };
    return {
        add: add
    };
});
//module-B.js
//依赖于moduleA
define(['moduleA'], function(ma){
    function compute(x,y){
        return ma.add(x,y);
    }
    return {
        compute : compute
    };
});
//这是一个传统意义上,非AMD规范的JS;但是,还是要符合一定的规范:需要返回一个对象,以便在main.js里进行exports,然后外部才能进行使用(使用这个对象里面的方法)。
var objectC = (function(){
    function multiply(x,y){
        return x * y;
    }
    return {
        multiply:multiply
    }
})();

至关重要的main.js

//main.js
//重点在于如何映射非规范模块
require.config({
    baseUrl: "js",
    shim: {
        'moduleC': {
            deps: [],
            exports: 'objectC'//这个名字,跟file-C.js里的"var objectC=..." 对应
        }
    },
    paths: {
        "moduleA": "amd/module-A",
        "moduleB": "amd/module-B",
        "moduleC": "noamd/file-C"//非规范化文件这一步也是要的,并非单单在shim里定义了就行
    }
});

应用require.js进行JavaScript模块化编程实例

瞪灯瞪等!且看如何应用:
index.html

<!DOCTYPE html>

<html>
<head>
    <script src="require.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <script type="text/javascript">
        require(['moduleB','moduleC'], function (moduleB,moduleC){
            alert(moduleB.compute(3,4));//7
            alert(moduleC.multiply(3,4));//12
    });
    </script>
</body>
</html>

本文永久更新链接地址http://www.linuxidc.com/Linux/2017-04/142812.htm

linux
相关资讯       JavaScript模块化编程  require.js 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款