组件开发

[TOC]

一、谈谈组件

组件开发可以满足对象的多种表现形式，提高对象的复用性

那么组件开发是什么

组件开发：多组对象，像兄弟之间的关系（代码复用的一种形式）

1.1 拖拽为例

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<script>
    window.onload = function () {

        var d1 = new Drag();
        d1.init({ //配置参数
            id: 'div1'
        });

        var d2 = new Drag();
        d2.init({ //配置参数
            id: 'div2',
            toDown: function () {
                document.title = 'hello';
                document.getElementById(this.id).style.background = "#ccc";
            }
        });

        var d3 = new Drag();
        d3.init({ //配置参数
            id: 'div3',
            toDown: function () {
                document.getElementById(this.id).style.background = "#ddd";
            },
            toUp: function () {
                document.getElementById(this.id).style.background = "#aed";
            }
        });

        var d4 = new Drag();
        d4.init({ //配置参数
            id: 'div4',
            toUp: function () {
                document.title = 'beybye';
            }
        });

    };

    function Drag() {
        this.obj = null;
        this.disX = 0;
        this.disY = 0;

        this.settings = { //默认参数
            toDown: function () {},
            toUp: function () {}
        };

    }
    Drag.prototype.init = function (opt) {

        var This = this;

        this.obj = document.getElementById(opt.id);

        // 配置参数代替默认参数
        extend(this.settings, opt);

        this.obj.onmousedown = function (ev) {
            var ev = ev || window.event;
            This.fnDown(ev);

            This.settings.toDown();

            document.onmousemove = function (ev) {
                var ev = ev || window.event;
                This.fnMove(ev);
            };
            document.onmouseup = function () {
                This.settings.toUp();
                This.fnUp();
            };
            return false;
        };

    };

    Drag.prototype.fnDown = function (ev) {
        this.disX = ev.clientX - this.obj.offsetLeft;
        this.disY = ev.clientY - this.obj.offsetTop;
    };
    Drag.prototype.fnMove = function (ev) {
        this.obj.style.left = ev.clientX - this.disX + 'px';
        this.obj.style.top = ev.clientY - this.disY + 'px';
    };
    Drag.prototype.fnUp = function () {
        document.onmousemove = null;
        document.onmouseup = null;
    };

    function extend(obj1, obj2) {
        for (var attr in obj2) {
            obj1[attr] = obj2[attr];
        }
    }
</script>

二、深入组件

对面向对象的深入应用（UI组件，功能组件）

将配置参数、属性、方法三者分离

创建自定义事件：主要是跟函数有关，就是让函数能够具备事件的某些特性

有利于多人协作开发代码，如何去挂载自定义事件与事件函数

这是利用事件不会被覆盖的特性，都能执行

2.1 自定义事件的拖拽实例

window.onload = function () {

    var d1 = new Drag();
    d1.init({ //配置参数
        id: 'div1'
    });

    var d2 = new Drag();
    d2.init({ //配置参数
        id: 'div2'
    });

    bindEvent(d2, 'toDown', function () {
        document.title = 'hello';
    });

    bindEvent(d2, 'toDown', function () {
        document.body.style.background = '#acd';
    });

    var d3 = new Drag();
    d3.init({ //配置参数
        id: 'div3'
    });

    bindEvent(d3, 'toDown', function () {
        document.title = 'lin';
    });

    bindEvent(d3, 'toUp', function () {
        document.title = 'huijuan';
    });

    var d4 = new Drag();
    d4.init({ //配置参数
        id: 'div4'
    });

    bindEvent(d4, 'toUp', function () {
        document.title = 'byebye';
    });

};

function Drag() {
    this.obj = null;
    this.disX = 0;
    this.disY = 0;

    this.settings = { //默认参数

    };

}
Drag.prototype.init = function (opt) {

    var This = this;

    this.obj = document.getElementById(opt.id);

    extend(this.settings, opt);

    this.obj.onmousedown = function (ev) {
        var ev = ev || window.event;
        This.fnDown(ev);

        fireEvent(This, 'toDown');

        document.onmousemove = function (ev) {
            var ev = ev || window.event;
            This.fnMove(ev);
        };
        document.onmouseup = function () {
            This.fnUp();

            fireEvent(This, 'toUp');

        };
        return false;
    };

};

Drag.prototype.fnDown = function (ev) {
    this.disX = ev.clientX - this.obj.offsetLeft;
    this.disY = ev.clientY - this.obj.offsetTop;
};
Drag.prototype.fnMove = function (ev) {
    this.obj.style.left = ev.clientX - this.disX + 'px';
    this.obj.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function () {
    document.onmousemove = null;
    document.onmouseup = null;
};


function bindEvent(obj, events, fn) {

    obj.listeners = obj.listeners || {};
    obj.listeners[events] = obj.listeners[events] || [];

    obj.listeners[events].push(fn);

    if (obj.nodeType) {
        if (obj.addEventListener) {
            obj.addEventListener(events, fn, false);
        } else {
            obj.attachEvent('on' + events, fn);
        }
    }
}

function fireEvent(obj, events) { //主动触发自定义事件

    if (obj.listeners && obj.listeners[events]) {
        for (var i = 0; i < obj.listeners[events].length; i++) {
            obj.listeners[events][i]();
        }
    }

}

function extend(obj1, obj2) {
    for (var attr in obj2) {
        obj1[attr] = obj2[attr];
    }
}