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

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

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

原文地址 https://mengkang.net/1145.html
項(xiàng)目地址 https://github.com/rails/jque...

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

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

原理解析 - 實(shí)現(xiàn) ajax 提交 https://mengkang.net/demo/rai...

擴(kuò)展開發(fā) - 行內(nèi)回調(diào) https://mengkang.net/demo/rai...

項(xiàng)目中經(jīng)常看到類似于下面這樣的 a 鏈接的請求，而點(diǎn)擊的時候，實(shí)際發(fā)送的是 ajax 請求，而沒有發(fā)生跳轉(zhuǎn)。

刪除

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

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

$("#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基礎(chǔ)上做更多的交互擴(kuò)展，文章末尾我們將把callback寫在行內(nèi)的方式來擴(kuò)展該工具。

雖然點(diǎn)擊還是跳轉(zhuǎn)，但是通過控制臺可以看到，該請求是 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.

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

    
    
    
    


  刪除

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

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

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

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 服務(wù)端開發(fā)，才有了這個需求（反正作為一個服務(wù)端渲染的模板，不想又去專門弄前端項(xiàng)目，更愿意直接在模板里修改）

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

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

配合trigger來使用，兩個參數(shù)演示

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

給trigger傳遞數(shù)組

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

到這里我們就可以看到 jquery-ujs 在發(fā)送 ajax 的 options 里面設(shè)置了

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