الگو طراحی یا design patterns قسمتی از طراحی نرم‌افزار است که کمک خیلی زیادی جهت پیاده‌سازی الگوی معماری می کند. به طور کلی الگو های طراحی روش هایی جهت کد زنی بهینه تر و بهتر است. معمولا این روش ها به این علت که تعداد زیادی از برنامه نویس ها تلاش برای وضعیت بهینه، کرده اند نتیجه بهتری می دهند.

لیستی از الگو های طراحی:

• Constructor Pattern     
• Module Pattern    
• Revealing Module Pattern     
• Singleton Pattern     
• Observer Pattern     
• Mediator Pattern     
• Prototype Pattern     
• Command Pattern     
• Facade Pattern     
• Factory Pattern     
• Mixin Pattern     
• Decorator Pattern     
• Flyweight Pattern

ما یکی از الگو ها را بررسی می‌کنیم و اگر فرصت اجاز دهد در پست ها دیگر بقیه را پیاده سازی میکنیم. این نمونه با Javascript می باشد. (به علت وابسطه بودن به مقاله javascript)

Observer Pattern

در این الگو object اصلی لیستی از کسانی که observer شده‌اند نگه می‌دارد و در هنگام مورد نظر اعلام تغییر را به هر کدام notify می کند.
به طور مثال یک نمونه کد ساده از یک ثانیه شمار ببینید. در این کد هر نرم افزاری که بخواهد هر ثانیه مطلع بشود به object به صورت observer گوش می دهد.

$.utils.timer = {
    \"listeners\" : [],
    // لیستی از کسانی که گوش می دهند
    \"add_listener\" : function (f) {
        $.utils.timer.listeners.push(f);
    },
    \"remove_listener\" : function (f) {
        $.utils.timer.listeners.remove(f);
    },
    \"tick\" : function () {
        for(var i = 0; i<$.utils.timer.listeners.length; i++) {
            $.utils.timer.listeners[i].apply(window);
        }
    },
    \"start_timer\" : function () {
        setTimeout($.utils.timer.start_timer,1000);
        $.utils.timer.tick();
    }
};

$.utils.init = function () {
    $.utils.timer.start_timer();
};

در شروع نرم‌افزار با اجرای init همه چیز آغاز به کار می‌کند. هر عملگری با استفاده از کد زیر می‌تواند خودش را به این اضافه کند.

$.utils.timer.add_listener(current_function);

هر ۱۰۰۰ میلی ثانیه قست tick call می‌شود و به همه listener list call می شود.
الگو‌های دیگر هر کدام به روشی این کار را انجام می دهند.