جافاسكربت | اعمل على مكتبة صغيرة واريد مساعدة في التحقق من الكود !

هل تعمل على مكتبة للرسم كنت أفكر أن أعمل على واحدة، أستطيع تخصيص البعض من وقتي للعمل معك -إن ترغب تواصل معي لمعرفة المزيد.

أول ملاحظة كان يجب عليك كتابتها باستخدام ES6، أصبح من الماضي كتابة JavaScript باستخدام ES5، لا يوجد طريقة قياسية لكتابة كائن أو namespace الخ، من ثم استخدم مترجم لترجمة نسخة قابلة للاسخدام إلى ES5 ، TypeScript أيضًا فكرة جيدة.

هذه محاولة بسيطة جدًا -في عشر دقائق-، للتحسين من الشيفرة باستخدام TypeScript -لا تعتمد عليها-:

namespace Creazy {
    export type point = {x: number, y: number}

    export class Drawer {
        // عنصر الرّسم
        private canvas: HTMLCanvasElement
        private ctx: CanvasRenderingContext2D



        // تحديد العرض
        set width(width: number) {
            this.canvas.width = width
        }
        get width(): number {
            return this.canvas.width
        }

        // تحديد الطول
        set height(height: number) {
            window["D"] = this.canvas
            this.canvas.height = height
        }
        get height() {
            return this.canvas.height
        }


        // lab()
        constructor(width: number = 200, height: number = 200) {
            this.canvas = document.createElement('canvas');

            document.body.style.padding = "0px";
            document.body.style.margin = "0px";

            this.width = width;
            this.height = height

            this.canvas.style.display = "block";
            this.canvas.style.backgroundColor = "#f6f6f6";

            this.ctx = this.canvas.getContext("2d");
            document.body.appendChild(this.canvas);
        }

        point(point: point) { 
            var x = point.x,
                y = point.y;

            this.ctx.beginPath()
            this.ctx.arc(x, y, 2, 0, Math.PI * 2, false)
            this.ctx.fill()
        }

        line(p1: point, p2: point) {
            this.ctx.beginPath();
            this.ctx.moveTo(p2.x, p2.y);
            this.ctx.lineTo(p1.x, p1.y);
            this.ctx.stroke();
        }
    }
}


// تجربة
var test = new Creazy.Drawer(200, 200);
var testPoint = {x: 32, y: 32}
test.point(testPoint)
var from = {x: 20, y: 10},
    to = {x: 10, y: 40}

test.line(from, to)

الملاحظات:

1. في شيفرتك أراك تستخدم عنصر الContext بشكل عام هل سيتم استخدامه مرة واحد من قبل جميع الأوجه؟

2. أراك تحدد العرض والطول إلى كامل الصفحة ولا تترك خيارًا للمستخدم لتغيره، هذا ليس جيد، يمكنك استخدام دوال الوصول لجعل المستخدم قادر على تغيير الطول والعرض متى شاء بدون الوصول إلى عنصر Canvas

3. لم تخصص نوعًا معينًا للنقطة مرة تسخدم مدخلان لرسم النقطة، ومرة تستخدم كائنًا؛ قمتُ بتخصيص نوعًا.

4. إهتم بتصميم JS قليلًا -شخصيًا لا أدقق على هذا كثيرًا لكني أحاول بقدر الإمكان مثلًا لا تترك فراغًا زائدًا في أول الدوال وهكذا.

أرى الأفضل كتابة prototype على الورق من ثم رؤية ما يجب تغييره لكي تكون الأمور واضحة، ولا تغيير الCore في كل إصدار.

استخدم

لتجربة الشيفرة.

سؤال خارج الموضوع :

• ممكن تزودني بـالمصادر التي تعلمت منها جافاسكربت ؟

 و شكرا لك

الأفضل أن تسمي بطريقة الجافاسكربت

لاكن لدي سؤال

لماذا لم تنشئ من البداية الكائن Crazy بالطريقة العادية خارجا تم تضيف له ما تريد

هناك مشكلة وهي عندما أضع هذا الكود

Crazy.Lab();
Crazy.Lab();

سينتج عن هذا الكود إنشاء إثنين من canvas

بعدها إذا وضعت هذا الكود

Crazy.Point(20,50);

فإن النقطة سترسم على ال canvas الثاني

ولا يمكننا الرسم على ال canvas الأول

يمكن صياغة ما كتبته أنت هكذا

var Crazy = {}, ctx;

// The Labratory
Crazy.Lab = function () {
    "use strict";
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    document.body.style.padding = 0;
    document.body.style.margin = 0;
    canvas.width =  window.innerWidth;
    canvas.height =  window.innerHeight;
    canvas.style.display = "block";
    canvas.style.backgroundColor = "#f6f6f6";
    ctx = canvas.getContext("2d");
};

Crazy.Point = function (x, y) {
    "use strict";
    ctx.beginPath();
    ctx.arc(x, y, 2, 0, Math.PI * 2, false);
    ctx.fill();
};

Crazy.Line = function (p1, p2) {
    "use strict";
    ctx.beginPath();
    ctx.moveTo(p2.x, p2.y);
    ctx.lineTo(p1.x, p1.y);
    ctx.stroke();
};

لاكن لا يمكن لهذا الكود أن يعمل على أكثر من عنصر canvas واحد

أنظر إلى هذا

• كما أشار @يوسف سيد اعتمد على ES6 فقد تم تعديل صيغ كتابة البرمجة الكائنية بشكلها المُتعارف عليه في أغلب اللغات البرمجية الأخرى.

• إذا كنت ستستخدم النسخة CS5 فإطلع على الرابط التالي: