javascript - 在 javascript 中扩展类

Question

我有两个用 js 编写的几乎相同的类。我想让其中一个扩展另一个，以便减少代码。我是 javascript 的新手，我需要一些帮助才能做到这一点。我在这里发布类(class)。有人可以帮忙吗？

//============================================================================================================================================
        //Class1==================================================================================================================================
        //============================================================================================================================================
        function Class1(config){
            var targetObj;
            var copycanvas = null;
            var copy = null;
            var outputcanvas = null;
            var draw = null;
            var direction = config.direction || "lr";

            var TILE_WIDTH = config.tileWidth || 100;
            var TILE_HEIGHT = config.tileHeight || 100;

            var SOURCERECT = {x:0, y:0, width:0, height:0};
            var interval;
            var tiles2 = [];
            var cols = 0;
            var rows = 0;

            createTiles = function(){
                tiles = [];     
                tiles2 = [];        

                var y=0;
                while(y < SOURCERECT.height){
                    var x=0;
                    cols = 0;
                    while(x < SOURCERECT.width){                            
                        cols++;
                        x += TILE_WIDTH;
                    }
                    rows++;
                    y += TILE_HEIGHT;
                }

                var i, j;
                if (direction == "tl"){
                    for (i = 0; i < rows; i++)
                        for (j = 0; j < cols; j++){
                            x = j * TILE_WIDTH;
                            y = i * TILE_HEIGHT;
                            var tile = new Tile();
                            tile.imageX = x;
                            tile.imageY = y;
                            tiles2.push(tile);
                        }
                }
                arrangeSquares();
            };

            arrangeSquares = function(){
                var i, j, k;
                var M, N;

                M = rows;
                N = cols;
                i = j = 0;
                var cnt = 0;
                for (i = 0; i < N + M - 1; i++)
                    for (j = 0; j <= i; j++) 
                        if (j < M && (i - j) < N){
                            tiles.push(tiles2[j * N + (i - j)]);
                        }   
            }

            processFrame = function(){  
                copycanvas.width = outputcanvas.width = targetObj.width;
                copycanvas.height = outputcanvas.height = targetObj.height;
                copy.drawImage(targetObj, 0, 0, targetObj.width, targetObj.height);

                for(var i=0; i < tiles.length; i++) {
                    var tile = tiles[i];

                    tile.alpha += 0.05;

                    var TH  = Math.max(0, Math.min(TILE_HEIGHT, targetObj.height - tile.imageY));
                    var TW  = Math.max(0, Math.min(TILE_WIDTH, targetObj.width - tile.imageX));                 

                    draw.save();
                    draw.translate(tile.imageX, tile.imageY);   
                    draw.globalAlpha = Math.max(0, tile.alpha);         

                    draw.drawImage(copycanvas, tile.imageX, tile.imageY, TW, TH, 0, 0, TW, TH);         
                    draw.restore();
                }

                var ok = true;
                for (i = 0; i < tiles.length; i++) {
                    if (tiles[i].alpha < 1) { 
                        ok = false;
                        break;
                    }
                }
                if (ok)
                {
                    clearInterval(interval);
                    showComplete();

                }
            };

            function showComplete() {
                $target.trigger("showComplete");

                $img.show();
                $(copycanvas).remove();
                $(outputcanvas).remove();
                if ($hideTarget)
                    $hideTarget.hide();
            };

            this.hide = function(target) {

            };
            var $target = null;
            var $img = null;
            var $hideTarget = null;
            this.show = function(target, hideTarget){
                $target = $("#" + target).show();

                align($target);

                if (hideTarget != undefined) {
                    $target.before($hideTarget = $("#" + hideTarget).show());
                    align($hideTarget);
                }

                $img = $("#" + target + " > img").filter(":first").hide();

                $("<canvas/>").attr("id", "sourcecopy")
                              .css("position", "absolute")
                              .appendTo($target)
                              .hide();
                copycanvas = document.getElementById("sourcecopy");
                copy = copycanvas.getContext('2d');

                $("<canvas/>").attr("id", "output")
                              .css("position", "absolute")
                              .appendTo($target);
                outputcanvas = document.getElementById("output");
                draw = outputcanvas.getContext('2d');

                targetObj = document.getElementById($img.attr("id"));

                clearInterval(interval);

                SOURCERECT = {x:0, y:0, width: targetObj.width, height: targetObj.height};
                createTiles();

                for(var i=0; i<tiles.length; i++){
                    var tile = tiles[i];
                    tile.alpha = 0 - (i * (2 / tiles.length));
                }

                var intervalDelay = (config.duration * 1000) / (40 + rows + cols);
                interval = setInterval(function() { processFrame(); }, intervalDelay);  
            };

            function Tile(){
                this.alpha = 1; 
                this.imageX = 0;
                this.imageY = 0;
            };
        };

        //============================================================================================================================================
        //Class2===================================================================================================================================
        //============================================================================================================================================
        function Class2(config){
            var targetObj;
            var copycanvas = null;
            var copy = null;
            var outputcanvas = null;
            var draw = null;
            var direction = config.direction || "lr";

            var TILE_WIDTH = config.barWidth || 50;
            var TILE_HEIGHT = 100;

            var SOURCERECT = {x:0, y:0, width:0, height:0};
            var interval;
            var tiles = [];

            createTiles = function(){
                tiles = [];             
                var y=0;
                while(y < SOURCERECT.height){
                    var x=0;
                    while(x < SOURCERECT.width){
                        var tile = new Tile();
                        tile.imageX = x;
                        tile.imageY = y;
                        tiles.push(tile);
                        x += TILE_WIDTH;
                    }
                    y += TILE_HEIGHT;
                }
            };

            processFrame = function(){  
                copycanvas.width = outputcanvas.width = targetObj.width;
                copycanvas.height = outputcanvas.height = targetObj.height;
                copy.drawImage(targetObj, 0, 0, targetObj.width, targetObj.height);

                for(var i=0; i < tiles.length; i++) {
                    var tile = tiles[i];

                    tile.alpha += 0.05;

                    var TH  = Math.max(0, Math.min(TILE_HEIGHT, targetObj.height - tile.imageY));
                    var TW  = Math.max(0, Math.min(TILE_WIDTH, targetObj.width - tile.imageX));                 

                    draw.save();
                    draw.translate(tile.imageX, tile.imageY);   
                    draw.globalAlpha = Math.max(0, tile.alpha);         
                    draw.drawImage(copycanvas, tile.imageX, tile.imageY, TW, TH, 0, 0, TW, TH); 
                    draw.restore();
                }

                var ok = true;
                for (i = 0; i < tiles.length; i++) {
                    if (tiles[i].alpha < 1) { 
                        ok = false;
                        break;
                    }
                }
                if (ok)
                {
                    clearInterval(interval);
                    showComplete();
                }

            };

            function showComplete() {
                $target.trigger("showComplete");

                $img.show();
                $(copycanvas).remove();
                $(outputcanvas).remove();
                if ($hideTarget)
                    $hideTarget.hide();
            };

            this.hide = function(target) {

            };
            var $target = null;
            var $img = null;
            var $hideTarget = null;
            this.show = function(target, hideTarget){
                $target = $("#" + target).show();

                align($target);

                if (hideTarget != undefined) {
                    $target.before($hideTarget = $("#" + hideTarget).show());
                    align($hideTarget);
                }
                $img = $("#" + target + " > img").filter(":first").hide();

                $("<canvas/>").attr("id", "sourcecopy")
                              .css("position", "absolute")
                              .appendTo($target)
                              .hide();
                copycanvas = document.getElementById("sourcecopy");
                copy = copycanvas.getContext('2d');

                $("<canvas/>").attr("id", "output")
                              .css("position", "absolute")
                              .appendTo($target);
                outputcanvas = document.getElementById("output");
                draw = outputcanvas.getContext('2d');

                targetObj = document.getElementById($img.attr("id"));

                clearInterval(interval);

                if (direction == "tb" || direction == "bt")
                {
                    TILE_WIDTH = targetObj.width;
                    TILE_HEIGHT = config.barWidth;
                }
                else 
                {
                    TILE_WIDTH = config.barWidth;
                    TILE_HEIGHT = targetObj.height;         
                }

                SOURCERECT = {x:0, y:0, width: targetObj.width, height: targetObj.height};
                createTiles();

                if (direction == "lr" || direction == "tb")
                {
                    for(var i=0; i<tiles.length; i++){
                        var tile = tiles[i];
                        tile.alpha = 0 - (i * (1 / tiles.length));
                    }
                }
                else
                {
                    for(var i=tiles.length - 1; i >= 0 ; i--){
                        var tile = tiles[i];
                        tile.alpha = 0 - ((tiles.length - i - 1) * (2 / tiles.length));
                    }
                }

                var intervalDelay = (config.duration * 1000) / (40 + tiles.length);
                interval = setInterval(function() { processFrame(); }, intervalDelay);  
            };

            function Tile(){
                this.alpha = 1; 
                this.imageX = 0;
                this.imageY = 0;
            };
        };

Answer 1

尝试像这样声明类。

var theClass = function theClass() {
   ....

要扩展此类，您可以使用原型(prototype)方法:

theClass.prototype.newMethodName = function () {
   ....