Witam, na wstępie pragnę namienić że nie mam pojęcia jak to się robi w praktyce - przy poważnych projektach/ nie hobbistycznie.
Co chciałem uzyskać:
- przy dużych projektach, domyślam się że skryptów js jest jest od groma więc trzeba oddzielić to przestrzeniami nazw (?)
- wygodną modyfikację zapytań asynchro. oraz łatwą obsługę odpowiedzi
- przejrzystość kodu bez zbędnych objaśnień w komentarzach /**/
Podzieliłem wszystko na taką strukturę:
- namespace i obsługa dziedziczenia:
/**
* namespace and extending function
*/
var strz_Bookmark={};
(function(){
strz_Bookmark.Extend=function(child, parent){
for(var i in parent.prototype){
if(!(i in child.prototype)){
child.prototype[i]=parent.prototype[i];
}
}
};
})();
- akcja rodzic
(function(){
strz_Bookmark.Action=function(rel){
this.name="Action";
strz_Bookmark.Action.relLink=rel;
};
/**
* extendable container
*/
strz_Bookmark.Action.prototype={
/**
* public function: jQuery on click ajax request will be send,
* on recive display status
*/
initClick:function(){
var requestDone=this.onDone;
var action=this.moveElement;
$("a[rel='"+this.getLink()+"']").click(function(event){
event.preventDefault();
$.ajax({
type:'GET',
self:$(this).parent(),
url:this,
cache:false,
error: function(err) {
console.log(err);
switch(err.status){
case 403:
console.log('just login error');
default:
$('.content').html(err.responseText);
break;
}
}
}).done(function (data){
requestDone(this.self, data, action);
});
});
},
onDone:function(self, data){},
/**
* privileged function: extendable
*/
getLink:function(){
return strz_Bookmark.Action.relLink;
},
/**
* moving div
*/
moveElement:function(view, msg, direction){
direction=(direction==='right')?1:-1;
view.html(msg);
var endPosX=$('.left-menu').offset().left;
var move=new Move(view.get(0), (view.offset().left-endPosX)*direction);
},
};
})();
- noi np akcja obsługująca subskrypcję (zakładki)
(function(){
strz_Bookmark.Subscribe=function(rel){
rel= (typeof rel!=='undefined')? rel :'subscribe_bookmark';
this.name="Subscribe";
strz_Bookmark.Subscribe.relLink=rel;
};
/**
* extendable container
*/
strz_Bookmark.Subscribe.prototype={
onDone:function(self, data, moveElement){
data=JSON.parse(data);
//bookmark=data.bookmark;
message=data.message;
moveElement(self, message, 'left');
},
/**
* privileged function: extendable
*/
getLink:function(){
return strz_Bookmark.Subscribe.relLink;
},
};
strz_Bookmark.Extend(strz_Bookmark.Subscribe, strz_Bookmark.Action);
})();
- unsub ma inny url oraz inaczej wyświetla się informacja tej akcji więc trzeba przeładować onDone i getLink
(function(){
strz_Bookmark.Unsubscribe=function(rel){
rel= (typeof rel!=='undefined')? rel :'delete';
this.name="unsubscribe";
strz_Bookmark.Unsubscribe.relLink=rel;
};
/**
* extendable container
*/
strz_Bookmark.Unsubscribe.prototype={
onDone:function(self, data, moveElement){
data=JSON.parse(data);
//bookmark=data.bookmark;
message=data.message;
moveElement(self, message, 'right');
},
/**
* privileged function: extendable
*/
getLink:function(){
return strz_Bookmark.Unsubscribe.relLink;
},
};
strz_Bookmark.Extend(strz_Bookmark.Unsubscribe, strz_Bookmark.Action);
})();
- a aktywacja akcji wygląda tak:
var sub=new strz_Bookmark.Subscribe();
sub.initClick();
var unsub=new strz_Bookmark.Unsubscribe();
unsub.initClick();