【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 {*}
         */
        width: 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);