为了账号安全,请及时绑定邮箱和手机立即绑定
老师的代码风格好乱啊,写可复用的组件居然不用oop,随意就定全局变量。如果我需要把组件写成可以在项目中复用的,要怎么重新包装?

正在回答

3 回答

public class Test{
    public static void main(String args[] ){
        System.out.println( "我去年买了个...");
    }
}


0 回复 有任何疑惑可以回复我~

风格的确值得吐槽。如果做成项目中复用的话,建议直接写成 Jquery的插件。这样调用就行了  $('#div').resizeable();


代码如下:

$.fn.resizeable = function(){
 $(this).each(function(){
   Resizable( $(this).attr('id') )
})
}
//  设置某个面板支持调整大小
function Resizable(panelId) {
    if (!window.__resizable_var) {
        with (window) {
            //  ctrl :控制元素,panel :面板 , type 类型
            m_panel = 1, m_ctrl = 1 , m_type = 1
            //  move:       是否侦听鼠标移动, 
            //  m_start_x:  鼠标相对ctrl元素的left、right 
            //  m_to_x: 鼠标的新位置
            moving = 0 , m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0;
            //  面板最小尺寸
            m_min_w = 100, m_min_h = 40;
        }
    }
    var panel = document.getElementById(panelId);
    //  插入调整控制元素
    var r = document.createElement("div");
    var b = document.createElement("div");
    var rb = document.createElement("div");
    r.class = r.className = 'ui-Resizable-r  ui-Resizable-ctrl';
    b.class = b.className = 'ui-Resizable-b  ui-Resizable-ctrl';
    rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';
    panel.appendChild(r);
    panel.appendChild(b);
    panel.appendChild(rb);
    //  鼠标移动处理
    function on_move() {
        if (moving) {
            //  计算最小的 left 和 top (使panel的新大小不能小于自身的位置)
            var min_left = 0
            var min_top = 0
            var to_x = Math.max(min_left + m_min_w, m_to_x - m_start_x);
            var to_y = Math.max(min_top + m_min_h, m_to_y - m_start_y);
            //  元素的新位置 = 鼠标新位置 - 鼠标相对元素的位置s
            switch (m_type) {
                case 'r' :
                    m_ctrl.style.left = to_x + "px";
                    m_panel.style.width = to_x + 10 + 'px';
                    break;
                case 'b' :
                    m_ctrl.style.top = to_y + "px";
                    m_panel.style.height = to_y + 10 + 'px';
                    break;
                case 'rb' :
                    m_ctrl.style.left = to_x + "px";
                    m_ctrl.style.top = to_y + "px";
                    m_panel.style.width = to_x + 20 + 'px';
                    m_panel.style.height = to_y + 20 + 'px';
                    break;
            }
        }
    }
    //   在控制元素中按下
    function on_mousedown(e, panel, ctrl, type) {
        var e = e || window.event;
        //  计算出鼠标页面位置 和 当前元素位置的差 = 鼠标相对元素的位置
        m_start_x = e.pageX - ctrl.offsetLeft;
        m_start_y = e.pageY - ctrl.offsetTop;
        m_panel = panel;
        m_ctrl = ctrl;
        m_type = type;
        //  开始处理移动事件
        moving = setInterval(on_move, 10);
    }
    //  为调整控制元素设置拖拽处理
    r.addEventListener('mousedown', function (e) {
        on_mousedown(e, panel, r, 'r');
    })
    b.addEventListener('mousedown', function (e) {
        on_mousedown(e, panel, b, 'b');
    })
    rb.addEventListener('mousedown', function (e) {
        on_mousedown(e, panel, rb, 'rb');
    });
    if (!window.__resizable_var) {
        //  页面鼠标移动侦听处理
        document.addEventListener('mousemove', function (e) {
            var e = window.event || e;
            m_to_x = e.pageX;
            m_to_y = e.pageY;
        })
        //  鼠标弹起处理
        document.addEventListener('mouseup', function (e) {
            clearInterval(moving);
            var cls = document.getElementsByClassName('ui-Resizable-ctrl');
            for (var i = 0; i < cls.length; i++) {
                cls[i].style.left = '';
                cls[i].style.top = '';
            }
 
        })
        window.__resizable_var = true;
    }
}


2 回复 有任何疑惑可以回复我~

哈哈,这个老师会在后面做组件时进行规范的。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信