• 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装


    // CSS 样式框架
    (function (xframe) {
        // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)【只要是需要使用到this获取到的元素集合这个变量的时候,这里就是需要进行链式访问的】
        xframe.extend({
            /**
             * 给DOM元素设置/取值CSS样式
             * @return {*}
             */
            css: function () {
                // 分为两种情况,一种是取值模式,一种是设置模式
                var arg = arguments,
                    len = arg.length,
                    j = this.length - 1;
                if (len === 0) {
                    // 没有参数的话,就直接返回这个DOM集合
                    return this;
                } else if (len === 1) {
                    // 取值模式
                    if (typeof arg[0] === 'string') {
                        if (this[0].currentStyle) {
                            // w3c
                            return this[0].currentStyle[arg[0]];
                        } else {
                            // 其他IE
                            return getComputedStyle(this[0], false)[arg[0]];
                        }
                    } else if (typeof arg[0] === 'object') {
                        // 如果要获取一系列对象的属性信息, 如果传过来的一个参数是一个json对象的话,这里也采用这种方式
                        // {name : xiugang, age : 18}
                        for (var item in arg[0]) {
                            // 从后向前开始遍历,设置模式
                            for (; j >= 0; j--) {
                                // 由于CSS在设置值的时候的取值模式和设置模式的不同,这里需要先使用驼峰表示法进行处理一下
                                // 先把item转换为:backgroundcolor --> backgroundColor
                                item = $.camelCase(item)
                                this[j].style[item] = arg[0][item];
                            }
                        }
                    }
                } else if (len === 2) {
                    // 设置模式
                    for (; j >= 0; j--) {
                        // 第一个参数是我们需要设置的值
                        this[j].style[$.camelCase(arg[0])] = arg[1];
                    }
                }
                return this;
            },
            /**
             * 隐藏一个元素
             * @return {hide}
             */
            hide: function () {
                var j = this.length - 1;
                for (; j >= 0; j--) {
                    this[j].style.display = 'none';
                }
                return this;
    
    
                // 方法二:使用之前封装好的框架进行遍历
                this.each(function () {
                    this.style.display = 'none';
                })
            },
            /**
             * 显示元素
             * @return {show}
             */
            show: function () {
                this.each(function () {
                    this.style.display = 'block';
                })
                return this;
            },
            /**
             * 获取元素的宽度
             * @return {*}
             */
             function () {
                return this[0].clientWidth;
            },
            /**
             * 获取元素的高度
             * @return {*}
             */
            height: function () {
                return this[0].clientHeight;
            },
            /**
             * //当元素出现滚动条时候,这里的高度有两种:可视区域的高度 实际高度(可视高度+不可见的高度)
             * 获取元素的滚动宽度
             * @return {*}
             */
            scrollWidth: function () {
                return this[0].scrollWidth;
            },
            /**
             * 获取元素的滚动高度
             * @return {*}
             */
            scrollHeight: function () {
                return this[0].scrollHeight;
            },
            /**
             * 元素滚动的时候 如果出现滚动条 相对于左上角的偏移量
             * @return {*}
             */
            scrollTop: function () {
                return this[0].scrollTop;
            },
            /**
             * 元素滚动的时候相对于左上角的距离
             * @return {*}
             */
            scrollLeft: function () {
                return this[0].scrollLeft;
    
            },
        });
    
        // 不需要参与链式访问的
        xframe.extend(xframe, {
            getThis: function () {
                console.log(xframe, typeof this);  // function, 这里的this指向的实际上是一个函数function (selector, context)
            },
    
            /**
             * 获取屏幕的高度
             * @return {number}
             */
            screenHeight: function () {
                return window.screen.height;
            },
            /**
             * 虎丘屏幕的款U盾
             * @return {number}
             */
            screenWidth: function () {
                return window.screen.width;
            },
            /**
             * 获取浏览器窗口文档显示区域的宽度,不包括滚动条
             * @return {number}
             */
            wWidth: function () {
                return document.documentElement.clientWidth;
            },
            /**
             * 获取浏览器窗口文档显示区域的高度,不包括滚动条
             * @return {number}
             */
            wHeight: function () {
                return document.documentElement.clientHeight;
            },
    
            /**
             * 文档滚动区域的整体的高
             * @return {number}
             */
            wScrollHeight: function () {
                return document.body.scrollHeight;
            },
            /**
             * 文档滚动区域的整体的宽度
             * @return {number}
             */
            wScrollWidth: function () {
                return document.body.scrollWidth;
            },
            /**
             *  获取滚动条相对于其顶部的偏移
             *  @return {number}
             */
            wScrollTop: function () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                return scrollTop;
            },
            /**
             * 获取整个文档窗口的距离整个窗口的宽度和高度(滚动条相对于顶部和左边的距离)
             * @return {number}
             */
            wScrollLeft: function () {
                var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
                return scrollLeft;
            }
        });
    })(xframe);
  • 相关阅读:
    推荐一个c++小巧开源且跨平台的图像解码库
    设计模式---桥接模式
    redis数据结构及其使用场景、持久化、缓存淘汰策略
    mysql------explain工具
    mysql索引数据结构
    java8(2)--- Stream API
    java8(1)--- lambda
    springboot自动装配(2)---实现一个自定义自动装配组件
    springboot自动装配(1)---@SpringBootApplication注解怎么自动装配各种组件
    自己挖的坑跪着也要填完---mapper配置文件和java源文件在同一包下
  • 原文地址:https://www.cnblogs.com/52tech/p/9343241.html
Copyright © 2020-2023  润新知