您的位置：首页 > Web前端 > JavaScript

javascript基础之十二（JavaScript的代码容器）

2015-10-27 14:26 615 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript的代码容器</title>
</head>
<body>
<h2 style="text-align:center">现在时间</h2>
<hr/>
<h5 style=" text-align:center" id=
4000
"time">TIME</h5>
<h5 style=" text-align:center" id="time2">TIME</h5>
<h2 style="text-align:center">计算器</h2>
<hr/>
<h5 style=" text-align:center" id="calc1">calc</h5>
<h5 style=" text-align:center" id="calc2">calc</h5>
</body>
<script>
//当引用多个JavaScript的js文件时候，由于JavaScript都把直接定义的变量当做全局变量，可能引发函数失效，变量名失效等
//可以使用代码容器消除冲突
var pageCodeContainer={
result:window.document.getElementById("time"),
show:function(){
this.result.innerHTML=new Date().toLocaleString();
},
};
setInterval(pageCodeContainer.show.bind(pageCodeContainer),1000);
</script>
<script>//以上代码隐藏性不够好
//改进，采用立即函数隐藏内部代码
var outputId="time2";
var myContainer=(function(outputEleId){
var result=document.getElementById(outputEleId);
var show=function(){
result.innerHTML=new Date().toLocaleString();
};
return{show:show};//返回一个对象
})(outputId);
setInterval(myContainer.show.bind(myContainer),1000);
</script>
<script>
//使用面向对象的思想开发计算器
var Calculator=function(resultEleId){
this.resultEle=document.getElementById(resultEleId);
};
//为了实现在对象实例中共享方法，代码方法放在原型中
Calculator.prototype={
add:function(x,y){
var result=x+y;
this.resultEle.innerHTML=result;
}
};
var cal=new Calculator("calc1");
cal.add(1,2);

//改进：为了实现代码的不混乱（放在 全局 区域），采用命名空间 隔开
var myNameSpace=myNameSpace || {};//定义命名空间
//接下来将代码放在命名空间中
myNameSpace.Calculator=function(resultEleId){
this.resultEle=document.getElementById(resultEleId);
};
//为了实现在对象实例中共享方法，代码方法放在原型中
myNameSpace.Calculator.prototype={
add:function(x,y){
var result=x+y;
this.resultEle.innerHTML=result;
}
};
var cal=new  myNameSpace.Calculator("calc2");
cal.add(1,2);
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航