AOP 在javascript 中的使用

清单 1. 一个简单的 HTML 表单
 <form action="/test.jsp" method="post"> 
        <input type=”text” name=”username” /> 
        <input type="submit" /> 
 </form>
这是一个最简单的 form 表单，看起来没什么问题。但在低速网络环境下，心急的浏览者没耐心等待，很可能会重复提交表单，如图 1。

作为一个 Web 开发者，我们是绝对不希望浏览者重复提交表单的，这时您可能会想到以下方案
清单 2. 表单提交时禁用 submit 按钮
 <form action="/test.jsp" method="post"> 
        <input type=”text” name=”username” /> 
        <input type="submit" onClick="this.disabled=true;" /> 
 </form>
很好，问题解决了，点击“提交”按钮同时该按钮也被禁用了，这样浏览者就不能重复提交了。
可是，如果您的工程很大，有成百上千个页面，每个页面都有一段类似的代码，难道您还独自编辑吗？如果有一天要在按钮 disabled 之前 alert 一个提示信息，那您还不抓狂？

 // 这就是我们要实现的通知 function 
 function disableFormSubmitButton(){ 

        // 首先获取要操作的 DOM 对象 ( 织入点 )，我们需要拦截所有 form，代码如下 $("form") 
        // 因为一个页面可能会有多个 <form>，所以这里需要遍历
        $("form").each(function(i, v){ 
                // 原 submit 事件函數，备份成 _ invokesubmit，
                //_invokesubmit 是随便起的名字，充分利用了 javascript 的动态特性。 
                v._invokesubmit = v.onsubmit ; 
                // 替换原 submit 事件函數
                v.onsubmit = function(){ 
                    // 禁用提交表单按钮 
                $(this).find(“input[type= ‘submit‘]”).prop(“disabled”, true);
                v._invokeprocess();// 调用备份的 submit 事件函数 
                }; 
        }); 
 }

  Cat.prototype = {
        food: "fish",
        say: function(){
            alert("i like " + this.food);
            return this;
        },
        after: function(func){
            func.call(this);
        },
        before: function(func){
            func.call(this);
            return this;
        }

    };

    var cat = new Cat()
    Dog = {food: "bone"};
    cat.before(function(){
        alert("before" + this.food);
    }).say().after(function(){
        alert("after" + this.food);
    })