zoukankan      html  css  js  c++  java
  • 应用require.js进行javascript模块化编程小试一例

    长久以来都渴望应用javascript的模块化编程。今日紧迫更甚,岁月蹉跎,已经不能再等了。

    拜读阮一峰的有关文章已经好几遍,文章写得真好,简洁流畅,头头是道,自觉有点明白了。但经验告诉我们,一定要亲手试一试。

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

    一、下载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里定义了就行
        }
    });

    这里写图片描述

    瞪灯瞪等!且看如何应用:
    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>

    参考文章:

    Javascript模块化编程(三):require.js的用法

    基于gulp requirejs rjs的前端自动化构建系列文章(二)

  • 相关阅读:
    HDU 1086 You can Solve a Geometry Problem too(水题,判断线段相交)
    2011ACM福州网络赛第一题 A Card Game(水题)
    Lottery hdu1099
    卡特兰数 ACM 数论
    (转)CXF的Exception问题
    简单PS合成图像(抹去某个人等)
    摄影技巧
    PS中文字变形
    螺旋阵(递归和非递归)
    路径与滤镜和自定义工具
  • 原文地址:https://www.cnblogs.com/leftfist/p/6808650.html
Copyright © 2011-2022 走看看