封装WebUI的第一天

帅气与大侠

入口代码语法

[JavaScript] 纯文本查看 复制代码

var 主窗口 = new 窗口类;
主窗口.创建()
主窗口.宽高('300px', '300px')
主窗口.定位('绝对')
主窗口.Inset('0px')//等同于同时设置了left\top\rigin\bottom
主窗口.外边距("auto")
主窗口.阴影('0px 0px 6px 0px red')
主窗口.圆角度('6px')
console.log(主窗口);

封装的 窗口类

[JavaScript] 纯文本查看 复制代码

class 窗口类 extends 基类对象 {
    // 类的共有属性放到 constructor 里面,constructor是 构造器或者构造函数
    constructor() {
        super()

    }


    创建() {
        let div = document.createElement('div')
        this.窗口 = div;
        this.绑定元素(this.窗口)
        document.body.appendChild(div)
    }
}

基类对象代码

[JavaScript] 纯文本查看 复制代码

{
    var style = {
        /**
         * 设置目标元素的css样式
         * @param {HTMLDivElement} elem 目标元素
         * @param {Obj} obj css样式表达对象 { 属性 : 值 }
         * @returns {Obj} 返回css样式表达对象 { 属性 : 值 }
         */
        css: function (elem, obj) {
            let r = {};
            for (var i in obj) {
                if (obj != undefined) {
                    elem.style = obj;
                }
                r = elem.style;
            }
            return r;
        },

    }
    var 父元素;
    function 基类对象(目标元素) {
        if (this === window) throw `无法直接调用函数:基类对象()`;
        this.绑定元素(目标元素)
    };
    基类对象.prototype = {
        绑定元素: function (elem) {
            父元素 = elem == undefined ? 父元素 : elem;
            return 父元素;
        },
        内边距: function (内边距) {
            return style.css(父元素, {
                'padding': 内边距
            })
        },
        外边距: function (外边距) {
            return style.css(父元素, {
                'margin': 外边距
            })
        },
        宽高: function (宽度, 高度) {
            return style.css(父元素, {
                'width': 宽度,
                'height': 高度
            })
        },
        宽度: function (宽度) {
            return style.css(父元素, {
                'width': 宽度
            })
        },
        高度: function (高度) {
            return style.css(父元素, {
                'height': 高度
            })
        },
        /**
         * 设置窗口阴影
         * @param  {...String} 阴影表达式
         * @参数1 阴影类型:Outset=外阴影,Inset=内阴影
         * @参数2 x偏移量:阴影x坐标偏移多少
         * @参数3 y偏移量:同上
         * @参数4 模糊:阴影的模糊度
         * @参数5 扩张:阴影扩张度
         * @参数6 颜色值:阴影的颜色,可以是rgb或者hex
         * @语法例子1 阴影("0px 0px 6px 0px red")
         * @语法例子2 多重阴影写法:阴影("0px 0px 6px 0px red","Inset 0px 0px 6px 0px #000000")
         * @returns
         */
        阴影: function (...阴影表达式) {
            return style.css(父元素, {
                'box-shadow': 阴影表达式
            })
        },
        /**
         * 设置窗口圆角度
         * @param {*} 圆角度
         * @returns
         */
        圆角度: function (圆角度) {
            return style.css(父元素, {
                'border-radius': 圆角度
            })
        },
        /**
         * 设置窗口定位模式,详细解释:https://www.runoob.com/css/css-positioning.html
         * @param {String} 位置 内置中文值:绝对\相对\固定\继承\静态
         */
        定位: function (位置) {
            let position;
            switch (位置) {
                case "绝对": position = "absolute";
                    break;
                case "相对": position = "relative";
                    break;
                case "固定": position = "fixed";
                    break;
                case "继承": position = "inherit";
                    break;
                case "静态": position = "static";
                    break;
                default:
                    position = 位置;
                    break;
            }
            return style.css(父元素, { 'position': position })
        },
        /**
         * 设置内位置,相当于left\top\rigin\bottom=0px
         * @param Inset 一个参数=上下左右,2个参数=上下\左右,4个参数=上右下左
         * @returns 
         */
        Inset: function (Inset) {
            return style.css(父元素, {
                'inset': Inset
            })
        },
        左边: function (左边) {
            return style.css(父元素, {
                'left': 左边
            })
        },
        顶边: function (顶边) {
            return style.css(父元素, {
                'top': 顶边
            })
        },
        右边: function (右边) {
            return style.css(父元素, {
                'right': 右边
            })
        },
        底边: function (底边) {
            return style.css(父元素, {
                'bottom': 底边
            })
        },

    }

    基类对象.创建 = function (目标元素) {
        return new 基类对象(目标元素);
    }

    window.基类对象 = 基类对象;
}

北冥

大佬是搞忘了嘛

jtucar

不错的方法

fjgh

外星人群控

论坛里面做webUI的,几乎都搁置了，不知都是啥问题

miaozidai

666666666666666666666666

Xiaochuzhang

感谢分享