摘要：確定要刪除嗎刪除演示不是說它有多么復雜，而是我真真切切感受到了它的高效，非常舒服的抽象了模板嵌套中的一些常用的交互。刪除代碼演示例子中中是命名空間。刪除代碼演示綁定到做回調這個事件是如何觸發的呢實際是在發送里面使用來觸發。

sf 上前端大牛太多，本人前端菜鳥，總結歸納，覺得內容不錯就總結分享之。

慣例安利一波我的后端 php 直播課。
很多工程師在工作1~3年的時候最容易遇到瓶頸，不知道自己應該學習什么，面試總是吃閉門羹。那么 PHP 后面應該怎么學呢？《PHP 進階之路》

原文地址 https://mengkang.net/1145.html
項目地址 https://github.com/rails/jque...

演示 jquery-ujs https://mengkang.net/demo/rails/

原理解析 - 代理表單提交 https://mengkang.net/demo/rai...

原理解析 - 實現 ajax 提交 https://mengkang.net/demo/rai...

擴展開發 - 行內回調 https://mengkang.net/demo/rai...

項目中經常看到類似于下面這樣的 a 鏈接的請求，而點擊的時候，實際發送的是 ajax 請求，而沒有發生跳轉。

刪除

演示 https://mengkang.net/demo/rails/

不是說它有多么復雜，而是我真真切切感受到了它的高效，非常舒服的抽象了模板嵌套中的一些常用的交互。避免了重復編寫類似于下面這樣的代碼：

$("#del_btn").bind("click", function () {
  if (confirm("確定要刪除？")) {
    var method = "/comments/destroy/908/";
    Ajax.sendData({
      type: "POST",
      url: method,
      async: false,
      dataType: "json",
      data: {},
      success: function (data, status, xhr) {
        if (data.state == "success") {
          location.href = "/articles/";
        } else {
          alert(data.msg);
        }
      },
      error: function (xhr, type, error) {
        console.log(error.toString());
      }
    });
  }
});

我們有可以在rails/jquery-ujs基礎上做更多的交互擴展，文章末尾我們將把callback寫在行內的方式來擴展該工具。

雖然點擊還是跳轉，但是通過控制臺可以看到，該請求是 post 的方式，我們自定義的 rails 插件給代理了 click 為一個 form 的 post 請求。

    
    
    
    


    刪除

代碼演示 https://mengkang.net/demo/rai...

例子中

$(document).on("click.rails", "a[data-remote]", function (e) {
  //...
});

click.rails中rails是命名空間。方便解除該事件。

http://api.jquery.com/on/
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
Any event names can be used for the events argument. jQuery will pass through the browser"s standard JavaScript event types, calling the handler function when the browser generates events due to user actions such as click. In addition, the .trigger() method can trigger both standard browser event names and custom event names to call attached handlers. Event names should only contain alphanumerics, underscore, and colon characters.
An event name can be qualified by event namespaces that simplify removing or triggering the event. For example, click.myPlugin.simple defines both the myPlugin and simple namespaces for this particular click event. A click event handler attached via that string could be removed with .off("click.myPlugin") or .off("click.simple") without disturbing other click handlers attached to the elements. Namespaces are similar to CSS classes in that they are not hierarchical; only one name needs to match. Namespaces beginning with an underscore are reserved for jQuery"s use.

在上面代碼的基礎上我們把data-remote參數利用上，如果data-remote設置為true則表示使用 ajax 請求。

    
    
    
    


  刪除

代碼演示 https://mengkang.net/demo/rai...

$document.on("ajax:success", ".js-comment-destroy", function() {
    return $(this).closest(".media").remove();
});

這個事件是如何觸發的呢？實際是在發送 ajax 里面使用trigger來觸發。

options = {
    success: function(data, status, xhr) {
        element.trigger("ajax:success", [data, status, xhr]);
    },
    complete: function(xhr, status) {
        element.trigger("ajax:complete", [xhr, status]);
    },
    error: function(xhr, status, error) {
        element.trigger("ajax:error", [xhr, status, error]);
    }
}

options.url = rails.href(element);
options.method = element.data("method");
options.data = element.data("params") || null;

$ajax.(options);

以自定義 callback 為例，我們直接把 callback 定義在 data-done屬性中。為了完全非侵入式的 JavaScript 服務端開發，才有了這個需求（反正作為一個服務端渲染的模板，不想又去專門弄前端項目，更愿意直接在模板里修改）

我們知道在 jquery 的on方法中回調函數的參數是支持無限多參數的，第一個參數event事件本身，后面都是自定義的任意內容

handler Type: Function( Event eventObject [, Anything extraParameter ] [, ... ] )
http://api.jquery.com/on/#on-... 中

配合trigger來使用，兩個參數演示

$( "div" ).on( "click", function( event, person ) {
  alert( "Hello, " + person.name );
});
$( "div" ).trigger( "click", { name: "Jim" } );

給trigger傳遞數組

$( "div" ).on( "click", function( event, salutation, name ) {
  alert( salutation + ", " + name );
});
$( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );

到這里我們就可以看到 jquery-ujs 在發送 ajax 的 options 里面設置了

options = {
    success: function(data, status, xhr) {
        element.trigger("ajax:success", [data, status, xhr]);
    },
    //...
}
//...
$ajax.(options);

那我們綁定到data-done上就是

$(document).on("ajax:success", "[data-done]", function(event, data, status, xhr) {
  //...
});

https://developer.mozilla.org...
https://developer.mozilla.org...

var obj = {
  person: "Douglas Crockford"
};

function funA() {
  console.log(this.person);
}

funA.call(obj);

function funB(arg1,arg2) {
  console.log(this.person,arg1,arg2);
}

funB.call(obj,1,2);

// new Function (arg1, arg2, ... argN, functionBody)
new Function("arg1","arg2","console.log(this.person,arg1,arg2)").call(obj,3,4);

代碼演示：https://mengkang.net/demo/rai...

    
    
    
    



    刪除 - 刪掉整個 div

    輸出接口里返回的error_code