一个前端博客(8)——插件

插件，通常在原有网站功能的基础上增加系统功能，以实现其他的效果。这里我们的base.js基础库里有一些是经常用到的基础功能，还有些是我们不常用且代码很长的功能，我们将它们做成插件，供我们随时使用。

例如base.js里的拖拽功能:

//拖拽效果
Tar.prototype.drag = function() {
    for(var i = 0; i < this.elements.length; i++) {
        addEvent(this.elements[i], 'mousedown', function(e) {
            if(trim(this.innerHTML).length == 0) e.preventDefault();
            var _this = this;
            var diffX = e.clientX - _this.offsetLeft;
            var diffY = e.clientY - _this.offsetTop;
            if(e.target.tagName == "H2") {
                addEvent(document, 'mousemove', move);
                addEvent(document, 'mouseup', up);
            }else{
                removeEvent(document, 'mousemove', move);
                removeEvent(document, 'mouseup', up);
            }

            function move(e) {
                var e = getEvent(e);
                var left = e.clientX - diffX;
                var top = e.clientY - diffY;
                if(left < 0) {
                    left = 0;
                }else if(left > getInner().width - _this.offsetWidth) {
                    left = getInner().width - _this.offsetWidth;
                }
                if(top < 0) {
                    top = 0;
                }else if(top > getInner().height - _this.offsetHeight) {
                    top = getInner().height - _this.offsetHeight;
                }

                _this.style.left = left + "px";
                _this.style.top = top + "px";

                if(typeof _this.setCapture != 'undefined') {
                    _this.setCapture();
                }
            }
            function up(e) {
                removeEvent(document, 'mousemove', move);
                removeEvent(document, 'mouseup', up);
                if(typeof _this.releaseCapture != 'undefined') {
                    _this.releaseCapture();
                }
            }
        });
    }
    return this;
}

我们可以将它的内部放到一个叫base_dray.js的文件里。而在base.js文件中不会出现它们，那么我们想用的时候如何调用呢？在这儿之前我们先为Tar添加一个新的方法。

我们为Base对象创建一个extend方法,这个方法用于调用插件，有两个参数插件的名字name和具体的方法fn:

Tar.prototype.extend = function(name, fn) {

}

它的功能是调用插件，可以理解为为Tar添加一个叫name的方法,通过数组方式来添加:

Tar.prototype.extend = function(name, fn) {
    Tar.prototype[name] = fn;
}

这样我们回到base_drag.js里，修改一下内部:

$().extend('drag', function() {
    for(var i = 0; i < this.elements.length; i++) {
        addEvent(this.elements[i], 'mousedown', function(e) {
            if(trim(this.innerHTML).length == 0) e.preventDefault();
            var _this = this;
            var diffX = e.clientX - _this.offsetLeft;
            var diffY = e.clientY - _this.offsetTop;
            if(e.target.tagName == "H2") {
                addEvent(document, 'mousemove', move);
                addEvent(document, 'mouseup', up);
            }else{
                removeEvent(document, 'mousemove', move);
                removeEvent(document, 'mouseup', up);
            }

            function move(e) {
                var e = getEvent(e);
                var left = e.clientX - diffX;
                var top = e.clientY - diffY;
                if(left < 0) {
                    left = 0;
                }else if(left > getInner().width - _this.offsetWidth) {
                    left = getInner().width - _this.offsetWidth;
                }
                if(top < 0) {
                    top = 0;
                }else if(top > getInner().height - _this.offsetHeight) {
                    top = getInner().height - _this.offsetHeight;
                }

                _this.style.left = left + "px";
                _this.style.top = top + "px";

                if(typeof _this.setCapture != 'undefined') {
                    _this.setCapture();
                }
            }
            function up(e) {
                removeEvent(document, 'mousemove', move);
                removeEvent(document, 'mouseup', up);
                if(typeof _this.releaseCapture != 'undefined') {
                    _this.releaseCapture();
                }
            }
        });
    }
    return this;
});

通过这种方式，我们就可以为Tar添加drag功能了。但是还有一个前提是你需要载入base_dray.js文件。所以我们在html文件中需要按照下面的方式加载js文件:

    <script src="js/tool.js"></script>
    <script src="js/tar.js"></script>
    <script src="js/tar_drag.js"></script>
    <script src="js/app.js"></script>

待续.....