JavaScript: اشیاء پیوندی – جامعه dev

به تازگی ، من در تلاش بوده ام تا JavaScript را با هدف تحول نحوه نوشتن کد ، برقراری ارتباط ایده ها و ساختن مطالب بهتر درک کنم.

من غالباً چیزی را برای تأثیر آن شنیده ام ، “JavaScript کلاس دارد ، اما یک زبان کلاس نیست”. در کنار این دلالت ، استفاده از کلاس ها به جای پذیرش آن برای آنچه که هست ، “خم” می کند.

این مانند اطلاعاتی که می تواند صحیح باشد احساس می شود ، اما من درک نکردم زیرا … خوب JavaScript کلاس دارد. و این اولین زبان من بود. من یاد نگرفتم جاوا یا حتی یک برنامه سنتی علوم کامپیوتر را در یک موسسه چهار ساله تکمیل کنم.

سرانجام ، من در معرض اطلاعات بیشتر در مورد JavaScript قرار گرفتم Object.prototypeبشر این شیء بزرگ و اجدادی در بالای زنجیره نمونه اولیه قرار دارد که از خواص و خصوصیات به اشیاء دیگر منتقل می شود. همه چیز کمی واضح تر شد ، اما هنوز هم نوعی گیج کننده بود. وراثت اولیه به نظر می رسید خنک است ، اما بدون تفاوت مانند یک تمایز احساس می شود.

سپس ، من این کارگاه را توسط کایل سیمپسون نویسنده سریال JavaScript Series You Know تماشا کردم. او راهی برای پیوند دادن اشیاء به هم بدون استفاده از new کلمه کلیدی یا قند نحوی که هست classبشر

من شیفته شدم. من می خواستم آن را امتحان کنم. من همچنین می خواستم بیشتر از آنچه یاد گرفته ام استفاده کنم. بنابراین من برای تولید انواع مختلف کارها با استفاده از الگوی کارخانه و اشیاء مرتبط ، منطقی نوشتم.

var TaskType = {
    TODO: "To Do", 
    IN_PROGRESS: "In Progress", 
    COMPLETED: "Completed"
}

var Task = {
    logTaskInfo(){
        console.log(`Title: ${this.title} | Details: ${this.details} | Status: ${this.status}`)
    }
}

function TaskFactory(){
    return createTask; 

    function createTask(type, title, details){
        var isInvalidType = !Object.values(TaskType).includes(type); 
        if(isInvalidType){
            throw new Error('Invalid Task Type')
        }
        return Object.assign(Object.create(Task), {
            title, 
            details, 
            status: type
        })
    }
}

var factory = TaskFactory(); 

var task1 = factory(TaskType.TODO, "Wash Dishes", "Load the dishwasher and scrub large pots and pans."); 
var task2 = factory(TaskType.IN_PROGRESS, "Write Code", "Apply newly acquired concepts like IFFE, Factory and OLOO"); 
var task3 = factory(TaskType.COMPLETED, "Walk Dog", "Take Soleil out for her morning walk."); 

task1.logTaskInfo(); 
task2.logTaskInfo(); 
task3.logTaskInfo(); 

از TC39 ، Object.assign ( target, ...sources ) مقادیر کلیه خصوصیات خود را از یک یا چند منبع منبع به یک هدف هدف کپی می کند. وت Object.create ( O, Properties ) یک شی جدید با یک نمونه اولیه مشخص ایجاد می کند.

بنابراین ، با این خطوط کد:

Object.assign(Object.create(Task), {
            title, 
            details, 
            status: type
        })

Object.Create(Task) یک شیء کاملاً جدید ایجاد می کند و آن را به موجود پیوند می دهد Task شیء. و آن شیء با نام تجاری جدید به عنوان ، جزئیات و وضعیت اختصاص داده می شود.

حالا ، کی task1 فراخوانی logTaskDetails این کار می کند زیرا logTaskDetails در شیئی که Task1 به آن مرتبط است وجود دارد.

خوب ، “خیلی باحال” ، من فکر کردم. شما می توانید این استدلال را مطرح کنید که این رویکرد صریح تر از استفاده از چیزی مانند new کلمه کلیدی ، اما چه چیز بزرگی است؟ اما پس از آن همه چیز جالب شد.

این سبک به پایه و اساس هیئت رفتار یا “ترکیب پویا” تبدیل می شود. جایی که اشیاء با نگرانی های مختلف با هم در ارتباط هستند و می توانند روش ها را به اشتراک بگذارند. این کمتر از بالا به پایین و همتا به همتا تر است.

در اینجا مثالی آورده شده است که سیمپسون با یک AuthController و LogInformController ارائه می دهد:

var AuthController = {
    authenticate(){
        server.authenticate(
            [this.username, this.password], this.handleResponse.bind(this)
        )
    },
    handleResponse(resp){
        if(!resp.OK){
            this.displayError(resp.msg); 
        }
    }
}

var LoginFormController = Object.assign(
    Object.create(AuthController), 
    {
        onSubmit(){
            this.username = this.$username.val(); 
            this.password = $this.$password.val();
            this.authenticate() 
        }, 
        displayError(msg){
            alert(msg)
        }
    }
)

من فکر کردم این یک نمونه واقعاً جالب است ، اگرچه مجبور شدم چند بار کد را بخوانم تا بفهمم چه اتفاقی افتاده است.

در اینجا ، به همان روشی که task1 به Task هدف LoginFormController به AuthControllerبشر وقتی فرم ورود خیالی ارسال می شود ، LoginFormController's onSubmit روش نامیده می شود. درون onSubmit در authenticate() روش نامیده می شود.

LoginFormController روش احراز هویت ندارد ، اما شیئی که به آن مرتبط است (AuthController) انجام می دهد. بنابراین ، این روش با this هنوز هم مراجعه به LoginFormControllerبشر درون authenticateبا this.username وت this.password هنوز هم به مقادیر موجود است LoginFormController و به همراه پاسخ به سرور به سرور منتقل می شوند handleResponseبشر حالا ، handleResponse مقید است LoginFormController با .bind همانطور که به سرور منتقل می شود. بنابراین هر زمان که خوانده شود ، به آن نیز اشاره خواهد کرد LoginFormController حتی اگر این جایی نیست که تعریف شده است. کی handleResponse فراخوانده می شود ، اگر پاسخ اشکالی نداشته باشد ، پس آن را صدا می کند display روش display دارای a this این منابع LoginController چون این بود this handleResponse محدود به

بنابراین ، به طور خلاصه ، onSubmit که در LoginController فراخوانی authenticate روشی تعریف شده در AuthControllerبشر authenticate پاسخ به تماس ، handleResponse، که در تعریف شده است Authcontroller، اما محدود به LoginControllerبشر وت handleResponse فراخوانی display که در logincontroller تعریف شده است.

این منطق نیاز به درک قوی از this (بدون هدف در نظر گرفته شده). و حتی اگر فکر می کنم با توجه به این کار بسیار جالب است ، من فکر نمی کردم که کد را از این طریق ساختار دهم. این یک روش بسیار متفاوت از تفکر از آنچه عادت کرده ام است.

یک مورد کلاسیک از “روح مایل است ، اما گوشت ضعیف است”. من قصد دارم در آن کار کنم.

در ضمن ، لطفاً به من اطلاع دهید که چه فکر می کنید. آیا این سبکی است که شما از آن استفاده کرده اید یا علاقه مند به استفاده از آن هستید؟ به نظر شما کد تا آنجا که خوانایی می شود چگونه است؟

تصویر توسط alltechbuzz_net از Pixabay