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;
目录
相关文章
|
26天前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
116 62
|
29天前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
|
22天前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
65 31
|
1月前
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
1月前
|
缓存 JavaScript 前端开发
介绍一下 JavaScript 中数组方法的常见优化技巧
通过合理运用这些优化技巧,可以提高 JavaScript 中数组方法的执行效率,提升代码的整体性能。在实际开发中,需要根据具体的业务场景和数据特点选择合适的优化方法。
28 6
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
1月前
|
JSON 监控 JavaScript
Node.js-API 限流与日志优化
Node.js-API 限流与日志优化
|
2月前
|
存储 JavaScript 前端开发
JavaScript垃圾回收机制与优化
【10月更文挑战第21】JavaScript垃圾回收机制与优化
38 5
|
3月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
192 13
下一篇
DataWorks