在线 demo

演示 jquery-ujs

原理解析 - 代理表单提交

原理解析 - 实现 ajax 提交

扩展开发 - 行内回调

项目中经常看到类似于下面这样的 a 链接的请求，而点击的时候，实际发送的是 ajax 请求，而没有发生跳转。

删除

演示

不是说它有多么复杂，而是我真真切切感受到了它的高效，非常舒服的抽象了模板嵌套中的一些常用的交互。避免了重复编写类似于下面这样的代码：

$("#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写在行内的方式来扩展该工具。

原理分析

A 链接实现表单的提交

虽然点击还是跳转，但是通过控制台可以看到，该请求是 post 的方式，我们自定义的 rails 插件给代理了 click 为一个 form 的 post 请求。

    
        Title            删除

代码演示

例子中

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

click.rails中rails是命名空间。方便解除该事件。

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.

实现 A 链接的 ajax 请求

在上面代码的基础上我们把data-remote参数利用上，如果data-remote设置为true则表示使用 ajax 请求。

    
        Title          删除

代码演示

绑定到 ajax:success 做回调

$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 服务端开发，才有了这个需求（反正作为一个服务端渲染的模板，不想又去专门弄前端项目，更愿意直接在模板里修改）

准备知识之 trigger + on

我们知道在 jquery 的on方法中回调函数的参数是支持无限多参数的，第一个参数event事件本身，后面都是自定义的任意内容

handler Type: Function(
Event eventObject [,
Anything extraParameter ] [, ... ] )

中

配合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) {  //...});

准备知识之 new Function() + call

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);

实现 data-done 回调

代码演示：

    
        Title        
        
     删除 - 删掉整个 div    
     输出接口里返回的error_code

转载地址：http://fgpdl.baihongyu.com/

你可能感兴趣的文章