使用 JavaScript 进行元编程

软件技术 前端
1

Adam McCrea 写了篇使用 JavaScript 进行元编程的文章: Metaprogamming JavaScript。

该文用一个例子来说明元编程。例子很简单，一个 Form 包中两个下拉列表 country 和 state，业务需求是 country 下拉列表中选中“United States”则要显示 state 列表，否则隐藏该下拉列表。处理该逻辑的代码如下：Event.observe(window, “load”, function() { Event.observe($(”country”), “change”, function() { if ($F(”country”) == “United States”) $(”state-field”).show(); else $(”state-field”).hide(); }); });这里用到的对象和方法是 Prototype 对 JavaScript 的扩展。Prototype 是旨在简化动态 Web 程序开发的 JavaScript Framework. 详见 [url]http://www.prototypejs.org/[/url]。

在上面代码中：Event.observe 在IE下相当于 attachEvent，用于注册事件处理函数。这是注册了 window.onload 和 country.onchange 事件处理程序。

$() 是 document.getElementById() 的别名。$F() 会取出 form 中元素当前值。show() 和 hide() 是在 html 元素上增加的方法。

通过 prototype 在 html 元素基础上扩展了很多方法。如果想运行上面代码，需要下载 prototype.js 并放置在 html 页面相同目录。完整代码如下：[code]

Metaprogramming JavaScript - Example 1 function show(fieldToDisplay){ return { when : function(field){ return { is: function(value){ if($F(field) == value){ $(fieldToDisplay).show(); } else{ $(fieldToDisplay).hide(); } } } } }; }; 
        Event.observe(window, “load”, function() {

            Event.observe($(”country”), “change”, function() {
                show(”us-state-field”).when(”country”).is(”United States”);
            });

        });

    </script>
</head>

<body>
    <form>
        <p id=”country-field”>
            <label for=”country”>Country</label>
            <select id=”country”>
                <option>United States</option>
                <option>Canada</option>
                <option>Somewhere Else</option>
            </select>
        </p>

        <p id=”us-state-field”>
            <label for=”state”>State</label>
            <select id=”us-state”>
                <option>Ohio</option>
                <option>Michigan</option>
                <option>Kentucky</option>
            </select>
        </p>
    </form>
</body>
[/code]