发新贴  快速回复

请教面向对像 开关的问题(问题见4楼)

hhmyc
2014-05-28 13:33
 本帖最后由 hhmyc 于 2014-5-28 14:58 编辑 

请教面向对像 开关的问题

如何让元素 只单击一次(面向对象里)
 
leo
不知道是不是你想要的:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="javascript:;">元素aaa</a>
    <script type="text/javascript">
    function Fn(){
        this.eleA = null;
        this.off = true;
    }
    Fn.prototype.init = function(){

        this.eleA = document.getElementsByTagName('a')[0];

        var that = this;

        this.eleA.onclick = function(){
            if (that.off) {
                alert('a')
            }
            that.off = false;
        }
        
    }

    var f1 = new Fn();
    f1.init();
    </script>
</body>
</html>
2014-05-28 13:48  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26814&ptid=8401
不知道是不是你想要的:




我又晕了 是这么回事 我再看看... 3q
2014-05-28 13:52  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26814&ptid=8401
不知道是不是你想要的:




刚刚没表达清楚 我的问题 如下...

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>span{cursor: pointer;}</style>
</head>
<body>
    <a href="javascript:;">元素aaa</a>
    <span>元素span</span>

    <script type="text/javascript">

    window.onload = function(){
        var oA = document.getElementsByTagName('a')[0];
        var oSpan = document.getElementsByTagName('span')[0];

        oA.onclick = function(){
            var f1 = new Fn();
            f1.init('a');
        }

        oSpan.onclick = function(){
            var f2 = new Fn();
            f2.init('span');
        }
    }


    function Fn(){
        this.off = true;
        this.oDiv = null;
    }
    Fn.prototype.init = function(txt){
        this.oDiv = document.createElement('div');
        this.oDiv.innerHTML = '如何在对象内部实现单击对象外的按钮 只初始化一次。我是'+txt+'按钮创建的';
        document.body.appendChild(this.oDiv);
    }
    </script>
</body>
</html>

谢谢回答 !!!
2014-05-28 14:42  回复本帖
 
zmouse
forum.php?mod=redirect&goto=findpost&pid=26818&ptid=8401
刚刚没表达清楚 我的问题 如下...





    function Fn(){
        }
    Fn.prototype.oDiv = null;
        Fn.prototype.init = function(txt){
        if (this.oDiv == null) {
             this.oDiv = document.createElement('div');
             document.body.appendChild(this.oDiv);
        }
                this.oDiv.innerHTML = '如何在对象内部实现单击对象外的按钮 只初始化一次。我是'+txt+'按钮创建的';
        }


不知道是不是这个意思!,不过,这个是有问题的,比如
var of = new Fn();
of.oDiv = 1;
of.init();    //会报错因为访问了对象自己的oDiv,而没有访问prototype下的。

可以写成下面这样:

var Fn = (function() {
    var oDiv = null;

    function F() {
    }
    F.prototype.init = function(txt) {
        if (oDiv == null) {
            oDiv = document.createElement('div');
            document.body.appendChild(oDiv);
        }
        oDiv.innerHTML = '如何在对象内部实现单击对象外的按钮 只初始化一次。我是'+txt+'按钮创建的';
    }
})();

var f1 = new Fn();
f1.init();
var fn2 = new Fn();
f2.init();
2014-05-28 15:33  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26823&ptid=8401
不知道是不是这个意思!,不过,这个是有问题的,比如
var of = new Fn();
of.oDiv = 1;


这是不是 就是单体模式 刚接触面向对象不久 这个问题其实是看组件开发的时候 里面讲的单体模式是通过配置参数里写了一个默认参数不存在的参数实现的 我感觉那样虽然实现了 但是总拒绝的不够好 所以问这个问题... 求解答 辛苦了
2014-05-28 15:55  回复本帖
 
zmouse
不是单例,单例是只能被实例化一次的,也就是只能存在一个对象实例,在js中可以通过j={}实现,而不用new,上面那个只能算是多个对象共享一个属性。
2014-05-28 16:04  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26825&ptid=8401
不是单例,单例是只能被实例化一次的,也就是只能存在一个对象实例,在js中可以通过j={}实现,而不用new, ...

我刚测试了下您贴的代码 是报错的 
2014-05-28 16:09  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26825&ptid=8401
不是单例,单例是只能被实例化一次的,也就是只能存在一个对象实例,在js中可以通过j={}实现,而不用new, ...

function Fn(){ //这段代码还是会一直创建
        }
        Fn.prototype.oDiv = null;
        Fn.prototype.init = function(txt){
                if (this.oDiv == null) {
                         this.oDiv = document.createElement('div');
                         document.body.appendChild(this.oDiv);
                }
                this.oDiv.innerHTML = '如何在对象内部实现单击对象外的按钮 只初始化一次。我是'+txt+'按钮创建的';
        }

=====================================================================================

var Fn = (function() { // 这段报 Fn 不是构造函数
        var oDiv = null;

        function F() {
        }
        F.prototype.init = function(txt) {
                if (oDiv == null) {
                        oDiv = document.createElement('div');
                        document.body.appendChild(oDiv);
                }
                oDiv.innerHTML = '如何在对象内部实现单击对象外的按钮 只初始化一次。我是'+txt+'按钮创建的';
        }
})();

var f1 = new Fn();
f1.init();
var fn2 = new Fn();
f2.init();
2014-05-28 16:13  回复本帖
 
zmouse
好吧,用论坛的编辑的!!
if (this.oDiv == null) {  改成  if (!this.oDiv)

下面那个
var Fn = (function() { // 这段报 Fn 不是构造函数
        var oDiv = null;

        function F() {
        }
        F.prototype.init = function(txt) {
                if (oDiv == null) {
                        oDiv = document.createElement('div');
                        document.body.appendChild(oDiv);
                }
                oDiv.innerHTML = '如何在对象内部实现单击对象外的按钮 只初始化一次。我是'+txt+'按钮创建的';
        }
       return F;
})();
2014-05-28 16:18  回复本帖
 
zmouse
forum.php?mod=redirect&goto=findpost&pid=26827&ptid=8401
function Fn(){ //这段代码还是会一直创建
        }
        Fn.prototype.oDiv = null;


function Fn(){ //这段代码还是会一直创建
        }
        Fn.prototype.oDiv = null;
        Fn.prototype.init = function(txt){
                if (this.oDiv == null) {
                         this.oDiv = document.createElement('div');
                         document.body.appendChild(this.oDiv);
                }
                this.oDiv.innerHTML = '如何在对象内部实现单击对象外的按钮 只初始化一次。我是'+txt+'按钮创建的';
        }


嗯,这个是有问题的,,this.oDiv = document.createElement('div');  这句话还是会把oDiv添加到对象上去。。。不好意思。改下:this.oDiv = document.createElement('div')这个为:this.constructor.prototype.oDiv = document.createElement('div');,,,推荐还是使用下面那个闭包的形式。
2014-05-28 16:21  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26829&ptid=8401
嗯,这个是有问题的,,this.oDiv = document.createElement('div');  这句话还是会把oDiv添加到对象 ...

学习了 我去看看  谢谢!
2014-05-28 16:26  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26828&ptid=8401
好吧,用论坛的编辑的!!
if (this.oDiv == null) {  改成  if (!this.oDiv)



不好意思老师 我又没说清楚 我试了下又失败了
我想实现的最终效果就是
点a 初始化 页面生成一个内容有a的元素 再点a就点不了了
再点span 页面生成一个内容有span的元素 再点span就点不了了

就是两个按钮 分别单击 页面会生成两个DIV(各自的) 三个按钮页面会生成三个(各自的) 
2014-05-28 16:45  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26829&ptid=8401
嗯,这个是有问题的,,this.oDiv = document.createElement('div');  这句话还是会把oDiv添加到对象 ...

我最终是想实现 过程式 开关的效果 就是在某种情况下 b = true; if(b){b = false....} 在某种情况下 b 也可以赋回true 不知道在面向对象里可不可以
比如说 弹窗组建 
点 按钮1   创建 弹窗1   再点  按钮1 就不会重复创建 关闭弹窗1 再点又会创建  里面还会有按钮2...也一样 他们之间互不干扰  遇到这样的问题 所以写了这个问题的demo
2014-05-28 16:54  回复本帖
 
zmouse
forum.php?mod=redirect&goto=findpost&pid=26832&ptid=8401
我最终是想实现 过程式 开关的效果 就是在某种情况下 b = true; if(b){b = false....} 在某种情况下 b 也 ...

那就是每个对象都有个自己的独立属性,把那个公有的属性放到对象下就可以了。


    function Fn(){
        this.oDiv = null;
        }

        Fn.prototype.init = function(txt){
                if (!this.oDiv) {
                         this.oDiv = document.createElement('div');
                         document.body.appendChild(this.oDiv);
                }
                this.oDiv.innerHTML = '如何在对象内部实现单击对象外的按钮 只初始化一次。我是'+txt+'按钮创建的';
        }
2014-05-28 17:25  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26833&ptid=8401
那就是每个对象都有个自己的独立属性,把那个公有的属性放到对象下就可以了。

 ...

我看看先
2014-05-29 12:02  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26833&ptid=8401
那就是每个对象都有个自己的独立属性,把那个公有的属性放到对象下就可以了。

 ...

这种办法之前试了一次 还是会重复创建 好吧 先不管这了 谢谢啦
2014-05-29 12:08  回复本帖
hhmyc
forum.php?mod=redirect&goto=findpost&pid=26833&ptid=8401
那就是每个对象都有个自己的独立属性,把那个公有的属性放到对象下就可以了。

 ...

function Fn(){
                this.oDiv = null;
        }

        Fn.prototype.init = function(txt){
            alert(this.oDiv) //*** 每次点击都会弹出  null
            if (!this.oDiv) {
                 this.oDiv = document.createElement('div');
                 document.body.appendChild(this.oDiv);
            }
            alert(this.oDiv) //*** 每次点击都会弹出 [object HTMLDivElement]
            this.oDiv.innerHTML = '如何在对象内部实现单击对象外的按钮 只初始化一次。我是'+txt+'按钮创建的';
        }

每次点击 都会弹一次null 和 [object HTMLDivElement]
2014-05-29 12:11  回复本帖
 
zmouse
forum.php?mod=redirect&goto=findpost&pid=26849&ptid=8401
function Fn(){
                this.oDiv = null;
        }



function Fn(){
    this.oDiv = null;
}

Fn.prototype.init = function(txt){
    if (!this.oDiv) {
            this.oDiv = document.createElement('div');
        document.body.appendChild(this.oDiv);
    }
    this.oDiv.innerHTML = '如何在对象内部实现单击对象外的按钮 只初始化一次。我是'+txt+'按钮创建的';
}

//配合着用
document.onclick = function() {
    if (!document.fn) {
        document.fn = new Fn();
    }

    document.fn.init( new Date().getTime() );
}
2014-05-29 14:04  回复本帖
登录 后才可以发表回复