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

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

慣例安利一波我的后端 php 直播課。
很多工程師在工作1~3年的時(shí)候最容易遇到瓶頸，不知道自己應(yīng)該學(xué)習(xí)什么，面試總是吃閉門(mén)羹。那么 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ò)展開(kāi)發(fā) - 行內(nèi)回調(diào) https://mengkang.net/demo/rai...

項(xiàng)目中經(jīng)?？吹筋愃朴谙旅孢@樣的 a 鏈接的請(qǐng)求，而點(diǎn)擊的時(shí)候，實(shí)際發(fā)送的是 ajax 請(qǐng)求，而沒(méi)有發(fā)生跳轉(zhuǎn)。

刪除

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

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

$("#del_btn").bind("click", function () {
  if (confirm("確定要?jiǎng)h除？")) {
    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寫(xiě)在行內(nèi)的方式來(lái)擴(kuò)展該工具。

雖然點(diǎn)擊還是跳轉(zhuǎn)，但是通過(guò)控制臺(tái)可以看到，該請(qǐng)求是 post 的方式，我們自定義的 rails 插件給代理了 click 為一個(gè) form 的 post 請(qǐng)求。

    
    
    
    


    刪除

代碼演示 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 請(qǐng)求。

    
    
    
    


  刪除

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

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

這個(gè)事件是如何觸發(fā)的呢？實(shí)際是在發(fā)送 ajax 里面使用trigger來(lái)觸發(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ù)端開(kāi)發(fā)，才有了這個(gè)需求（反正作為一個(gè)服務(wù)端渲染的模板，不想又去專門(mén)弄前端項(xiàng)目，更愿意直接在模板里修改）

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

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

配合trigger來(lái)使用，兩個(gè)參數(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...

    
    
    
    



    刪除 - 刪掉整個(gè) div

    輸出接口里返回的error_code