MVC در جاوا اسکریپت

بله !!‌درست می بینید!! معماری MVC نیز در جاوا اسکریپت می توان پیاده سازی کرد!! توجه تان را به ادامه ی داستان جلب می کنم

MVC نوعی معماری نرم افزار هست .مخفف Model View Controller می باشد. در این معماری ۳ بخش از برنامه نویسی از هم جدا می شوند و در کلاس های مجزا قرار می گیرند.

اکثر طراحان وب فکر آن را نمی کنند که می توان این معماری را در جاوااسکریپت به کار برد و تنها فکر می کنند که این معماری تنها مختص زبان های سرور ساید است.

در جاوا اسکریپت ۳ بخش model view controller به صورت زیر تعریف می شوند:

۱. Model: در این کلاس تمامی توابع و کلاس هایی نوشته می شود که مربوط به بانک اطلاعاتی می باشد. برای مثلا کانکشن های آژاکس و ارسال و دریافت اطلاعات و یا آرایه ای از اطلاعات و …  را در آن می توان حا داد.

۲. View :شامل توابع و کلاس هایی که مربوط به نشان دادن و تغییر در محتویات صفحه هستند می باشد.

۳. Controller : وظیفه ی آن کنترل کردن رویداد های صفحه می باشد.

به مثلا زیر توجه کنید:
HTML:

<a href="">click</a>
<div id="messages"></div>

JS:

// app/webroot/js/models/example.js
$m.Example = {

    getText: function() {
        return "hello world";
    }
};

// app/webroot/js/views/examples.js
$v.Examples = {

    showMessage: function(message) {
        $('#messages').append(message);
    }
};

//app/webroot/js/controllers/examples_controller.js
$c.ExamplesController = {

    index: function() {
        $('a').click(this.sayHelloWorld);
    },

    sayHelloWorld: function() {
        $v.Examples.showMessage($m.Example.getText());

        return false;
    }
};

توجه داشته باشید که در این مثال از فریم ورک JQUERY استفاده شده است.

یک دستور css پر کاربرد

در HTML به هر المان می توان بیش از یک کلاس (class) نسبت داد. و حتی در css selector ها نیز می توان هنگامی که المانی را انتخاب می کنیم تعیین کنیم که حتما هر۲ یا چند کلاس را داشته باشد . مثلا می توان تمامی div هایی را انتخاب کرد که هم کلاس txt1 و هم کلاس txt2 را داشته باشند. برای تعیین چند کلاس برای یک المان می توان با استفاده از فاصله انجام داد! و حتی برای انتخاب المان با css با ‘.’ آن ها را جدا می کنیم‌ به مثال زیر توجه کنید:

<style type="text/css">
div.txt1.txt2{ color:red; }
</style>
<div class="txt1 txt2">hi</div>
<div class="txt2">bye</div>
<div>sorry</div>

کد CSS تمامی div هایی که دارای هم کلاس txt1 و هم کلاس txt2 هستند را قرمز می کند.

چیز بسیار جالب این است که از این روش کمتر جایی دیده ام که استفاده شده باشد. در حالی که تمامی مرورگر های رایج از جمله IE6 نیز از این روش پشتیبانی می کنند.