微信活动页面动态加载以及封装

actbase页面：

var page = [];
var actBase;
!function(){
actBase = function(element_,pageName_){
this.element_ = element_;
this.pageName_ = pageName_;
};
actBase.prototype = {
addDom : function(Callback_){
console.log("addDom");
$(this.element_).load(this.pageName_,function(response,status,xhr){
if(Callback_)Callback_();
});
},
extend :function(n,override){
for(var p in n){
if(n.hasOwnProperty(p) && (!this.hasOwnProperty(p) || override)){
this[p] = n[p];
}
}
}
}
}();


var pageBase;
!function(){
pageBase = function(element_,pageName_){
actBase.call(this,element_,pageName_);
this.pageId = page.length;
page.push(this);
this.extend({
work : function(){
var self = this;
self.addDom();
self.onEnter();
},
onleave : function(mode){
console.log("leave");
},
_onLeave : function(mode){
this._animate('leave',mode);
},
onEnter : function(mode){
this._animate('enter',mode);
},
_onEnter : function(mode){
this._animate('enter',mode);
},
gotoPage :function(pageId,config){
var self = this;
// page[pageId].addDom();
// return false;
page[pageId].addDom(function(){
page[pageId]._onEnter(config.mode);
self._onLeave(config.mode);
});
},
_animate : function(status_,mode_){
var h = $(window).height();
var value1,value2;
var self = this;
        switch (mode_){
            case "up" :
            case "down" :
            case "left" :
            case "right" :


              if (status_ == "enter"){
                  value2 = 0;
                  if (mode_ == "up")value1 = h;
                  if (mode_ == "down")value1 = -h;
                  if (mode_ == "left")value1 = w;
                  if (mode_ == "right")value1 = -w;
              }else{
                  value1 = 0;
                  if (mode_ == "up")value2 = -h;
                  if (mode_ == "down")value2 = h;
                  if (mode_ == "left")value2 = -w;
                  if (mode_ == "right")value2 = w;
              }


              $(self.element_).css({"position":"absolute","left":0,"top":0,"transform":"translate3d(0,"+ value1 +"px,0)"});
              setTimeout(function(){
                  $(self.element_).css({"transition":"all 500ms","transform":"translate3d(0,"+ value2 +"px,0)"});
              },100);
              self.onEnter();
              // setTimeout(function () {
              //     $(self.element_).css({"transition":""});
              //     if (status_ == "enter"){
              //     self.onEnter();
              //     }else{
              //     self.onleave();
              //     }
              // },1100);


              //$(self.element_).one("webkitTransitionEnd otransitionEnd transitionEnd",function(){
              //
              //});


              break;
          case "none" :
              if (status_ == "enter"){self.onEnter();}else{self.onleave();}
              break;
          default :
              // self._animateExtend[mode_](arguments);
              break;
        }
    },
    _animateExtend : {}
});
}
pageBase.prototype = new actBase();
}();

main.js页面

// = require jquery
// = require jquery.touchSwipe.min.js
// = require components/actBase.js
var page0 = new pageBase(".item1","/weixin_act/page1.html");
!function(){
page0.extend({
onEnter : function(){
var self = this;
      $(this.element_).swipe({
        swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
          if (direction == "up" && phase =="end"){
            self.gotoPage(1,{mode:'up'});    
          }        
        }
      });
}
},true);
}();


var page1 = new pageBase(".item2","/weixin_act/page2.html");
!function(){
page1.extend({
onEnter : function(){
var self = this;
      console.log(self);
      $(this.element_).swipe({
        swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
          if (direction == "down" && phase =="end"){
            self.gotoPage(0,{mode:'down'});    
          }else if(direction == "up" && phase =="end"){
            // alert("up");
          self.gotoPage(2,{mode:'up'});
          }        
        }
      });
}
},true);
}();


var page2 =new pageBase(".item3","/weixin_act/page3.html");
!function(){
page2.extend({
onEnter : function(){
var self = this;
      $(this.element_).swipe({
        swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
          if (direction == "down" && phase =="end"){
            self.gotoPage(1,{mode:'down'});    
          }else if(direction == "up" && phase =="end"){
          self.gotoPage(3,{mode:'up'});
          }        
        }
      });
}
},true);
}();


var page3 =new pageBase(".item4","/weixin_act/page4.html");
!function(){
page3.extend({
onEnter : function(){
var self = this;
      $(this.element_).swipe({
        swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
          if (direction == "down" && phase =="end"){
            self.gotoPage(2,{mode:'down'});    
          }       
        }
      });
}
},true);
}();


$(document).ready(function() {
page0.work();
});