随手写的一个 DataV代码 写到一半写不动了 弃坑！~

!(function(v, g){
    g["DataV"] || (g["DataV"] = v());
})(function(){
    
    const zoom = [0, 20, 40, 60, 80, 99];
    
    // 获取唯一序列码
    let xid_i = 0;
    const getXid = function(){
        xid_i++;
        return "xid_" + (xid_i);
    }
    
    const getInt = function(string){
        let i = parseInt(string);
        return isNaN(i) ? 0 : i;
    }
    
    // 初始化DataV对象
    const exports = {};
    
    // 初始化容器内容
    const createApp = exports.createApp = function(dom, opt){
        return new DataV(dom, opt);
    }
    
    // dataV 初始化配置
    const opt_def = {
        width: "100%",
        height: "100%"
    }
    
    // dataV容器对象
    const DataV = function(dom, opt){
        this.opt = Object.assign(opt_def, opt);
        this.dom = dom;
        this.plugin = []; // 容器内部组件
        this.domInit(this.dom);
        this.dataVInit(this.dom); // 初始化对象属性
        
        // 创建右键事件对象
        this.rightFunctionOpt = new RightFunction({ 
            dom: this.dom, 
            menu: [{ 
                name: "新增一个div" , value: this.addDiv.bind(this) 
            }]
        });
        
        // 首先威触发dom绑定事件
        this.initEvent(this.dom, "contextmenu");
    }
    
    const domInit = function(dom){
        const opt = this.opt;
        dom.style.cssText = `width: ${opt.width}; height: ${opt.height};`;
        dom.setAttribute("data-contextmenu", "onDomContextmenu")
    }
    
    const dataVInit = function(dom){
        // 初始化内部组件事件监听
        this.initEvent(dom, "click");
    }
    
    const add = function(plugin){
        this.plugin.push(plugin);
        this.dom.appendChild(plugin.dom);
    }
    
    const remove = function(){
        
    }
    
    const initEvent = function(dom, type, fnName){
        dom.addEventListener(type,(e) => {
            e.preventDefault();
            var _this = e.target;
            for( ; ; ){
                e.target = _this;
                if( !_this || !_this.parentElement ) break;
                if( _this.dataset[e.type] ) {
                    const fn = _this.dataset[e.type];
                    typeof fn === "string" && this[fn] && this[fn](e, this);
                }
                if( _this == dom ){ 
                    // if( this[fnName || "on"+e.type] ) {
                    //     this[fnName || "on"+e.type](e, this);
                    //     break;
                    // }
                    break; 
                }
                _this = _this.parentElement;
            }
        });
    }    
    
    const DataVonDomContextmenu = function(e){
        this.rightFunctionOpt.show(e.pageX, e.pageY);
    }
    
    const addDiv = function(){
        this.add(new DivElement());
    }
    
    DataV.prototype = {
        add,  // 添加组件
        remove, // 删除组件
        initEvent, // 初始化组件事件监听
        domInit,   // 初始化dom
        dataVInit,  // 初始化数据
        onDomContextmenu: DataVonDomContextmenu,
        addDiv: addDiv
    }
    
    
    
    // --------------------   右键功能
    const RightFunctionOpt = {
        dom: document.body,
        menu: [{ name: "测试", value: ()=>{ alert("测试") }, dom: null}]
    }
    const RightFunction = function(_opt){
        const opt = this.opt = Object.assign(RightFunctionOpt, _opt);
        
        this.dom = this.createDom();
        
        this.initEvent(this.dom, "contextmenu");
        
        this.initEvent(this.dom, "click");
        
        this.render();
        
        this.cssText = `
            .\${xid} {
                left: \${left};
                top: \${top};
                position: absolute;
                border: solid 1px #000000;
                border-radius: 3px;
            }
            
            .\${xid} div {
                padding: 4px;
                border-bottom: 1px #333333;
            }
        `;
        
        this.datas = {
            left: "0px",
            top: "0px",
        }
        
        this.styled = this.createStyle();
    }
    
    RightFunction.prototype = {
        createStyle (){
            return new Styled(this.dom, this.cssText, this.datas);
        },
        createDom (){
            const div = document.createElement("div");
            div.className = "rightFunction";
            return div;
        },
        render (){
            const menu = this.opt.menu;
            const optionDom = menu.map((options, i)=>{
                return `<div data-index='${i}' data-click='selectOption'>${ options.name }</div>`;
            })
            this.dom.innerHTML = optionDom;
        },
        show (x, y){
            this.datas.left = x + "px";
            this.datas.top = y + "px";
            this.styled.setDatas(this.datas);
            this.opt.dom.appendChild(this.dom);
        },
        hide (){
            this.dom.remove();
        },
        initEvent: initEvent,
        
        selectOption (e){
            const menu = this.opt.menu[e.target.dataset.index]
            menu.value && menu.value(menu, this.opt.menu, this);
        }
    }
    
    
    //  -----------------------   关于样式管理器
    const Styled = function(dom, styled, datas, isOnlyXid){
        this.xid = isOnlyXid || getXid();    
        this.dom = dom;
        this.dom.classList.add(this.xid);
        this.styled = styled.replace(/\t|\n/g,"");
        this.datas = datas;
        
        this.styleElement = this.createStyle();
        this.render();
    }
    
    Styled.prototype = {
            
        // 生成唯一识别码
        createStyle (){
            const o = document.head.querySelector("."+this.xid);
            if( o ){ 
                return o;
            }
            
            const style = document.createElement("style");
            document.head.appendChild(style);
            style.classList.add(this.xid);
            return style;
        },
        
        setDatas(opt) {
            this.datas = Object.assign(this.datas, opt);
            this.render();
        },
        
        render (){
            // this.styleElement.innerHTML = eval(`()=>{ var {${Object.keys(this.datas)}} = this.datas, xid=${this.xid}; return {} }()`);
            this.styleElement.innerHTML = function(){ 
                eval(`var {${Object.keys(this.datas)}} = this.datas, xid="${this.xid}"`); 
                return eval("\`"+this.styled+"\`");
            }.call(this);
        }
    }
    
    
    
    // 一个Div对象
    class DivElement {
        constructor(arg) {
            this.dom = this.createElement();
            // 数据模型
            this.datas = {};
            // 样式数据模型
            this.styleDatas = { 
                position: "",
                top: "",
                left: "",
                transformX: 0,
                transformY: 0,
                color: "",
                width: "",
                height: "100px", 
                fontWeight: "", 
                fontSize: "12px" ,
                padding: "4px 4px 4px 4px",
                margin: "4px 4px 4px 4px",
                border: "solid 1px #f0f0f0",
                borderTop: "solid 1px #ffffff",
                borderBottom: "solid 1px #ffffff",
                borderLeft: "solid 1px #ffffff",
                borderRight: "solid 1px #ffffff",
                backgroundColor: "",
                backgroundImage: "",
            };
            // 样式模型
            this.style = ` .\${xid} { 
                color: \${color};
                font-size: \${fontSize};
                font-weight: \${fontWeight};
                // border: \${border}; 
                border-top: \${borderTop};
                border-bottom: \${borderBottom};
                border-left: \${borderLeft};
                border-right: \${borderRight};
                padding: \${padding}; 
                margin: \${margin};
                height: \${height};
                width: \${width};
                background-color: \${backgroundColor};
                background-image: url(\${backgroundImage});
                background-repeat: no-repeat;
                background-size: contain;
                position: \${position};
                top: \${top};
                left: \${left};
                transform: translate(\${transformX}px, \${transformY}px);
            `;
            // 样式模型
            this.styled = new Styled(this.dom, this.style ,this.styleDatas);
            // 蒋婷点击事件
            this.initEvent(this.dom, "click");
        }
        
        isCanDrop (){
            return this.styleDatas.position === "absolute";
        }
        
        editOptionChange (ary){
            
        }
        
        // 进入选中状态
        showSelectModel (){
            // 当前选中模式
            selectModel.setPlugin(this);
            // 弹出样式编辑
            styleEdit.setPlugin(this);
        }
        
        clickDiv (){
            this.showSelectModel();
        }
        
        createElement (){
            const div = document.createElement("div");
            div.setAttribute("data-click", "clickDiv");
            return div;
        }
        
        render (){
            
        }
        
        // 渲染数据
        renderData (){
            
        }
        
        // 渲染样式
        renderStyle (){
            
        }
        
        initEvent (){
            return initEvent.apply(this, arguments);
        }
        
        onstyleEdit (styleEdit){
            // 编辑模块
            this.editOption = [{
                type: "computed", value: this.styleDatas, change: (e)=> { this.styleDatas = { ...this.styleDatas, ...e }; }
            },{
                type: "img", name: "背景图片", value: this.styleDatas.backgroundImage, change: (e)=> { this.styleDatas.backgroundImage = e }
            },{
                type: "select", name: "定位类型", value: this.styleDatas.position, options: [{ name: "全局定位", value: "absolute" }, { name: "默认定位", value: "" }], change: (e)=> { this.styleDatas.position = e; }
            }];
            
            styleEdit.onchange = ()=>{ 
                this.styled.setDatas(this.styleDatas);
                // 当前选中模式
                selectModel.setPlugin(this);
            };
        }
    }
    
    // 选中，操作模块
    class SelectModel {
            
        constructor(plugin) {
            
            this.parentPlugin = this.plugin;
            
            this.dom = this.createElement();
            
            this.style = `
                .\${xid} { position: absolute; top: \${top}; left: \${left}; 
                           width: \${width}; height: \${height}; border: solid 1px #2e78ff; 
                           transform: translate(\${offx}px, \${offy}px);
                }
            `;
            
            this.styleDatas = { top: "0px", left: "0px", width: "0px", height: "0px", offx: 0, offy: 0 };
            
            this.styled = new Styled(this.dom, this.style, this.styleDatas)
            
        }
        
        setDrop (Drop){
            this.drop = new Drop(this.dom, this.dropMoveChange.bind(this), this.dropMoveChangeEnd.bind(this));
        }
        
        dropMoveChangeEnd (){
            if( !this.plugin.isCanDrop() ) return;
            this.styleDatas.top = getInt(this.styleDatas.top) + this.styleDatas.offy + "px";
            this.styleDatas.left = getInt(this.styleDatas.left) + this.styleDatas.offx + "px";
            this.styleDatas.offy = 0;
            this.styleDatas.offx = 0;
            this.styled.setDatas(this.styleDatas);
            
            // 联动当前选中的组件
            this.plugin.styleDatas.top = getInt(this.plugin.styleDatas.top) + this.plugin.styleDatas.transformY + "px";
            this.plugin.styleDatas.left = getInt(this.plugin.styleDatas.left) + this.plugin.styleDatas.transformX + "px";
            this.plugin.styleDatas.transformX = 0;
            this.plugin.styleDatas.transformY = 0;
            this.plugin.styled.setDatas(this.plugin.styleDatas);
        }
        
        dropMoveChange (x, y){
            if( !this.plugin.isCanDrop() ) return;
            
            this.styleDatas.offx = x;
            this.styleDatas.offy = y;
            this.styled.setDatas(this.styleDatas);
            
            // 联动当前选中的组件
            this.plugin.styleDatas.transformX = x;
            this.plugin.styleDatas.transformY = y;
            this.plugin.styled.setDatas(this.plugin.styleDatas);
        }
        
        createElement (){
            const div = document.createElement("div");
            return div;
        }
        
        // 获取当前组件的dom位置信息
        getDomRects(dom){
            return dom.getClientRects()[0];
        }
        
        setPlugin (plugin){
            this.plugin = plugin;
            const rect = this.getDomRects(plugin.dom);
            this.styleDatas.width = rect.width + "px";
            this.styleDatas.height = rect.height + "px";
            this.styleDatas.top = rect.top + "px";
            this.styleDatas.left = rect.left + "px";
            this.styled.setDatas(this.styleDatas);
            
            this.show();
        }
        
        show(){
            document.body.appendChild(this.dom);
        }
        
        hide(){
            this.dom.remove();
        }
        
    }
    
    // 创建全局得选中管理器
    const selectModel = new SelectModel();
    
    // 关于style编辑器
    class StyleEdit {
        
        constructor(styleEditOption) {
            
            // 需要控制的内容
            this.editOption = [{ name: "颜色", inputType: "color" , type: "input" }];
            
            this.editElement = [];
            
            this.dom = this.createElement();
            
            // this.initEvent(this.dom, "change");
            this.getStyled();
            
        }
        
        getStyled (){
            this.styled = new Styled(this.dom, `
                .\${xid} { 
                    position: absolute; top: 15px; right: 15px;
                    border: solid 1px #000000; padding: 8px; 
                    background: #fff;
                    z-index: ${zoom[5]};
                }`, {}, this.constructor.xid);
        }
        
        createElement (){
            const div = document.createElement("div");
            div.classList.add("styleEdit");
            return div;
        }
        
        render (){
            this.dom.remove();
            this.dom.innerHTML = "";
            // 根据配置的可编辑方案填补内容
            this.editOption.forEach((e)=>{
                this.dom.appendChild(this.getRenderDom(e));
            })
        }
        
        getRenderDom (opt){
            let el = this.editElement.find((element)=>{ return element.type === opt.type });
            el = new el(opt);
            el.setEdit(this);
            return el.dom;
        }
        
        setPlugin (plugin){
            this.plugin = plugin;
            plugin.onstyleEdit(this);
            this.editOption = plugin.editOption;
            this.render();
            this.show();
        }
        
        addElementType (EditElement){
            this.editElement.push(EditElement);
        }
        
        show (){
            document.body.appendChild(this.dom);
        }
        
        hide (){
            this.dom.remove();
        }
        
        // 完整得组件变化调用事件 外部定义得 内部不需要实现
        onchange (){ }
        
        // 每一行变化触发
        changeElement (){
            this.onchange();
        }
        
    }
    
    // 拖动插件
    const Drop = function(dom, fn, efn){
        this.dom;
        this.cover = this.createCover();
        this.setBox(dom);
        this.onchange = fn;
        this.onchengeEnd = efn;
    }
    Drop.prototype = {
        createCover (){
            const divCover = document.createElement("div");
            divCover.style.cssText = `
                position: absolute;
                top:0;
                left: 0;
                width: 100%;
                height:100%;
            `
            return divCover;
        },
        setBox : function(dom){
            this.element = dom;
             dom.addEventListener("mousedown",this.down.bind(this));
        },
        down : function(event){
            // 再地图上创建一个全屏
            document.body.appendChild(this.cover);
            this._move = this.move.bind(this);
            this._up = this.up.bind(this);
            // this._enter = this.enter.bind(this);
            // this.cover.addEventListener("mouseenter",this.__enter);
            this.cover.addEventListener("mousemove",this._move);
            this.cover.addEventListener("mouseup",this._up); // 绑定释放事件
        },
        enter (event){
            this.startX = event.pageX;
            this.startY = event.pageY;
        },
        up : function(event){
            this.cover.removeEventListener("mousemove",this._move);
            this.cover.removeEventListener("mouseup",this._up); // 绑定释放事件
            // this.cover.addEventListener("mouseenter",this.__enter);
            this._move = null;
            this._up = null;
            this.startX = null;
            this.startY = null;
            // this.__enter = null;
            this.cover.remove();
            this.onchengeEnd();
        },
        move : function(event){
            if( !this.startX ) return this.enter(event);
            var left = event.pageX - this.startX;
            var top = event.pageY - this.startY;
            console.log( this.startX, this.startY, event.pageX, event.pageY)
            this.onchange(left, top);
        }
    }

    selectModel.setDrop(Drop);
    
    // 实例化样式编辑实例
    const styleEdit = new StyleEdit();
    
    // 输入框的编辑类型
    class EditInputElement {
        
        static type = "input";
        
        static xid = getXid();
        
        initEvent (){
            return initEvent.apply(this, arguments);
        }
        
        constructor(arg) {
            
            this.edit = null;
            
            this.options = arg;
            
            this.dom = this.getRenderDom(arg);
            
            this.initEvent(this.dom, "change");
            
            this.getStyled();
        }
        
        getStyled (){
            this.styled = new Styled(this.dom, `
                .\${xid} { 
                    border: solid 1px #000000; padding: 8px; 
                }`, {}, this.constructor.xid);
        }
        
        getRenderDom ( { name, value, inputType } ){
            const div = document.createElement("div");
            div.classList.add("styleEditRow");
            div.innerHTML = `
                <div> ${name} </div>
                <div> <input data-change='changeValue' value='${value}' type='${inputType}' ></div>
            `
            return div;
        }
        
        setEdit (edit){
            this.edit = edit;
        }
        
        changeValue (options){
            this.options.change(options.target.value);
            this.edit.changeElement(options);
        }
    }
    
    // 盒子模型编辑插件
    class ComputedElement extends EditInputElement {
        static type = "computed";
        
        static xid = getXid();
        
        constructor (arg){
            super(arg);
            
            this.initEvent(this.dom,"click");
        }
        
        getStyled (){
            const xid = this.constructor.xid;
            const options = this.options.value;
            this.styleDatas = {
                ...options,
                borderTop: options.borderTop.split(" "), // "border 1px #ffffff".split(" "),
                borderBottom: options.borderBottom.split(" "), // "border 1px #ffffff".split(" "),
                borderLeft: options.borderLeft.split(" "), // "border 1px #ffffff".split(" "),
                borderRight: options.borderRight.split(" ") // "border 1px #ffffff".split(" "),
            };
            this.styled = new Styled(this.dom, `
                .\${xid} { 
                    border: solid 1px #000000; padding: 8px; 
                }
                .\${xid} .computedBx_${xid} { height: 35px; line-height: 35px; position: relative;text-align: center; font-size: 12px; }
                .\${xid} .top_${xid}{ position: absolute; padding: 2px; border: solid 1px #f0f0f0; top: 0px; left: 0px; width: 100%; height: 4px; background-color: \${borderTop[2]}; box-sizing: border-box; }
                .\${xid} .bottom_${xid}{ position: absolute; padding: 2px; border: solid 1px #f0f0f0; bottom: 0px; left: 0px; width: 100%; height: 4px; background-color: \${borderBottom[2]}; box-sizing: border-box;}
                .\${xid} .left_${xid}{ position: absolute; padding: 2px; border: solid 1px #f0f0f0; top: 0px; left: 0px; width: 4px; height: 100%; background-color: \${borderLeft[2]}; box-sizing: border-box;}
                .\${xid} .right_${xid}{ position: absolute; padding: 2px; border: solid 1px #f0f0f0; top: 0px; right: 0px; width: 4px; height: 100%; background-color: \${borderRight[2]}; box-sizing: border-box;}
                `, this.styleDatas, this.constructor.xid);
        }
        
        getRenderDom ( { name, value, inputType } ){
            const div = document.createElement("div");
            div.classList.add("styleEditRow");
            const xid = this.constructor.xid;
            const options = this.options.value;
            div.innerHTML = `
                <div> 盒子模型 </div>
                <div class='computedBx_${xid}'> 
                    <div data-click='border' data-bordertype='borderTop' class='top_${xid}'></div>
                    <div data-click='border' data-bordertype='borderBottom' class='bottom_${xid}'></div>
                    <div data-click='border' data-bordertype='borderLeft' class='left_${xid}'></div>
                    <div data-click='border' data-bordertype='borderRight' class='right_${xid}'></div>
                    <div data-click='border' data-borderType='border'>border颜色</div>
                </div>
                <div class='computedBx_wh'>
                    <div>
                        <div>宽度</div>
                        <input type='text' data-change='changeAttr' data-type='width' value='${options.width}' />
                    </div>
                    <div>
                        <div>高度</div>
                        <input type='text' data-change='changeAttr' data-type='height' value='${options.height}' />
                    </div>
                </div>
            `
            return div;
        }
        
        // 改变属性
        changeAttr (e){
            this.styleDatas[e.target.dataset.type] = e.target.value;
            this.changeValue(this.getJson());
        }
        
        border (e){
            let type = [e.target.dataset.bordertype];
            if( type[0] == "border" ) { type = ["borderTop", "borderBottom", "borderLeft", "borderRight"] }
            this.getColor().then((color)=>{
                type.forEach((t)=>{
                    // 修改对应的样式
                    this.styleDatas[t][2] = color;
                })
                this.styled.setDatas(this.styleDatas);
                this.changeValue(this.getJson());
            })
        }
        
        getJson (){
            return {
                ...this.styleDatas,
                borderTop: this.styleDatas.borderTop.join(" "),
                borderBottom: this.styleDatas.borderBottom.join(" "),
                borderLeft: this.styleDatas.borderLeft.join(" "),
                borderRight: this.styleDatas.borderRight.join(" "),
            }
        }
        
        getColor (){
            return new Promise((resovle)=>{
                const ipt = document.createElement("input");
                ipt.type = "color";
                ipt.onchange = function(e){
                    resovle(e.target.value);
                }
                ipt.click();
            })
        }
        
        changeValue (options){
            this.options.change(options);
            this.edit.changeElement(options);
        }
    }
    
    const fs = new FileReader();
    
    // 图片编辑类型
    class ImageElement extends EditInputElement {
        static type = "img";
        
        static xid = getXid();
        
        constructor (arg){
            super(arg);
            
            this.initEvent(this.dom,"click");
        }
        
        getStyled (){
            const xid = this.constructor.xid;
            const options = this.options.value;
            this.styleDatas = {
                imagesUrl: options
            };
            this.styled = new Styled(this.dom, `
                .\${xid} { 
                    margin: 4px; 
                    padding: 8px; 
                    height: 150px;
                    width: 100%;
                }
                .computedBx_\${xid} { background: url(\${imagesUrl}); width: 100%; height: 100%; background-repeat: no-repeat;background-size: contain;}
                `, this.styleDatas, this.constructor.xid);
        }
        
        getRenderDom ( { name, value, inputType } ){
            const div = document.createElement("div");
            div.classList.add("styleEditRow");
            const xid = this.constructor.xid;
            div.innerHTML = `
                <div> ${name} </div>
                <div class='computedBx_${xid}' data-click='updateImage'> 
                
                </div>
            `
            return div;
        }
        
        getImage (){
            return new Promise((resovle)=>{
                const ipt = document.createElement("input");
                ipt.type = "file";
                ipt.onchange = function(e){
                    // resovle(e.target.value);
                    fs.onload = function(e){
                        resovle(e.currentTarget.result);
                    }
                    fs.readAsDataURL(e.target.files[0]);
                }
                ipt.click();
            })
        }
        
        updateImage (){
            this.getImage().then((base64)=>{
                this.styleDatas.imagesUrl = base64;
                this.styled.setDatas(this.styleDatas);
                this.changeValue(this.styleDatas);
            })
        }
        
        changeValue (options){
            this.options.change(options.imagesUrl);
            this.edit.changeElement(options.imagesUrl);
        }
    }
    
    // 多选
    // 图片编辑类型
    class SelectElement extends EditInputElement {
        static type = "select";
        
        static xid = getXid();
        
        constructor (arg){
            super(arg);
            
            this.initEvent(this.dom,"click");
        }
        
        getStyled (){
            const xid = this.constructor.xid;
            const options = this.options.value;
            this.styleDatas = {
                // imagesUrl: options
            };
            this.styled = new Styled(this.dom, `
                .\${xid} { 
                    margin: 4px; 
                    padding: 8px; 
                    height: 150px;
                    width: 100%;
                }
                `, this.styleDatas, this.constructor.xid);
        }
        
        getRenderDom ( { name, value, options } ){
            const div = document.createElement("div");
            div.classList.add("styleEditRow");
            const xid = this.constructor.xid;
            div.innerHTML = `
                <div> ${name} </div>
                <div class='computedBx_${xid}'> 
                    <select data-change="changeValue">
                        ${ options.map((e)=> `<option ${e.value === value && "selected"} value='${e.value}'>${e.name}</option>` ) }
                    </select>
                </div>
            `
            return div;
        }
        
        changeValue (options){
            this.options.change(options.target.value);
            this.edit.changeElement();
        }
    }
    
    // input编辑类型
    styleEdit.addElementType(EditInputElement);
    styleEdit.addElementType(ComputedElement);
    styleEdit.addElementType(ImageElement);
    styleEdit.addElementType(SelectElement);
    
    return exports;
    
}, window)