判断一个对象龙8游戏,原生js编写基于面向对象的分页组件

所以可以使用代码3的方法判断对象是否为空对象{},判断一个对象是否为空对象,也希望大家多多支持脚本之家,以上就是本文的全部内容

做项目时遇到一个问题,判断一个对象是否为空对象,发现这样判断可以,上代码:

本文实例为大家分享了一个基于面向对象的分页组件的具体实现代码,供大家参考,具体内容如下

1. 代码1:

文字表达有限,直接上代码了

var a = {};
if(!a){ console.log(1);}
else if(a == null) { console.log(2);} 
else { console.log(3);}
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="UTF-8"> 
 <title>一个基于面向对象的分页组件</title> 
 <style> 
 html,body{padding:0;margin:0;} 
 p{padding:0;margin:0;} 
 a{text-decoration: none} 
 .Paging{overflow: hidden;} 
 .Paging-item{float: left;padding: 10px 15px;background: #4caf50;color: #fff;margin-left: 5px;} 
 .Paging-item-active{background: #ff568e;} 
 </style> 
</head> 
<body> 
 <div id="page"></div> 
</body> 
<script> 
 //分页组件类 
 function Paging(container,opt){ 
 //自定义事件 
 this.eventHandlers={}; 
 //默认设置 
 this.config={ 
  nowNum: 1, 
  allNum: 10, 
  callback: function(){} 
 } 
 if(opt){ 
  this.extend(this.config,opt); 
 } 
 //外层容器 
 this.Box= null; 
 //渲染组件 
 this.render(container); 
 } 
 Paging.prototype={ 
 constructor: Paging, 
 /*绑定自定义事件*/ 
 on: function(eventType,eventHandler){ 
  if(typeof this.eventHandlers[eventType] === 'undefined'){ 
  this.eventHandlers[eventType]= []; 
  } 
  this.eventHandlers[eventType].push(eventHandler); 
 }, 
 /*触发自定义事件*/ 
 fire: function(eventType){ 
  if( this.eventHandlers[eventType] instanceof Array){ 
  var len= this.eventHandlers[eventType].length; 
  for(var i=0;i<len;i++){ 
   this.eventHandlers[eventType][i](); 
  } 
  } 

 }, 
 /*渲染UI结构*/ 
 renderUI: function(){ 
  this.Box= document.createElement('div'); 
  this.Box.className= 'Paging'; 
  var nowNum= this.config.nowNum; 
  var allNum= this.config.allNum; 
  //当前页大于或等于4,第一页才能隐藏,总数大于5才能显示首页 
  if (nowNum >=4 && allNum >=6) { 
  var pageA= document.createElement('a'); 
  pageA.className= 'Paging-item Paging-item-start' 
  pageA.href='#1'; 
  pageA.innerHTML= '首页'; 
  this.Box.appendChild(pageA); 
  }; 
  //当前页只要不是第一页就显示上一页 
  if(nowNum>=2){ 
  var pageA= document.createElement('a'); 
  pageA.className= 'Paging-item Paging-item-pre' 
  pageA.href='#'+ (nowNum-1); 
  pageA.innerHTML= '上一页'; 
  this.Box.appendChild(pageA); 
  } 

  //只有5页时 
  if(allNum<=5){ 

  for(var i=1;i<=allNum;i++){ 
   var pageA= document.createElement('a'); 
   pageA.className= 'Paging-item' 
   pageA.href= '#'+ i; 
   if(nowNum==i){ 
   pageA.className= 'Paging-item Paging-item-active' 
   pageA.innerHTML=i; 
   }else{ 
   // pageA.innerHTML='['+ i +']'; 
   pageA.innerHTML=i; 
   }   
   this.Box.appendChild(pageA); 
  } 

  }else{ 
  for(var i=1;i<=5;i++){ 
   var pageA= document.createElement('a'); 
   pageA.className= 'Paging-item' 
   pageA.href= '#'+ (nowNum-3+i); 
   //对当前页为前2页的处理 
   if(nowNum === 1 || nowNum === 2){ 
   pageA.href= '#'+ i; 
   if(nowNum === i){ 
    pageA.className= 'Paging-item Paging-item-active' 
    pageA.innerHTML= i; 
   }else{ 
    // pageA.innerHTML= '['+i+']'; 
    pageA.innerHTML= i; 
   } 
   }/*对当前页为后2页的处理*/else if((allNum-nowNum) ===0 || (allNum-nowNum) === 1){ 
   /*== 
    <a href="">[6]</a> 
    <a href="">[7]</a> 
    <a href="">[8]</a> 
    <a href="">[9]</a> 
    <a href="">10</a> 
   ==*/ 
   pageA.href= '#'+ ((allNum-5)+i); 
   if((allNum-nowNum) ===0 && i===5){ 
    pageA.className= 'Paging-item Paging-item-active' 
    pageA.innerHTML=((allNum-5)+i); 
   }else if((allNum-nowNum) ===1 && i===4){ 
    pageA.className= 'Paging-item Paging-item-active' 
    pageA.innerHTML=((allNum-5)+i); 
   }else{ 
    // pageA.innerHTML= '['+ ((allNum-5)+i) +']' 
    pageA.innerHTML= ((allNum-5)+i) 
   } 
   }else{ 
   if(nowNum === (nowNum-3+i)){ 
    pageA.className= 'Paging-item Paging-item-active' 
    pageA.innerHTML= (nowNum-3+i); 
   }else{ 
    // pageA.innerHTML= '['+ (nowNum-3+i) +']' 
    pageA.innerHTML= (nowNum-3+i) 
   } 
   } 

   this.Box.appendChild(pageA); 
  } 
  } 

  if((allNum-nowNum) >=1){ 
  var pageA= document.createElement('a'); 
  pageA.className= 'Paging-item Paging-item-next' 
  pageA.href='#'+ (nowNum+1); 
  pageA.innerHTML= '下一页'; 
  this.Box.appendChild(pageA); 
  } 
  //选择7为标准,或7以下才能显示 
  if((allNum-nowNum) >= 3 && allNum >= 6){ 
  var pageA= document.createElement('a'); 
  pageA.className= 'Paging-item Paging-item-end' 
  pageA.href='#'+allNum; 
  pageA.innerHTML= '尾页'; 
  this.Box.appendChild(pageA); 
  } 



 }, 
 /*为UI绑定事件*/ 
 bindUI: function(){ 
  var self= this; 
  this.config.callback(this.config.nowNum,this.config.allNum); 
  //利用事件委托 
  self.Box.onclick= function(e){ 
  var e= e || window.event; 
  var target= e.target || e.srcElement; 
  if(typeof e.target.getAttribute('href') === 'string'){ 
   var nowNum= parseInt(target.getAttribute('href').substring(1)); 
   // console.log(nowNum); 
   self.Box.innerHTML= ''; 
   new Paging(null,{ 
   nowNum: nowNum, 
   allNum: self.config.allNum, 
   callback: self.config.callback 
   }) 
  } 
  return false; 
  } 
 }, 
 /*渲染UI*/ 
 render: function(container){ 
  this.renderUI(); 
  this.bindUI(); 
  if(container){ 
  var con= document.getElementById(container); 
  con.appendChild(this.Box); 
  }else{ 
  document.body.appendChild(this.Box); 
  } 
 }, 
 /*继承对象*/ 
 extend: function(obj1,obj2){ 
  for(attr in obj2){ 
  obj1[attr]= obj2[attr]; 
  } 
 } 
 } 
 //初始化调用 
 var page= new Paging(null,{ 
 nowNum: 1, 
 allNum: 10, 
 callback: function(nowNum,allNum){ 
  console.log('当前页:'+nowNum) 
  console.log('总页:'+allNum) 
 } 
 }); 
</script> 
</html> 

结果为:3

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

2. 代码2:

您可能感兴趣的文章:

  • 详解springmvc
    接收json对象的两种方式
  • Javascript之面向对象–接口
  • Javascript之面向对象–封装
  • Javascript之面向对象–方法
  • 遍历json
    对象的属性并且动态添加属性的实现
  • js实现倒计时及时间对象
  • JS创建对象的写法示例
  • JavaScript
    深层克隆对象详解及实例
  • JS日期对象简单操作(获取当前年份、星期、时间)
  • JS动态给对象添加属性和值的实现方法
  • JavaScript
    判断一个对象{}是否为空对象的简单方法
  • 浅述Javascript的外部对象
var b = {};
if(b == {}){ console.log(4);}
if(b == '{}') { console.log(5);} 
if(typeof(b) == 'object') { console.log(6);}

结果为:6

3. 代码3:

var c = {};
if(JSON.stringify(c) == "{}"){ console.log(7);}


var c = {};
if(JSON.stringify(c) == "{}"){ console.log(7);}

结果为:7

所以可以使用代码3的方法判断对象是否为空对象{};

如果对象不为空,并且知道对象不为空时,某个属性(比如{id:111})一定存在,则可以里这样判断:

4. 代码4:

var d = {};
var e = {id:111};
if(d.id){ console.log(8);}
if(e.id){ console.log(9);}

结果为:9

小结:显然代码3的判断方式比较“强势”,但效率明显不如代码4的判断方法

以上就是小编为大家带来的JavaScript
判断一个对象{}是否为空对象的简单方法全部内容了,希望大家多多支持脚本之家~

您可能感兴趣的文章:

  • 详解springmvc
    接收json对象的两种方式
  • 原生js编写基于面向对象的分页组件
  • Javascript之面向对象–接口
  • Javascript之面向对象–封装
  • Javascript之面向对象–方法
  • 遍历json
    对象的属性并且动态添加属性的实现
  • js实现倒计时及时间对象
  • JS创建对象的写法示例
  • JavaScript
    深层克隆对象详解及实例
  • JS日期对象简单操作(获取当前年份、星期、时间)
  • JS动态给对象添加属性和值的实现方法
  • 浅述Javascript的外部对象