LIls/jquery-ujsを使って非侵入的なjsテンプレートコードを作成します.

11561 ワード

javascript

sfの上で前端の大牛は多すぎて、私の前端の野菜の鳥、総括してまとめて、内容が良いと感じて総括して分かち合います.
恒例のアムウェイ一波は私の後端php生放送授業です.多くのエンジニアは1～3年働いていますが、ボトルネックに遭遇しやすいです.自分は何を勉強すべきか分かりません.面接はいつも門前払いをします.PHPの後はどうやって勉強すればいいですか?《PHP進級の道》
原文の住所https://mengkang.net/1145.html
プロジェクトのアドレスhttps://github.com/rails/jque...
オンラインデモ

デモjquery-ujshttps://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を行の中に書いて、このツールを拡張します.
原理分析
Aリンク実現フォームの提出
クリックしてもジャンプしても、コンソールで確認できます.この要求はpost方式で、clickのformとしてのpost要求をカスタマイズしました.




    
    Title
    
    
        (function ($) {
            'use strict';
            var rails;
            $.rails = rails = {
                linkClickSelector: 'a[data-remote]',
                href: function (element) {
                    return element[0].href;
                },
                handleMethod: function (link) {
                    var href = rails.href(link),
                        method = link.data('method'),
                        target = link.attr('target'),
                        form = $('<form method="post" action="' + href + '"></form>'),
                        metadataInput = '<input name="_method" value="' + method + '" type="hidden" />';

                    if (target) {
                        form.attr('target', target);
                    }

                    form.hide().append(metadataInput).appendTo('body');
                    form.submit();
                },
            };

            $(document).on('click.rails', rails.linkClickSelector, function (e) {
                var link = $(this);
                rails.handleMethod(link);
                return false;
            });
        })(jQuery);

コードデモンストレーション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 event s argment.jQuery will pass through the browser's standard JavaScript event types,caling the handler function when the browers segeners events due to uster.Inacter the.ingtrication.method can trigger both standar browser event names and custom event names to call atached handles.Event names shound only contain alphanumerics,undescore,and colon characters.
An event name can be qualifed 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 ateched viat string could with .off("click.myPlugin") or .off("click.simple") without disturing thereement thereares.only one name needs to match.Namespaces beginnning with an undersscore are reverved for jQuery's use.
Aリンクを実現するajax要求
上記のコードに基づいてdata-remoteパラメータを利用し、data-remoteがtrueに設定されているならば、ajax要求を使用することを表しています.




    
    Title
    
    
        (function ($) {
            'use strict';
            var rails;
            $.rails = rails = {
                linkClickSelector: ' a[data-remote]',
                href: function (element) {
                    return element[0].href;
                },
                isRemote: function(element) {
                    return element.data('remote') !== undefined && element.data('remote') !== false;
                },
                handleMethod: function (link) {
                    var href = rails.href(link),
                        method = link.data('method'),
                        target = link.attr('target'),
                        form = $('<form method="post" action="' + href + '"></form>'),
                        metadataInput = '<input name="_method" value="' + method + '" type="hidden" />';

                    if (target) {
                        form.attr('target', target);
                    }

                    form.hide().append(metadataInput).appendTo('body');
                    form.submit();
                },
                handleRemote: function(element) {
                    var options = {};

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

                    return $.ajax(options);
                }
            };

            $(document).on('click.rails', rails.linkClickSelector, function (e) {
                var link = $(this);

                if (rails.isRemote(link)) {
                    rails.handleRemote(link);
                }else{
                    rails.handleMethod(link);
                }
                return false;
            });
        })(jQuery);

コードデモンストレーションhttps://mengkang.net/demo/rai...
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);

拡張開発
カスタムcalbackを例にとって、私達は直接にcalbackをdata-done属性に定義します.完全に非侵入型のJavaScriptサービス開発のために、この需要がありました.(とにかくサービス側でレンダリングされたテンプレートとして、また先端項目を専門にいじりたくないです.直接テンプレートで修正したいです.)
知識のトリガー+onを用意します.
jqueryのon方法におけるコールバック関数のパラメータは無限多パラメータをサポートしていることを知っています.最初のパラメータeventイベント自体、後はすべてカスタマイズされた任意の内容です.
ハンドル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) {
  //...
});

知識のnew Function()+callを準備します.
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);

data-doneフィードバックを実現します.
コードのプレゼンテーション:https://mengkang.net/demo/rai...




    
    Title
    
    
        (function ($) {
            'use strict';
            var rails;
            $.rails = rails = {
                linkClickSelector: ' a[data-remote]',
                href: function (element) {
                    return element[0].href;
                },
                handleRemote: function (element) {
                    var options = {
                        success: function (data, status, xhr) {
                            element.trigger('ajax:success', [data, status, xhr]);
                        }
                    };

                    options.url = rails.href(element);
                    options.method = element.data('method');
                    options.data = element.data('params') || null;
                    options.dataType = 'json';

                    return $.ajax(options);
                }
            };

            $(document).on('click.rails', rails.linkClickSelector, function (e) {
                rails.handleRemote($(this));
                return false;
            });

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

                var done = $(this).data('done');
                if (done) {
                    (new Function('data', done)).call(this, data);
                }
            });
        })(jQuery);
    



      →すべてのdivを  します。

      ポートから ってくるerror_コード

javascript異なるタイプのデータ間の演算の変換方法