transform组件编写

    下面编写一个js文件来控制css的transform属性：

/**
 *
 *  该函数主要作用是控制css样式中的transform样式。
 *
 *  其中transform样式的常用属性是：
 *    transform:rotate(7deg);
 *    transform:translateX(x);
 *    transform:translateY(y);
 *    transform:scale(2);
 *  该函数也只操作上面的四个属性。
 *
 *  该函数接受三个参数和两个参数
 *      1、当该函数只有两个参数的时候就是读操作
 *      2、当该函数有三个参数的时候就是写操作
 *
 *   该函数的几种调用情况:
 *    写：
 *     css(node,"rotate",7);
 *     css(node,"translateX",100);
 *     css(node,"translateY",100);
 *     css(node,"scale",2);
 *
 *    读：
 *     css(node,"rotate");
 *     css(node,"translateX");
 *     css(node,"translateY");
 *     css(node,"scale");
 *
 * @param {*} node  要操作的DOM结点
 * @param {*} type  transform属性的值名称
 * @param {*} val   transform属性的值
 */
function css(node, type, val) {
    // 先判断node结点有没有transform属性
    if (typeof node === "object" && typeof node["transform"] === "undefined") {
        // 给node结点添加transform属性
        node["transform"] = {};
    }
    // 三个参数的情况---写操作
    if (arguments.length == 3) {
        var text = "";
        node["transform"][type] = val;
        // 遍历transform属性的每个值
        for (var item in node["transform"]) {
            if (node["transform"].hasOwnProperty(item)) {
                switch (item) {
                    case "translateX":
                    case "translateY":
                        text += item + "(" + node["transform"][item] + "px)";
                        break;
                    case "rotate":
                        text += item + "(" + node["transform"][item] + "deg)";
                        break;
                    case "scale":
                        text += item + "(" + node["transform"][item] + ")";
                        break;
                }
            }
        }
        // 给结点添加transform属性
        node.style.transform = node.style.webkitTransform = text;

    } else if (arguments.length == 2) {
        val = node["transform"][type];
        if (typeof val === "undefined") {
            // 给每个属性一个初始值
            switch (val) {
                case "translateX":
                case "translateY":
                    val = 0;
                    break;
                case "rotate":
                    val = 0;
                    break;
                case "scale":
                    val = 1;
                    break;
            }

        } else {
            return val;

        }

    } else {
        // 暂时不做处理
    }

}

    下面把该函数直接暴露给window对象—在自调用函数里面将定义的函数赋值给window对象的属性(使用命名空间)，这样一来只需要引入该代码所在的js文件，就可以直接调用该函数了。
    js中的全局变量和函数是作为window对象的属性和方法而存在

!(function(w) {
    w.transform = {};
    w.transform.css = function() {};
})(window)

完整版：

!(function(w) {
    w.transform = {};

    w.transform.css =
        /**
         *
         *  该函数主要作用是控制css样式中的transform样式。
         *
         *  其中transform样式的常用属性是：
         *    transform:rotate(7deg);
         *    transform:translateX(x);
         *    transform:translateY(y);
         *    transform:scale(2);
         *  该函数也只操作上面的四个属性。
         *
         *  该函数接受三个参数和两个参数
         *      1、当该函数只有两个参数的时候就是读操作
         *      2、当该函数有三个参数的时候就是写操作
         *
         *   该函数的几种调用情况:
         *    写：
         *     css(node,"rotate",7);
         *     css(node,"translateX",100);
         *     css(node,"translateY",100);
         *     css(node,"scale",2);
         *
         *    读：
         *     css(node,"rotate");
         *     css(node,"translateX");
         *     css(node,"translateY");
         *     css(node,"scale");
         *
         * @param {*} node  要操作的DOM结点
         * @param {*} type  transform属性的值名称
         * @param {*} val   transform属性的值
         */
        function css(node, type, val) {
            // 先判断node结点有没有transform属性
            if (typeof node === "object" && typeof node["transform"] === "undefined") {
                // 给node结点添加transform属性
                node["transform"] = {};
            }
            // 三个参数的情况---写操作
            if (arguments.length == 3) {
                var text = "";
                node["transform"][type] = val;
                // 遍历transform属性的每个值
                for (var item in node["transform"]) {
                    if (node["transform"].hasOwnProperty(item)) {
                        switch (item) {
                            case "translateX":
                            case "translateY":
                                text += item + "(" + node["transform"][item] + "px)";
                                break;
                            case "rotate":
                                text += item + "(" + node["transform"][item] + "deg)";
                                break;
                            case "scale":
                                text += item + "(" + node["transform"][item] + ")";
                                break;
                        }
                    }
                }
                // 给结点添加transform属性
                node.style.transform = node.style.webkitTransform = text;

            } else if (arguments.length == 2) {
                val = node["transform"][type];
                if (typeof val === "undefined") {
                    // 给每个属性一个初始值
                    switch (type) {
                        case "translateX":
                        case "translateY":
                            val = 0;
                            break;
                        case "rotate":
                            val = 0;
                            break;
                        case "scale":
                            val = 1;
                            break;
                    }

                } 
                    return val;

                

            } else {
                // 暂时不做处理
            }

        };


}(window))