cssTransform.js 优化版三

浅浅的花香味﹌ 2023-06-26 03:22 1阅读 0赞

> 终极版，减少参数传递，降低耦合度

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;

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关第三版前言

正本基本是自己翻译，翻译绝对有错误，就是这么自信，看的时候，自己注意下，如果感觉有语句不通，那么可能就是我翻译的出现了问题，可以自己翻找原文对比下。 > 其中自己的见...

雨点打透心脏的1/2处/ 2024年04月17日 17:08/ 0 赞/ 99 阅读

相关扫雷游戏（优化版）

![93aa8de871a34c98a160199a1867ee9c.png][] -------------------- 目录实现扫雷游戏：第一步：具体操作

客官°小女子只卖身不卖艺/ 2023年10月14日 12:41/ 0 赞/ 39 阅读

相关三字棋游戏（优化版）

![b0dbdb8d60114aeca305ee1a2169719e.png][] 实现三字棋游戏：第一步：分别创建test.c ,game.c ,test.

比眉伴天荒/ 2023年10月14日 12:38/ 0 赞/ 41 阅读

相关 cssTransform.js 优化版三

> 终极版，减少参数传递，降低耦合度 function Transform(element) { var transform = { };

浅浅的花香味﹌/ 2023年06月26日 03:22/ 0 赞/ 2 阅读

相关性能优化-循环优化[三]

独立于语言递归使用迭代替换递归调用栈太深，所有递归都能用迭代实现。以斐波那契数列为例子递归实现： var fib = function(n) {

忘是亡心i/ 2023年01月23日 03:53/ 0 赞/ 68 阅读

相关 SQL优化（三）:SQL优化实战

前两节基本是讲了SQL优化重要的工具大概思路，你连explain都看不明白，遇到慢查询一个SQL执行半天的情况，估计优化起来肯定无处着手。这节主要是SQL优化的具体实战，常

小灰灰/ 2022年10月19日 04:18/ 0 赞/ 303 阅读

相关冒泡排序优化版

上一篇我们讲了冒泡排序，它需要重复的走过所有元素，并需要进行比较，直到没有交换的元素，这样导致，在很多情况下效率比较低下。比如【1，2，5，8，9，10，11，14，13】这

偏执的太偏执、/ 2022年10月02日 10:41/ 0 赞/ 218 阅读

相关【MySql】Sql优化（三）——性能优化

一、前言当数据库数据达到一定数量的时候，结合数据库连接池Druid的可视化监控界面，对系统中运行的sql语句进行检测，对使用频繁、执行时间长的sql语句进行

ゞ浴缸里的玫瑰/ 2022年06月04日 01:29/ 0 赞/ 568 阅读

相关学生系统优化（三）- -细节优化

之前让师傅点了一下学生系统，我的内心是忐忑的。学生系统已经进行了快一个月了，而且中间还经厉了一个寒假，但是感觉自己已经改不出来什么东西了，也是有点不想改吧，所以就一直拖到了现在

短命女/ 2022年03月15日 01:10/ 0 赞/ 267 阅读

相关 MySQL 优化（三）

7.2.2 估算查询性能在大多数情况下，可以通过统计磁盘搜索次数来估算查询的性能。对小表来说，通常情况下只需要搜索一次磁盘就能找到对应的记录（因为索引可能已

痛定思痛。/ 2021年09月10日 03:56/ 0 赞/ 325 阅读