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

最新推荐文章于 2024-01-29 13:00:42 发布

TinyTechFlux

最新推荐文章于 2024-01-29 13:00:42 发布

阅读量815

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u010510134/article/details/49447739

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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="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>