cssTransform.js 優化版三

終極版，減少參數傳遞，降低耦合度

function Transform(element) {
    var transform = {};
    var transformValue = '';
    var props = ['scaleX', 'scaleY','rotate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'translateX', 'translateY', 'translateZ'];
    props.forEach(function (prop) {
        if (prop.indexOf('scale') >= 0) {
            transform[prop] = 1;
        } else {
            transform[prop] = 0;
        }
        Object.defineProperty(element, prop, {
            get: function () {
                return transform[prop];
            },
            set: function (value) {
                transformValue = '';
                transform[prop] = value;
                for (var name in transform) {
                    switch (name) {
                        case "scaleX":
                        case "scaleY":
                            transformValue += " " + name + "(" + transform[name] + ")";
                            break;
                        case "rotate":    
                        case "rotateX":
                        case "rotateY":
                        case "rotateZ":
                        case "skewX":
                        case "skewY":
                            transformValue += " " + name + "(" + transform[name] + "deg)";
                            break;
                        default:
                            transformValue += " " + name + "(" + transform[name] + "px)";
                    }
                }
                element.style.WebkitTransform = element.style.transform = transformValue;
            }
        });
    })
}

優化點

1. 調用更加簡單
2. 傳參更少
3. 耦合度極低，擴展性更強

使用（其實還有個優化點，這裏要寫兩行，可以變成一行）

var el = document.querySelector('.abc');
Transform(el);
el.translateX = 150;