欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

笔记,js对象浅析

程序员文章站 2022-10-04 18:20:24
学习笔记, 来源:http://www.cnblogs.com/zuiyirenjian/p/3535126.html 作者:醉意人间 此外,关于自运行函数可参考 http://benalman.com/news/2010/11/immediately-invoked-function-expres ......

学习笔记,

来源:http://www.cnblogs.com/zuiyirenjian/p/3535126.html

 作者: 

 

此外,关于自运行函数可参考  http://benalman.com/news/2010/11/immediately-invoked-function-expression/

 

在js中,也常常需要复用,将一些常见的操作封装起来,目前看到的很多js库,比如jquery就是非常典型的,那么如何在js中写一个可复用的呢?虽然在js中有类的这个说法,但是我对这个玩意还是很抵触的,但是存在即合理。js中的类是通过函数来模拟的,也就是说js中的函数具有双重角色,用new关键字的将函数视为类,不用new的,它就是一个普普通通的函数。

我们知道,类就是一个数据类型,这个数据类型由属性和方法(函数)组成,如果函数只有属性,没有方法,那么这样的类,一般就单纯的表示为一个数据,增加上一些方法,那么类的功能将会有质的变化。既然在js中,函数可以表示为类,而类中又有方法,那么在js中函数内部新定义一个函数,也就不足为怪。

js中最为强大的内容,我认为除了原型,就是闭包,这里就讨论闭包,闭包其实就是在一个函数内部定义一个新的函数,在执行的时候,会将这个函数返回,也可能是返回一个对象。下面就是一个简单的闭包:

笔记,js对象浅析
  var mathtest = function (x, y) {

        var x = x;
        var y = y;

      var add = function () {

            return x + y;

        }

        return add;

    }
笔记,js对象浅析
 var x = mathtest(3, 4);

        alert(x());

在执行的时候mathtest就是内部的add函数,调用mathtest的时候,相当于执行了x+y,这其实并不起卦,可以将add认为是function内部的一个变量,只是这个变量的值是一个函数,内部的函数是可以访问它的上一个级别的数据,所以我们可以得到正确的值。

笔记,js对象浅析
var img = function () {
        var t$ = function (id) { return document.getelementbyid(id); }
        var ua = navigator.useragent,
        isie = /msie/i.test(ua) && !window.opera;
        var i = 0, sindeg = 0, cosdeg = 0, timer = null;
        var rotate = function (target, degree) {
            target = t$(target);
            var orginw = target.clientwidth, orginh = target.clientheight;
            clearinterval(timer);
            function run(angle) {
                if (isie) { // ie
                    cosdeg = math.cos(angle * math.pi / 180);
                    sindeg = math.sin(angle * math.pi / 180);
                    with (target.filters.item(0)) {
                        m11 = m22 = cosdeg; m12 = -(m21 = sindeg);
                    }
                    target.style.top = (orginh - target.offsetheight) / 2 + 'px';
                    target.style.left = (orginw - target.offsetwidth) / 2 + 'px';
                } else if (target.style.moztransform !== undefined) {  // mozilla
                    target.style.moztransform = 'rotate(' + angle + 'deg)';
                } else if (target.style.otransform !== undefined) {   // opera
                    target.style.otransform = 'rotate(' + angle + 'deg)';
                } else if (target.style.webkittransform !== undefined) { // chrome safari
                    target.style.webkittransform = 'rotate(' + angle + 'deg)';
                } else {
                    target.style.transform = "rotate(" + angle + "deg)";
                }
            }

            timer = setinterval(function () {
                i += 10;
                run(i);
                if (i > degree - 1) {
                    i = 0;
                    clearinterval(timer);
                }
            }, 10);
        }
        return { rotate: rotate }

    } ();
笔记,js对象浅析

调用代码:

      img.rotate('demo', 360);

 

这个是一个比较复杂的,但是不要怕,这里会牵扯到另外的知识,自执行函数和匿名函数。

所谓匿名函数就是没有名字的函数,形式如下:

function () {
   
    }

既然没有名字,那么如何调用呢:

var b=function () {
   
    }
b()

可以将匿名函数付给一个变量,这个变量现在就充当了这个函数的名称,但是记住,这个不是名称,我只是这么叫,如果觉得不妥的话,可以认为b现在就是这个匿名函数的代表,在用的时候用b就等同于使用右边的函数。除了这种方式,还有就是自执行函数,形式如下:

(function(){
          //代码
        })();

自执行函数相当于我们上面两步的结合:

var b=function () {
   
    }
b()

 

自执行函数是非常有用的,可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,在使用的时候只需要用这个奇怪的函数即可,伟大的jquery就是通过这个奇怪的函数创建了一个$的对象,在这个匿名函数中,往往会定义一个属于自己的命名空间,或者返回一个属于自己的对象,上面的img对象包含了旋转图片的操作,这操作中,调用了很多匿名函数中定义的其它方法,这些方法都是为rotate来服务的。那么以后写自己可服用的操作的时候,就可以通过这种做法。


我们见到的操作通常都是返回一个对象,但是也可以放回一个函数,下面的,但是调用的时候,写法有所差异:

笔记,js对象浅析
    var img = function () {
        var t$ = function (id) { return document.getelementbyid(id); }
        var ua = navigator.useragent,
        isie = /msie/i.test(ua) && !window.opera;
        var i = 0, sindeg = 0, cosdeg = 0, timer = null;
        var rotate = function (target, degree) {
            target = t$(target);
            var orginw = target.clientwidth, orginh = target.clientheight;
            clearinterval(timer);
            function run(angle) {
                if (isie) { // ie
                    cosdeg = math.cos(angle * math.pi / 180);
                    sindeg = math.sin(angle * math.pi / 180);
                    with (target.filters.item(0)) {
                        m11 = m22 = cosdeg; m12 = -(m21 = sindeg);
                    }
                    target.style.top = (orginh - target.offsetheight) / 2 + 'px';
                    target.style.left = (orginw - target.offsetwidth) / 2 + 'px';
                } else if (target.style.moztransform !== undefined) {  // mozilla
                    target.style.moztransform = 'rotate(' + angle + 'deg)';
                } else if (target.style.otransform !== undefined) {   // opera
                    target.style.otransform = 'rotate(' + angle + 'deg)';
                } else if (target.style.webkittransform !== undefined) { // chrome safari
                    target.style.webkittransform = 'rotate(' + angle + 'deg)';
                } else {
                    target.style.transform = "rotate(" + angle + "deg)";
                }
            }

            timer = setinterval(function () {
                i += 10;
                run(i);
                if (i > degree - 1) {
                    i = 0;
                    clearinterval(timer);
                }
            }, 10);
        }
        return  rotate ;

    } ();
笔记,js对象浅析

调用代码:

      img('demo', 360);

这两种方式,根据自己的习惯,我个人倾向前者。