如何编写javascript组件



 var myClock = {
            getSecondDeg : function (){
                var time = new Date();
                var now_seconds = time.getSeconds();

                var _deg = now_seconds*6

                return _deg;
            },
            getMinuteDeg : function(){
                var time = new Date();
                var now_minutes = time.getMinutes();
                var now_seconds = time.getSeconds();

                var _deg = now_minutes * 6 + now_seconds/10

                return _deg;
            },
            getHourDeg : function(){
                var time = new Date();
                var now_hours = time.getHours();
                var now_minutes = time.getMinutes();


                var _deg = now_hours%12 * 30 + now_minutes/2;
                return _deg;
            },init : function(element){
                var clock_c = element;

                //时针
                var hour_p = document.createElement("div");
                hour_p.id = "hour";
                //分针
                var minutes_p = document.createElement("div");
                minutes_p.id = "minutes";
                //秒针
                var second_p = document.createElement("div");
                second_p.id = "second";
                //刻度

                clock_c.appendChild(hour_p);
                clock_c.appendChild(minutes_p);
                clock_c.appendChild(second_p);
                myClock.refush(hour_p,minutes_p,second_p);
                setInterval(function(){
                    myClock.refush(hour_p,minutes_p,second_p);
                },1000);
            },
            refush : function(hh,mm,ss){
                hh.style.transform = 'rotateZ('+ myClock.getHourDeg() +'deg)';
                mm.style.transform = 'rotateZ('+ myClock.getMinuteDeg() +'deg)';
                ss.style.transform = 'rotateZ('+ (myClock.getSecondDeg()+1) +'deg)';
                setTimeout(function(){
                    ss.style.transform = 'rotateZ('+ myClock.getSecondDeg() +'deg)';
                }, 50);
            }

        }

        var clock = document.getElementById("clock")

        myClock.init(clock);

我想将 myClock.init(clock) 改成 clock.myClock.init() 这样的方式调用。

还有只允许 myClock中的 Init()方法能被外部调用,其他方法为私有方法,改如何写。


 
//我刚开始这样写的会报错 var clock = function(){ init = function(element){ } //.... return init; }

JavaScript javascript面向对象

Kiseri 10 years, 2 months ago

对于第一个问题,有几个概念。第一个命名空间,你的代码中的init方法在myClock的命名空间下,所以调用是用myClock.init(clock)。而init方法的形参是一个dom对象,所以将clock所引用的dom对象传进去。如果将myClock.init(clock)改成clock.myCLock.init(),你首先需要改变命名空间,其次将init方法改成无参函数,关于命名空间可参照 http://segmentfault.com/a/1190000002904936?_ea=229092 .
第二个问题楼上给出了答案,用闭包去实现,返回一个对象的方法,没有返回的则为私有属性和方法。

纯洁的板子 answered 10 years, 2 months ago

不是很明白的你的第一个问题,clock 不是一个dom 对象吗,这个对象上肯定没有 myClock 属性呀
私有方法的可以用如下的写法:


 var myClock = (function(){
    var init = function(element){

    }

    //....
    return {init : init};
})();

Alamith answered 10 years, 2 months ago

Your Answer