Форум

auditseo · #1 (**permalink**) 05.10.2015, 12:59

Добрый день! Написал часть небольшой программы на JS, работает в принципе как надо, но вот вопрос, а правильно ли я пишу в ООП стиле на JS? Так как раньше писал на других языках.

//объект хранящий информацию о картинке
/*var Img = function (src, width, height) {
 var _src = src;
 var _width = width;
 var _height = height;
 this.getSrc = function () {
 return _src;
 }
 this.getWidth = function () {
 return _width;
 }
 this.getHeight = function () {
 return _height;
 }
 }*/


function Powell(startX, startY, eps, strFunc, idPlot, idConsole, betweenX_1, betweenX_2, betweenY_1, betweenY_2, idPlot3D, idExpression) {
    console.log("startX = " + startX + " startY = " + startY + " eps = " + eps + " strFunc = " + strFunc + " idPlot = " + idPlot +
    " idConsole = " + idConsole + " betweenX_1 = " + betweenX_1 + " betweenX_2 = " + betweenX_2 + " betweenY_1 = " + betweenY_1 +
    "betweenY_2 = " + betweenY_2 + "idPlot3D = " + idPlot3D + " idExpression = " + idExpression);
    // ф-ция запрос на сервер за картинкой и размерами
    var objResponse;
    var contextCanvas;
    var loadOk = 0;

    function makeRequest() {
        var processingResponse = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                // responseJson - хранится JSON
                var responseJson = xmlHttp.responseText;
                console.log("State is 4 and 200");
                console.log(responseJson);
                objResponse = JSON.parse(responseJson);
            } else if(xmlHttp.readyState == 4 && xmlHttp.status != 200){
                console.log("Error - not internet!!!");
                // в случае сетевой ошибки
                // ставим картинку по умолчанию

            }
        }
        //формируем строку запроса
        var strRequest;
        strRequest = "strFunc=" + encodeURIComponent(strFunc) + "&betweenX_1=" + encodeURIComponent(betweenX_1) + "&betweenX_2=" + encodeURIComponent(betweenX_2) +
        "&betweenY_1=" + encodeURIComponent(betweenY_1) + "&betweenY_2=" + encodeURIComponent(betweenY_2);
        console.log("strRequest = " + strRequest + "\n\n");
        //strRequest = encodeURIComponent(strRequest);
        //console.log("strRequestEncode = " + strRequest + "\n\n");
        var xmlHttp;
        xmlHttp = new XMLHttpRequest();
        // связываем с данным контекстом
        xmlHttp.onreadystatechange = processingResponse;
        xmlHttp.open("POST", "/php_backend/lab2.php", false);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.send(strRequest);
    }

    function putImgExtra(objFromJson, idDiv) {
        var tagImg = document.createElement("img");
        var srcImg = objFromJson.src;
        var widthImg = objFromJson.width;
        var heightImg = objFromJson.height;
        tagImg.setAttribute("src", srcImg);
        tagImg.setAttribute("width", widthImg);
        tagImg.setAttribute("height", heightImg);
        var tagDiv = document.getElementById(idDiv);
        if (tagDiv.hasChildNodes()) {
            tagDiv.removeChild(tagDiv.firstChild);
        }
        tagDiv.appendChild(tagImg);
    }

    function putImgContourInDiv() {
        // параметры картинки
        var srcImg = objResponse.imgContour.src;
        var widthImg = objResponse.imgContour.width;
        var heightImg = objResponse.imgContour.height;
        // создадим каву
        var canvas = document.createElement("canvas");
        canvas.setAttribute("width", widthImg);
        canvas.setAttribute("height", heightImg);
        contextCanvas = canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.onload = function(){
            contextCanvas.drawImage(imageObj, 0, 0);
            afterLoadImg();
        }
        imageObj.src = srcImg;
        // посылаем канву в div
        var tagDiv = document.getElementById(idPlot);
        if (tagDiv.hasChildNodes()) {
            tagDiv.removeChild(tagDiv.firstChild);
        }
        tagDiv.appendChild(canvas);
    }
    function afterLoadImg(){
        contextCanvas.fillRect(0, 0, 100, 100);
    }

    this.calc = function () {
        makeRequest();
        console.log("\n\nIMG: " + objResponse.imgContour.src);
        // поместить 3D картинку в idPlot3D
        putImgExtra(objResponse.img3D, idPlot3D);
        putImgExtra(objResponse.imgExpression, idExpression);
        putImgContourInDiv();
        // while(!loadOk);

    }
}


// берем значения из форм
// после создаем объект и у объекста запускаем метод расчета и постройки графика
function start_calc(idForm, idPlot, idConsole, idPlot3D, idExpression) {
    var form = document.getElementById(idForm);
    var strFunc = form.querySelector("input[name=function]").value;
    var startX = parseFloat(form.querySelector("input[name=start_x]").value.replace(",", "."));
    var startY = parseFloat(form.querySelector("input[name=start_y]").value.replace(",", "."));

    var betweenX_1 = parseFloat(form.querySelector("input[name=between_x_1]").value.replace(",", "."));
    var betweenX_2 = parseFloat(form.querySelector("input[name=between_x_2]").value.replace(",", "."));

    var betweenY_1 = parseFloat(form.querySelector("input[name=between_y_1]").value.replace(",", "."));
    var betweenY_2 = parseFloat(form.querySelector("input[name=between_y_2]").value.replace(",", "."));

    var eps = parseFloat(form.querySelector("input[name=eps]").value.replace(",", "."));
    //определяем метод - какой объект создать
    switch (idForm) {
        case "form_pa":
            var objPowell = new Powell(startX, startY, eps, strFunc, idPlot, idConsole, betweenX_1, betweenX_2, betweenY_1, betweenY_2, idPlot3D, idExpression);
            objPowell.calc();
            break;
        default:
            alert(idForm + " - неопознанная idForm!");
            break;
    }
}

// нажата кнопка по умолчанию
function insertDefaultValue(idInput){
    var tagInput = document.getElementById(idInput);
    console.log("Default input = " + idInput);
    if (idInput == "fun_pa"){
        tagInput.value = "((x*cos(30)+(y-1)*sin(30))^2)/4 + (((y-1)*cos(30)-x*sin(30))^2)/36";
    }

}

document.addEventListener("DOMContentLoaded", function () {
    // вешаем слушателя на кнопку расчета для метода пауэла
    var btnResultPA = document.getElementById("result_pa");
    btnResultPA.addEventListener("click", function () {
        // ид формы для расчета и ид места куда выводим график и ид на консоль
        start_calc("form_pa", "plot_pa", "console_pa", "3d_plot_pa", "expression_pa");
    });

    // слушатель - кнопка "По умолчанию"
    var btnDefault = document.getElementById("default_pa");
    // fun_pa - какой график строим (idInput)
    btnDefault.addEventListener("click", function(){insertDefaultValue("fun_pa");}, false);

});

sortarray · #2 (**permalink**) 05.10.2015, 13:31

>>а правильно ли я пишу в ООП стиле на JS
Что то ООП в Вашем коде особо то и не заметно. ООП в смысле порождения собственных абстракций -- объектов/сообщений. Все что я увидел -- вы определили несколько функций, которые используют стандартный функционал. Впрочем, детально не вникал

auditseo · #3 (**permalink**) 05.10.2015, 13:45

Сообщение от sortarray

>>а правильно ли я пишу в ООП стиле на JS
Что то ООП в Вашем коде особо то и не заметно. ООП в смысле порождения собственных абстракций -- объектов/сообщений. Все что я увидел -- вы определили несколько функций, которые используют стандартный функционал. Впрочем, детально не вникал

Согласен, здесь ООП практически нет, парочка объектов, у которых вызываю методы. Нормально ли это для JS, или код можно более по-умному написать...

sortarray · #4 (**permalink**) 05.10.2015, 14:00

Сообщение от auditseo

Нормально ли это для JS, или код можно более по-умному написать...

Многие пишут без ООП, это вопрос предпочтений. Если Вам не нужно, то и не надо, собственно. Сложные приложения конечно, лучше с ООП...

ksa · #5 (**permalink**) 05.10.2015, 14:57

auditseo, зачем плодить кучу переменных, таких как
startX, startY и т.п.?
Это может решить массив объектов...

Почему switch для двух вариантов?

Чем тут if/else не угодил?

auditseo · #6 (**permalink**) 06.10.2015, 01:17

Сообщение от ksa

auditseo, зачем плодить кучу переменных, таких как
startX, startY и т.п.?
Это может решить массив объектов...

Почему switch для двух вариантов?

Чем тут if/else не угодил?

Привык switch + там еще будут дополняться варианты и код сырой, еще много писать.

А вот за первой замечание большое спасибо, больше внимания буду этому уделять.

Хотя в этом же проекте, хотел создать один абстрактный класс, но вот на данный момент, слабое знание ООП в JS не позволило этого сделать, хотя и без абстрактного метода, легко было выйти из положения. Поэтому вопрос: JS нормально приспособлен для абстрактных классов, наследования и т.д.,?
И еще чем лучше дебажить проект, а то я использую только console.log()