시나리오
특정 요청에 대해 "ajaxStart" 효과를 구현하는 방법은 무엇입니까?
우선, Ajax 메서드를 재정의하는 데 드는 비용이 너무 높습니다. jQuery 자체 Ajax 이벤트를 계속 사용할 수 있습니다.
Ajax에 의해 트리거된 전역 이벤트는 표준 이벤트처럼 모든 DOM 노드에 전파됩니다. 수준: jQuery 이벤트 > Ajax 이벤트 >
구현
Wo = window.Wo || { };
Wo.ajax = {
spinner : $([])
,init : function() {
var $spinner = this.spinner = $('#ajax- loading') ;
var show = function(e) {
if(e.namespace === 'Wo') $spinner.show()
}; e) {
$spinner.hide()
};
$spinner.bind({
'ajaxStart.Wo' :
표시,'ajaxStop.Wo' : 숨기기
,' ajaxError.Wo' : hide
});
this.adapt(['getJSON','get','post','ajax'])
}
// 요청 전송 준비
,_prepare : function() {
this.spinner.trigger('ajaxStart.Wo')
}
//인터페이스 일괄 변경
,adapt : function( fns) {
var self = this;
$.each(fns,function(i,fn) {
Wo[fn] = function() {
self._prepare();
$[fn ].apply(this,arguments);
}
});
}
};
이벤트는
결정된 네임스페이스에 대한 특정 이벤트입니다.
트리거되면 이벤트 핸들러에 추가 매개변수를 전달합니다.
여기에서는 이벤트의 네임스페이스를 사용하여 트리거 소스를 결정합니다. 적응 방법은 어댑터를 적용하는 것과 동일하며 다른 인터페이스 세트를 향상된 인터페이스로 대체합니다.
load 메소드를 추가하고 싶다면 ajax 메소드일 수도 있고 요소의 onload 이벤트일 수도 있기 때문에 좀 더 번거롭습니다.
프록시 메소드를 추가하고 유형 판단을 수행하려면:
var _load = $.fn.load;
$.fn.load = function() {
$.type(arguments[0]) === 'string' && self._prepare( );
_load.apply(this,arguments);
return this;
}
사용은 이전과 동일합니다. >
Wo.post(url, [data,] callback )