魏长东

weichangdong

很厉害的js

看到别人写的一段js,觉得很厉害,共享下。因为本人对js的面向对象的写法还是很菜鸟。

/**
 * ajaxload js
 * @author yulipu
 * based on ylib's extend and event and ajax
 */
function AjaxLoad(opt) {
 opt = undefined == opt ? {} : opt;
 this.options = {
  container : 'listContainer',  // 容器
  loadMoreButton : 'loadMoreLink',  // 更多按钮
  lastId : 0,  // 最下面一条内容的id
  LatestId : 0  // 最新内容id
 };
 this.options = ylib.extend(this.options, opt);
 
 this.init();
}
AjaxLoad.prototype = {
 constructor : AjaxLoad,
 
 reset : function() {},
 
 init : function() {
  var _this = this;
  var o = this.options;
  // 添加事件
  ylib.E.addHandler(document.getElementById(o.loadMoreButton), 'click', function(){
   _this.loadMore(); 
  });
 },
 
 // 发送请求
 request : function(url, data, func, err) {
  ylib.ajax.request({
    "url" : url,
    "data" : data,
    "success" : func,
    "error" : err || function() {alert('请求超时或出错');}
  }); 
 },
 
 // 一些地址配置
 config : {
  // 动态加载内容地址
  loadmore : {
   url : _APP_ +'/about'
  },
  
  // 显示最新地址
  loadNew : {} 
 },
 
 // 加载更多
 loadMore : function() {
  var _this = this;
  var id = this.options.lastId;
  if(!id){alert('参数错误');return;}
  
  var container = document.getElementById(this.options.container);
  var aLink = document.getElementById(this.options.loadMoreButton);
  var parentEle = aLink.parentNode;
  var oldStr = parentEle.innerHTML;
  parentEle.innerHTML = '加载中...';
  
  var url = this.config.loadmore.url;
  var data = 'lastId='+id;
  this.request(url, data, function(str){
   parentEle.innerHTML = oldStr;
   _this.init();  // 重新添加事件
   if('4' == str) {
    alert('参数错误'); 
   } else if(str.indexOf("hava")>0) {
    container.innerHTML += str;
    try {
     _this.options.lastId = container.lastChild.getAttribute('id').split("_").pop();
    } catch(e) {
      
    }
    
   } else {
    parentEle.innerHTML = '没有数据了哦'; 
   }
   
  }, function(){
   parentEle.innerHTML = oldStr;
   _this.init(); // 重新添加事件
   alert('请求超时或出错');
  });
 } 
};

 

调用方法

<script type="text/javascript"> var ajaxLoad = new AjaxLoad({ "lastId" : 1 }); </script>