امروزه طراحی وب سایت در هر اندازه‌ای بی‌نیاز از JavaScript نیست. برعکس تصور بسیاری از طراحان سایت‌ javascript از حوزه کاری گرافیست ها خارج بده و کاملاً می‌تواند به برنامه نویسی پروژه مرتبط باشد. پروژه های کوچک‌تر با کتابخانه‌های مثل jQuery نیاز اولیه شان را برطرف می‌کنند ولی آیا یک پروژه بزرگ نیز به راحتی قابلیت اجرا با همچین ابزار هایی دارد؟ به طور کلی چه کارهایی در سمت javascript می‌شود انجام داد؟ آیا به کارهایی مثل show و hide خلاصه می شود؟ در کل در javascript code هایی که به صورت اسپاگتی کد نوشته می‌شوند کد تکراری به شدت مشاهده می‌شود و معمولاً وابستگی به ابزاری مثل jQuery آنقدر زیاد است که قابلیت حذف یا تعویض به هیچ وجه نیست. طبعیت نکردن از design pattern هایی مثل interface باعث می‌شود که refactoring به شدت عذاب آور باشد. هدف این مقاله، ارایه بهترین روش برای طراحی پروژه های بزرگ javascript است به طوری که کمترین منابع را مصرف کرده و بیشترین خروجی را داشته باشد

1. Scalable JavaScript Application
‫افاضات‬ ‫محمد‬ :‫نویسنده‬
‫باز‬ ‫آزاد/متن‬ ‫افزارهای‬ ‫نرم‬ ‫سراسری‬ ‫همایش‬3ZCONF‫شهریورماه‬۱۳۹۱
‫صفحه‬‫یک‬Scalable JavaScript Application By Efazati

2. :‫چکیده‬
‫از‬ ‫یاز‬‫ی‬‫یبنی‬‌‫ین‬ ‫های‬‌‫ین‬ ‫انداز‬ ‫هر‬ ‫در‬ ‫سایت‬ ‫وب‬ ‫طراحی‬ ‫امروزه‬JavaScript‫از‬ ‫ییاری‬‫ی‬‫بس‬ ‫یور‬‫ی‬‫تص‬ ‫یس‬‫ی‬‫برعک‬ .‫یت‬‫ی‬‫نیس‬
‫ت‬‌‫ین‬ ‫سای‬ ‫طراحان‬javascript‫ی‬‫ی‬‫نویس‬ ‫برنیامه‬ ‫یه‬‫ی‬‫ب‬ ‫ید‬‫ی‬‫یمتوان‬‌‫ین‬ ‫یامل‬‫ی‬‫ک‬ ‫و‬ ‫بده‬ ‫خارج‬ ‫ها‬ ‫گرافیست‬ ‫کاری‬ ‫حوزه‬ ‫از‬
.‫باشد‬ ‫مرتبط‬ ‫پروژه‬
‫مثل‬ ‫ههای‬‌‫ین‬ ‫کتابخان‬ ‫با‬ ‫کتر‬‌‫ین‬ ‫کوچ‬ ‫های‬ ‫پروژه‬jQuery‫پیروژه‬ ‫ییک‬ ‫آییا‬ ‫ول‬ ‫یمکنند‬‌‫ین‬ ‫برطرف‬ ‫را‬ ‫شان‬ ‫اولیه‬ ‫نیاز‬
‫یمت‬‫ی‬‫س‬ ‫در‬ ‫کارهیای‬ ‫یه‬‫ی‬‫چ‬ ‫ی‬‫ی‬‫کل‬ ‫یور‬‫ی‬‫ط‬ ‫یه‬‫ی‬‫ب‬ ‫دارد؟‬ ‫یای‬‫ی‬‫ه‬ ‫یزار‬‫ی‬‫اب‬ ‫ین‬‫ی‬‫همچی‬ ‫یا‬‫ی‬‫ب‬ ‫اجرا‬ ‫قابلیت‬ ‫راحت‬ ‫به‬ ‫نیز‬ ‫بزرگ‬
javascript‫مثل‬ ‫کارهای‬ ‫به‬ ‫آیا‬ ‫داد؟‬ ‫انجام‬ ‫یمشود‬‌‫ین‬show‫و‬hide‫شود؟‬ ‫یم‬ ‫خلصه‬
‫در‬ ‫کل‬ ‫در‬javascript code‫شیدت‬ ‫بیه‬ ‫تکیراری‬ ‫کید‬ ‫یوند‬‫ی‬‫یمش‬‌‫ین‬ ‫نوشیته‬ ‫کید‬ ‫اسپاگت‬ ‫صورت‬ ‫به‬ ‫که‬ ‫های‬
‫یل‬‫ی‬‫مث‬ ‫ابزاری‬ ‫به‬ ‫وابستگ‬ ‫معمول‬ ‫و‬ ‫یمشود‬‌‫ین‬ ‫مشاهده‬jQuery‫یا‬‫ی‬‫ی‬ ‫یذف‬‫ی‬‫ح‬ ‫یابلیت‬‫ی‬‫ق‬ ‫یه‬‫ی‬‫ک‬ ‫یت‬‫ی‬‫اس‬ ‫یاد‬‫ی‬‫زی‬ ‫یدر‬‫ی‬‫آنق‬
.‫نیست‬ ‫وجه‬ ‫هیچ‬ ‫به‬ ‫تعویض‬
‫از‬ ‫نکردن‬ ‫طبعیت‬design pattern‫مثل‬ ‫های‬interface‫که‬ ‫یمشود‬‌‫ین‬ ‫باعث‬refactoring‫یذاب‬‫ی‬‫ع‬ ‫یدت‬‫ی‬‫ش‬ ‫یه‬‫ی‬‫ب‬
.‫باشد‬ ‫آور‬
‫بیزرگ‬ ‫هیای‬ ‫پیروژه‬ ‫طراحیی‬ ‫برای‬ ‫روش‬ ‫بهترین‬ ‫ارایه‬ ،‫مقاله‬ ‫این‬ ‫هدف‬javascript‫کیه‬ ‫طیوری‬ ‫بیه‬ ‫اسیت‬
‫باشد‬ ‫داشته‬ ‫را‬ ‫خروجی‬ ‫بیشترین‬ ‫و‬ ‫کرده‬ ‫مصرف‬ ‫را‬ ‫منابع‬ ‫کمترین‬
‫یمپردازیم‬‌‫ین‬ ‫زیر‬ ‫موارد‬ ‫بررس‬ ‫به‬ ‫ارایه‬ ‫این‬ ‫در‬
•‫های‬ ‫معماری‬MVC, MVVM, MVP‫و‬MOVE
•Javascript Design pattern
•Events and Observing
•Model and Data
•Controllers and State
•Views and Templating
•Dependency Management
•Real-Time Web
•Testing and Debugging
•Deploying.
•‫برای‬ ‫ههای‬‌‫ین‬ ‫کتابخان‬ ‫بررس‬Rich application
•BackboneJs
•‫معرفی‬KnockoutJs ، Ember.Js… ‫و‬
‫هتر‬‌‫ین‬ ‫سیاد‬ ‫و‬ ‫آمیاده‬ ‫های‬ ‫ابزار‬ ‫نهایت‬ ‫در‬ ‫و‬ ‫یمشود‬‌‫ین‬ ‫داده‬ ‫توضیح‬ ‫اصل‬ ‫الگوریتم‬ ‫تها‬‌‫ین‬ ‫قسم‬ ‫از‬ ‫کدام‬ ‫هر‬ ‫در‬
.‫شود‬ ‫یم‬ ‫ارایه‬ ‫کدام‬ ‫هر‬ ‫هسازی‬‌‫ین‬ ‫پیاد‬ ‫برای‬
‫صفحه‬‫دو‬Scalable JavaScript Application By Efazati

3. ‫از‬ ‫مقاله‬ ‫این‬ ‫در‬backbone.js‫ید‬‫ی‬‫کن‬ ‫رعیایت‬ ‫را‬ ‫یاختار‬‫ی‬‫س‬ ‫این‬ ‫بیشتر‬ ‫است‬ ‫کرده‬ ‫تلش‬ ‫که‬ ‫ابزاری‬ ‫عنوان‬ ‫به‬
.‫زنیم‬ ‫یم‬ ‫این‬ ‫از‬ ‫بیشتر‬ ‫را‬ ‫لها‬‌‫ین‬ ‫مثا‬ ‫و‬ ‫یمکنیم‬‌‫ین‬ ‫استفاده‬
‫یمشود‬‌‫ین‬ ‫معرفی‬ ‫هم‬ ‫نها‬‌‫ین‬ ‫آ‬ ‫ممکن‬ ‫جای‬ ‫تا‬ ‫و‬ ‫یمشود‬‌‫ین‬ ‫استفاده‬ ‫هم‬ ‫دیگر‬ ‫کتابخانه‬ ‫از‬ ‫البته‬
‫مخاطبین‬
‫با‬ ‫بایست‬ ‫یم‬ ‫یمخوانند‬‌‫ین‬ ‫را‬ ‫مقاله‬ ‫این‬ ‫که‬ ‫کسان‬javascript‫یر‬‫ی‬‫تت‬‌‫ین‬ ‫راح‬ ‫یه‬‫ی‬‫اولی‬ ‫یاهیم‬‫ی‬‫مف‬ ‫یا‬‫ی‬‫ب‬ ‫یا‬‫ی‬‫ت‬ ‫یند‬‫ی‬‫باش‬ ‫آشینا‬
.‫کنند‬ ‫برقرار‬ ‫ارتباط‬
‫مثل‬ ‫ههای‬‌‫ین‬ ‫کتابخان‬ ‫حتما‬ ‫خواند‬ ‫از‬ ‫قبل‬ ‫یمشود‬‌‫ین‬ ‫توصیه‬JQuery‫را‬ ‫عمومیشان‬ ‫کار‬ ‫و‬ ‫کنید‬ ‫بررس‬ ‫حتما‬ ‫را‬
‫بگیرید‬ ‫یاد‬
‫صفحه‬‫سه‬Scalable JavaScript Application By Efazati

4. Scalable Application‫چیست؟‬
Scalable‫یزار‬‫ی‬‫ماف‬‌‫ین‬ ‫نر‬ ‫یک‬‫ی‬‫ی‬ ‫به‬ ‫ساده‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫یک‬ ‫از‬ ‫یعن‬ .‫است‬ ‫پذیر‬ ‫مقیاس‬ ‫معن‬ ‫به‬ ‫لغت‬ ‫در‬large size
‫یول‬‫ی‬‫اص‬ ‫یا‬‫ی‬‫ب‬ ‫یده‬‫ی‬‫ش‬ ‫یی‬‫ی‬‫طراح‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫چه‬ ‫هر‬ .‫باشد‬ ‫ارتقا‬ ‫قابل‬Scalable‫ید‬‫ی‬‫باش‬ ‫یته‬‫ی‬‫داش‬ ‫یتری‬‫ی‬‫بیش‬ ‫یابقت‬‫ی‬‫مط‬
.‫دارد‬ ‫ارتقاتری‬ ‫قابل‬ ‫طراحی‬
‫آیا‬ .‫کنیم‬ ‫هتر‬‌‫ین‬ ‫گسترد‬ ‫کم‬ ‫را‬ ‫تعریف‬Developer‫فیردا‬ ‫اسیت؟‬ ‫تیم‬ ‫یک‬ ‫فقط‬ ‫آیا‬ ‫است؟‬ ‫نفر‬ ‫یک‬ ‫فقط‬ ‫پروژه‬
‫یای‬‫ی‬‫ه‬ ‫یروژه‬‫ی‬‫پ‬ ‫یود؟‬‫ی‬‫ش‬ ‫ی‬‫ی‬‫نم‬ ‫عیوض‬ ‫تیم‬ ‫شود؟‬ ‫نم‬ ‫اضافه‬ ‫تیم‬ ‫به‬ ‫کس‬ ‫روز‬Scalable‫یعه‬‫ی‬‫توس‬ ‫حیرف‬ ‫یط‬‫ی‬‫فق‬
‫را‬ ‫یروژه‬‫پی‬ ‫این‬ ‫بتوانند‬ ‫هم‬ ‫دیگران‬ ‫ها‬ ‫تر‬ ‫بعد‬ ‫اینکه‬ ‫بحث‬ .‫ندارند‬ ‫را‬ … ‫و‬ ‫کد‬ ‫و‬ ‫درخواست‬ ‫دید‬ ‫از‬ ‫مافزار‬‌‫ین‬ ‫نر‬
.‫هست‬ ‫هم‬ ‫دهند‬ ‫توسعه‬
‫واژه‬ ‫به‬ ‫تعریف‬ ‫در‬large size‫افزاری‬ ‫نرم‬ ‫چه‬ ‫به‬ .‫کردم‬ ‫اشاره‬large size‫گویند؟‬ ‫یم‬
‫در‬javascript‫از‬ ‫یتر‬‫ی‬‫بیش‬ ‫کیه‬ ‫یزاری‬‫ی‬‫اف‬ ‫یرم‬‫ی‬‫ن‬ ‫ید‬‫ی‬‫گوین‬ ‫یمی‬ ‫و‬ ‫یود‬‫ی‬‫یمش‬‌‫ین‬ ‫نگیاه‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫اندازه‬ ‫به‬ ‫نگاه‬ ‫اولین‬ ‫در‬
100,000loc‫اینکه‬ ‫یا‬ ‫باشد‬ ‫داشته‬1MB‫کافیست؟‬ ‫تعریف‬ ‫این‬ ‫آیا‬ .‫باشد‬ ‫بیشتر‬
‫و‬ ‫نگهداری‬ ‫جهت‬ ‫های‬‌‫ین‬ ‫حرف‬ ‫بیشتر‬ ‫طراحان‬ ‫به‬ ‫نیاز‬ ‫و‬ ‫باشد‬ ‫داشته‬ ‫بدیهی‬ ‫غیر‬ ‫تهای‬‌‫ین‬ ‫قسم‬ ‫که‬ ‫افزاری‬ ‫نرم‬
‫و‬ ‫یاربر‬‫ی‬‫ک‬ ‫یمت‬‫ی‬‫س‬ ‫یایش‬‫ی‬‫نم‬ ‫و‬ ‫یردازش‬‫ی‬‫پ‬ ،‫بررسی‬ ‫ی‬‫ی‬‫اساس‬ ‫یمت‬‫ی‬‫قس‬ ‫همچنین‬ .‫باشد‬ ‫داشته‬ ‫توسعه‬Browser
.‫باشد‬i
‫صفحه‬‫چهار‬Scalable JavaScript Application By Efazati

5. ‫های‬ ‫معماری‬MVC, MVP, MVVM‫و‬MOVE
‫یزار‬‫ی‬‫ماف‬‌‫ین‬ ‫نر‬ ‫یاری‬‫ی‬‫معم‬ ‫یوی‬‫ی‬‫الگ‬ ‫از‬ ‫ی‬‫ی‬‫جزئ‬ ‫یدام‬‫ی‬‫ک‬ ‫یر‬‫ی‬‫ه‬ ‫یده‬‫ی‬‫ش‬ ‫نامبرده‬ ‫های‬ ‫معماری‬ ‫کل‬ii
‫یای‬‫ی‬‫الگوه‬ .‫یند‬‫ی‬‫باش‬ ‫ی‬‫ی‬‫یم‬
‫یم‬ ‫ساخته‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫یک‬ ‫نها‬‌‫ین‬ ‫آ‬ ‫از‬ ‫استفاده‬ ‫با‬ ‫که‬ ‫هستند‬ ‫استانداردی‬ ‫طراحی‬ ‫شهای‬‌‫ین‬ ‫رو‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫معماری‬
.‫شود‬
‫درک‬ ‫یده‬‫ی‬‫آین‬ ‫در‬ ‫طرفیی‬ ‫از‬ ‫و‬ ‫آمیده‬ ‫یایین‬‫ی‬‫پ‬ ‫یی‬‫ی‬‫طراح‬ ‫یک‬‫ی‬‫ریس‬ ‫ین‬‫ی‬‫ممک‬ ‫یای‬‫ی‬‫ج‬ ‫تا‬ ‫شها‬‌‫ین‬ ‫رو‬ ‫این‬ ‫گرفتن‬ ‫نظر‬ ‫در‬ ‫با‬
‫یط‬‫ی‬‫توس‬ ‫تها‬‌‫ین‬ ‫یاع‬‫ی‬‫س‬ ‫یا‬‫ی‬‫ه‬ ‫یاری‬‫ی‬‫معم‬ ‫ین‬‫ی‬‫ای‬ ‫روی‬ ‫یر‬‫ی‬‫ب‬ ‫یه‬‫ی‬‫ک‬ ‫ید‬‫ی‬‫بگیری‬ ‫یر‬‫ی‬‫نظ‬ ‫در‬ ‫یه‬‫ی‬‫البت‬ .‫یت‬‫ی‬‫اس‬ ‫تتر‬‌‫ین‬ ‫راح‬ … ‫و‬ ‫ساختار‬
‫نتیجه‬ ‫در‬ ‫و‬ ‫شده‬ ‫فکر‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫مهندسان‬performance.‫داشت‬ ‫خواهند‬ ‫بهتری‬
‫به‬ ‫ها‬ ‫طراحی‬ ‫این‬ ‫ارتباط‬ ‫یمپرسید‬‌‫ین‬ ‫خود‬ ‫از‬javascript‫یروژه‬‫ی‬‫پ‬ ‫یک‬ ‫طبیعتا‬ ‫چیست؟‬scalable‫یادی‬‫ی‬‫زی‬ ‫یاز‬‫ی‬‫نی‬
‫یروژه‬‫ی‬‫پ‬ ‫اجرا‬ ‫بار‬ ‫چند‬ ‫که‬ ‫یمشود‬‌‫ین‬ ‫دیده‬ ‫چنان‬ ‫طراحی‬ ‫ضعف‬ ‫نقاط‬ ‫پروژه‬ ‫اواسط‬ ‫در‬ ‫وگرنه‬ .‫دارد‬ ‫طراحی‬ ‫به‬
.‫شود‬ ‫نم‬ ‫رسیده‬ ‫مقصد‬ ‫به‬ ‫نهایت‬ ‫در‬ ‫و‬ ‫یمکند‬‌‫ین‬ ‫فرسایش‬ ‫را‬
‫یک‬ ‫ساخت‬ ‫طرفی‬ ‫از‬Scalabel application‫از‬ ‫های‬‌‫ین‬ ‫مجموع‬ ‫مند‬ ‫نیاز‬decouple‫یه‬‫ی‬‫تک‬ ‫یاختار‬‫ی‬‫س‬ ‫یا‬‫ی‬‫ت‬ ‫یت‬‫ی‬‫هاس‬
.‫باشید‬ ‫داشته‬ ‫های‬‌‫ین‬ ‫شد‬
‫بیشتر‬ ‫شما‬ ‫کد‬ ‫مناسب‬ ‫های‬ ‫طراحی‬ ‫از‬ ‫استفاده‬ ‫با‬re-usable‫علت‬ ‫به‬ ‫طرفی‬ ‫از‬ ‫و‬ ‫بود‬ ‫خواهد‬decouple
‫امکان‬ ‫مختلف‬ ‫تهای‬‌‫ین‬ ‫قسم‬ ‫بود‬ ‫هتکه‬‌‫ین‬ ‫تک‬ ‫و‬ ‫شدن‬test‫و‬ ‫شدن‬mock‫خیوردن‬ ‫مشیکل‬ ‫بیه‬ ‫بیا‬ .‫دارنید‬ ‫کردن‬
‫یورت‬‫ی‬‫ص‬ ‫یه‬‫ی‬‫ب‬ ‫یار‬‫ی‬‫ک‬ ‫یم‬‫ی‬‫ه‬ ‫طراحی‬ ‫زمان‬ ‫در‬ .‫دهند‬ ‫یم‬ ‫انجام‬ ‫خویب‬ ‫به‬ ‫را‬ ‫خود‬ ‫کار‬ ‫تها‬‌‫ین‬ ‫قسم‬ ‫بقیه‬ ‫قسمت‬ ‫یک‬
.‫شود‬ ‫یم‬ ‫داده‬ ‫دیگران‬ ‫به‬ ‫شده‬ ‫کپسوله‬
‫ها‬ ‫پروژه‬ ‫در‬ ‫که‬ ‫موردی‬ ‫چند‬javascript.‫کنیم‬ ‫یم‬ ‫بررس‬ ‫تک‬ ‫تک‬ ‫را‬ ‫یمشود‬‌‫ین‬ ‫استفاده‬
MVC
‫ترکیب‬model, view‫و‬controller‫یک‬ ‫که‬module‫طراحی‬ ‫یمکند‬‌‫ین‬ ‫ایجاد‬ ‫را‬MVC.‫یمکند‬‌‫ین‬ ‫ایجاد‬ ‫را‬Model
‫لیه‬data.‫یزرد‬‫ی‬‫بگ‬ ‫یه‬‫ی‬‫لی‬ ‫ین‬‫ی‬‫ای‬ ‫از‬ ‫ید‬‫ی‬‫بای‬ ‫یت‬‫ی‬‫هس‬ ‫شونده‬ ‫ذخیره‬ ‫اطلعات‬ ‫به‬ ‫مرتبط‬ ‫که‬ ‫هرچیزی‬ .‫سازد‬ ‫یم‬ ‫را‬
View‫آن‬ ‫طریق‬ ‫از‬ ‫کاربر‬ ‫که‬ ‫هایست‬‌‫ین‬ ‫لی‬data‫و‬ ‫یمبیند‬‌‫ین‬ ‫را‬Controller.‫بود‬ ‫خواهد‬ ‫لیه‬ ‫دو‬ ‫این‬ ‫بین‬ ‫چسب‬
‫صفحه‬‫پنج‬Scalable JavaScript Application By Efazati

6. .‫گیرد‬ ‫یم‬ ‫قرار‬ ‫مناسبش‬ ‫جای‬ ‫در‬ ‫کارکردش‬ ‫از‬ ‫استفاده‬ ‫با‬ ‫عملگری‬ ‫نوع‬ ‫هر‬ ‫طراحی‬ ‫این‬ ‫در‬iii
MVVM
‫طراحی‬MVVM‫توسط‬ ‫بار‬ ‫اولین‬microsoft‫یی‬‫ی‬‫طراح‬ ‫این‬ ‫ساختار‬ ‫در‬ .‫شد‬ ‫ارایه‬Model‫و‬View‫یا‬‫ی‬‫ب‬ ‫یاوت‬‫ی‬‫تف‬
MVC.‫ندارد‬VM‫یا‬‫ی‬‫ی‬ViewModel‫یون‬‫ی‬‫همچ‬Controller‫ین‬‫ی‬‫بی‬ ‫یت‬‫ی‬‫نازکیس‬ ‫یه‬‫ی‬‫لی‬Model‫و‬Viewiv
‫یاوت‬‫ی‬‫تف‬ ‫یا‬‫ی‬‫ام‬
:‫از‬ ‫است‬ ‫عبارت‬ ‫هایش‬
1.‫با‬ ‫وطرفه‬‌‫ین‬ ‫د‬ ‫ارتباط‬View
2.ViewModel‫کننده‬ ‫ارایه‬View‫در‬ ‫فیلد‬ ‫هر‬ ‫یعن‬ .‫است‬ViewModel‫با‬ ‫برابر‬ ‫بیشتر‬View‫و‬ ‫اسییت‬
‫از‬ ‫علت‬ ‫همین‬ ‫به‬Model‫است‬ ‫دورتر‬
3.‫هر‬View‫یک‬ ‫به‬ ‫مستقیما‬ ‫ی‬ViewModel bind‫یه‬‫ی‬‫ب‬ ‫مربوط‬ ‫تغیرات‬ ‫نتیجه‬ ‫در‬ ‫و‬ ‫یمشود‬‌‫ین‬View‫یه‬‫ی‬‫ب‬
‫در‬ ‫های‬‌‫ین‬ ‫لحظ‬ ‫صورت‬ViewModel‫یاعث‬‫ی‬‫ب‬ ‫یم‬‫ی‬‫ه‬ ‫یس‬‫ی‬‫برعک‬ ‫یرات‬‫ی‬‫تغیی‬ ‫طرفی‬ ‫از‬ ‫و‬ ‫یمشود‬‌‫ین‬ ‫دیده‬render
‫مجدد‬View.‫شود‬ ‫یم‬
4.‫هر‬ ‫برای‬ ‫معمول‬View‫یک‬ ‫فقط‬ViewModel.‫دارد‬ ‫وجود‬v
‫به‬ ‫یک‬ ‫ارتباط‬ ‫این‬N.‫باشد‬ ‫یم‬vi
5.Model‫و‬View‫طریق‬ ‫از‬ ‫فقط‬ViewModel.‫دارند‬ ‫ارتباط‬
‫صفحه‬‫شش‬Scalable JavaScript Application By Efazati

7. MVP
‫از‬ ‫شده‬ ‫مشتق‬ ‫طراحی‬ ‫این‬MVC‫لییه‬ ‫فقیط‬ ‫یمکند‬‌‫ین‬ ‫عمل‬ ‫آن‬ ‫شبیه‬ ‫کامل‬ ‫و‬ ‫است‬Presenter‫شیبیه‬ ‫کمی‬
ViewModel.‫کند‬ ‫یم‬ ‫عمل‬
‫با‬ ‫که‬ ‫تفاوت‬MVVM‫عکس‬ ‫بر‬ ‫روش‬ ‫این‬ ‫در‬ ‫که‬ ‫است‬ ‫این‬ ‫در‬ ‫دارد‬MVVM‫بیین‬ ‫ارتباط‬Presenter‫و‬View
.‫باشد‬ ‫یم‬ ‫یک‬ ‫به‬ ‫یک‬ ‫صورت‬ ‫به‬
MOVE
‫در‬ ‫خبری‬ ‫پیش‬ ‫وقت‬ ‫چند‬hackernew‫یی‬‫ی‬‫طراح‬ ‫یه‬‫ی‬‫ک‬ ‫یرد‬‫ی‬‫ک‬ ‫یب‬‫ی‬‫جل‬ ‫خود‬ ‫به‬ ‫را‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫طراحان‬ ‫توجه‬ ‫چنان‬
.‫شد‬ ‫اضافه‬ ‫عمویم‬ ‫های‬ ‫طراحی‬ ‫لیست‬ ‫به‬ ‫جدید‬
:‫بود‬ ‫این‬ ‫خبر‬MVC is dead, it's time to MOVE on.
‫با‬ ‫زیادی‬ ‫شباهت‬ ‫که‬ ‫طراحی‬ ‫این‬ ‫در‬MVP‫دارد‬ ‫وجود‬ ‫که‬ ‫تفاوت‬ ‫دارد‬Operation‫جای‬Presenter‫گرفته‬
‫صفحه‬‫هفت‬Scalable JavaScript Application By Efazati

8. ‫طرفی‬ ‫از‬ ‫و‬ .‫است‬Model‫از‬ ‫استفاده‬ ‫با‬Event‫یمتواند‬‌‫ین‬View‫دوباره‬ ‫را‬Render‫یازی‬‫ی‬‫نی‬ ‫یر‬‫ی‬‫دیگ‬ ‫ی‬‫ی‬‫یعن‬ .‫کند‬
‫که‬ ‫نیست‬Model‫فلن‬ ‫که‬ ‫بگوید‬ ‫ارتباطی‬ ‫لیه‬ ‫به‬data‫به‬ ‫عوض‬ ‫در‬ ‫شده‬ ‫عوض‬ ‫من‬ ‫ی‬view.‫گویید‬ ‫یم‬
‫اساس‬ ‫بر‬ ‫سیستم‬ ‫روش‬ ‫این‬ ‫در‬Event‫و‬Change call.‫یمکند‬‌‫ین‬ ‫کار‬vii
‫مثال‬ ‫طور‬ ‫به‬Backbone.js‫از‬ ‫زیادی‬ ‫استفاده‬mvc‫فریم‬ ‫این‬ ‫از‬ ‫لهای‬‌‫ین‬ ‫مثا‬ ‫دیگر‬ ‫تهای‬‌‫ین‬ ‫قسم‬ ‫در‬ .‫کند‬ ‫یم‬
‫دهیم‬ ‫یم‬ ‫های‬ ‫ابزار‬ ‫این‬ ‫از‬ ‫کامل‬ ‫توضیح‬ ‫نهایت‬ ‫در‬ ‫و‬ ‫یمزنیم‬‌‫ین‬ ‫ورک‬
‫صفحه‬‫هشت‬Scalable JavaScript Application By Efazati

9. ‫در‬ ‫کل س‬javascript
‫تعریف‬ ‫به‬ ‫نیاز‬ ‫ای‬ ‫پروژه‬ ‫هر‬ ‫برای‬class‫ید‬‫ی‬‫چن‬ ‫که‬ ‫دارد‬ ‫وجود‬ ‫تعریف‬ ‫برای‬ ‫مختلفی‬ ‫شهای‬‌‫ین‬ ‫رو‬ .‫دارد‬ ‫وجود‬
:‫از‬ ‫است‬ ‫عبارت‬ ‫موردش‬
‫از‬ ‫استفاده‬functionviii
‫یک‬‫ی‬‫ی‬ ‫یما‬‫ی‬‫ش‬ ‫یالت‬‫ی‬‫ح‬ ‫ین‬‫ی‬‫ای‬ ‫در‬ .‫هاست‬ ‫روش‬ ‫ترین‬ ‫معمول‬ ‫از‬ ‫یک‬function‫در‬ ‫را‬ ‫یوارد‬‫ی‬‫م‬ ‫و‬ ‫ید‬‫ی‬‫یمکنی‬‌‫ین‬ ‫یف‬‫ی‬‫تعری‬
context.‫کنید‬ ‫یم‬ ‫اضافه‬ ‫همان‬
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = getAppleInfo;
}
// anti-pattern! keep reading...
function getAppleInfo() {
return this.color + ' ' + this.type + ' apple';
}
‫از‬ ‫استفاده‬ ‫با‬ ‫تونید‬ ‫یم‬ ‫شما‬new‫یک‬instance.‫کنید‬ ‫ایجاد‬ ‫جدید‬
var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());
.‫کنید‬ ‫تعریف‬ ‫داخل‬ ‫صورت‬ ‫به‬ ‫را‬ ‫مرتبط‬ ‫های‬ ‫متد‬ ‫یمتوانید‬‌‫ین‬ ‫شما‬
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
}
‫صفحه‬‫نه‬Scalable JavaScript Application By Efazati

10. ‫از‬ ‫اینکه‬ ‫یا‬protoype.‫کنید‬ ‫استفاده‬
Apple.prototype.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
‫دیگر‬ ‫تعاریف‬ ‫کل‬ ‫طور‬ ‫به‬OOP.‫کنید‬ ‫هسازی‬‌‫ین‬ ‫پیاد‬ ‫فها‬‌‫ین‬ ‫تعری‬ ‫این‬ ‫در‬ ‫یمتوانید‬‌‫ین‬ ‫هم‬ ‫را‬
.‫ببیند‬ ‫را‬ ‫بری‬ ‫ارث‬ ‫به‬ ‫مربوط‬ ‫هسازی‬‌‫ین‬ ‫پیاد‬ ‫مثال‬ ‫طور‬ ‫به‬
pear.prototype = new Apple;
‫از‬ ‫استفاده‬Object
‫در‬javascript‫ها‬ ‫دیکشنری‬object‫یک‬ ‫یمتوانید‬‌‫ین‬ ‫راحت‬ ‫به‬ ‫شما‬ ‫و‬ ‫هستند‬object.‫کنید‬ ‫درست‬ ‫جدید‬
var o = {};
‫از‬ ‫اینکه‬ ‫یا‬object‫یک‬instance.‫بسازید‬ ‫جدید‬
var o = new Object();
‫بسازید‬ ‫کلس‬ ‫یک‬ ‫یمتوانید‬‌‫ین‬ ‫شما‬ ‫ساختار‬ ‫این‬ ‫از‬ ‫استفاده‬ ‫با‬ ‫حال‬
var apple = {
type: "macintosh",
color: "red",
getInfo: function () {
return this.color + ' ' + this.type + ' apple';
}
}
.‫کنید‬ ‫استفاده‬ ‫ازش‬ ‫راحت‬ ‫به‬ ‫و‬
apple.color = "reddish";
alert(apple.getInfo());
‫آماده‬ ‫سهای‬‌‫ین‬ ‫کل‬ ‫از‬ ‫استفاده‬
‫مسأله‬ ‫کل‬class‫در‬javascript‫یده‬‫ی‬‫ش‬ ‫یته‬‫ی‬‫نوش‬ ‫آن‬ ‫یا‬‫ی‬‫ب‬ ‫یار‬‫ی‬‫ک‬ ‫یرای‬‫ی‬‫ب‬ ‫یادی‬‫ی‬‫زی‬ ‫سهای‬‌‫ین‬ ‫کل‬ ‫که‬ ‫بوده‬ ‫جدی‬ ‫اینقدر‬
.‫است‬
‫صفحه‬‫ده‬Scalable JavaScript Application By Efazati

11. • k33g/speculoos -> https://github.com/k33g/speculoos
• ded/klass -> https://github.com/ded/klass
• Classy Classes for JavaScript -> http://classy.pocoo.org/
• jsclassextend - JS Class is small and powerfull library which simplifies oop in javascript -
Google Project Hosting -> http://code.google.com/p/jsclassextend/
• jayferd/pjs -> https://github.com/jayferd/pjs
• jiem/my-class -> https://github.com/jiem/my-class
• ShadowCloud/ES5-Class -> https://github.com/ShadowCloud/ES5-Class
• gigafied/minion -> https://github.com/gigafied/minion
• jasonwyatt/ancestry.js -> https://github.com/jasonwyatt/ancestry.js
• JS.Class v3.0 -> http://jsclass.jcoglan.com/
• tekool/objs -> https://github.com/tekool/objs
‫صفحه‬‫یازده‬Scalable JavaScript Application By Efazati

12. 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
‫یده‬‫ی‬‫خوانن‬ ‫عهیده‬ ‫بیه‬ ‫مقاله‬ ‫حوصله‬ ‫از‬ ‫بودن‬ ‫خارج‬ ‫علت‬ ‫به‬ ‫رو‬ ‫بقیه‬ ‫و‬ ‫یمکنیم‬‌‫ین‬ ‫بررس‬ ‫را‬ ‫ها‬ ‫الگو‬ ‫از‬ ‫یک‬ ‫ما‬
.‫یمگذاریم‬‌‫ین‬
Observer Pattern
‫الگو‬ ‫این‬ ‫در‬object‫که‬ ‫کسان‬ ‫از‬ ‫لیست‬ ‫اصل‬observer‫یر‬‫ی‬‫نظ‬ ‫یورد‬‫ی‬‫م‬ ‫یام‬‫ی‬‫هنگ‬ ‫در‬ ‫و‬ ‫یمدارد‬‌‫ین‬ ‫یه‬‫ی‬‫نگ‬ ‫هاند‬‌‫ین‬ ‫ید‬‫ی‬‫ش‬
‫کدام‬ ‫هر‬ ‫به‬ ‫را‬ ‫تغییر‬ ‫اعلم‬notify.‫کند‬ ‫یم‬
‫یر‬‫ی‬‫ه‬ ‫ید‬‫ی‬‫بخواه‬ ‫یه‬‫ی‬‫ک‬ ‫افزاری‬ ‫نرم‬ ‫هر‬ ‫کد‬ ‫این‬ ‫در‬ .‫ببینید‬ ‫شمار‬ ‫ثانیه‬ ‫یک‬ ‫از‬ ‫ساده‬ ‫کد‬ ‫نمونه‬ ‫یک‬ ‫مثال‬ ‫طور‬ ‫به‬
‫به‬ ‫بشود‬ ‫مطلع‬ ‫ثانیه‬object‫صورت‬ ‫به‬observer.‫دهد‬ ‫یم‬ ‫گوش‬
$.utils.timer = {
"listeners" : [],
// ‫دهند‬ ‫می‬ ‫گوش‬ ‫که‬ ‫کسانی‬ ‫از‬ ‫لیستی‬
"add_listener" : function (f) {
$.utils.timer.listeners.push(f);
},
‫صفحه‬‫دوازده‬Scalable JavaScript Application By Efazati

13. "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.‫شود‬ ‫یم‬
.‫دهند‬ ‫یم‬ ‫انجام‬ ‫را‬ ‫کار‬ ‫این‬ ‫روش‬ ‫به‬ ‫کدام‬ ‫هر‬ ‫دیگر‬ ‫وهای‬‌‫ین‬ ‫الگ‬
‫صفحه‬‫سیزده‬Scalable JavaScript Application By Efazati

14. Event
‫کاربر‬ ‫ورودی‬ ‫مهمترین‬Event‫از‬ ‫اسیتفاده‬ ‫یا‬‫ی‬‫ب‬ ‫بشود‬ ‫حرکت‬ ‫به‬ ‫منجر‬ ‫است‬ ‫قرار‬ ‫که‬ ‫اتفاقات‬ ‫تمام‬ .‫است‬
Event‫یمتواند‬‌‫ین‬handle‫مثل‬ ‫اتفاقات‬ .‫شود‬click… ‫و‬
‫یل‬‫ی‬‫مث‬ ‫یای‬‫ی‬‫ه‬ ‫یزار‬‫ی‬‫اب‬ ‫یبختانه‬‫ی‬‫خوش‬ ‫یه‬‫ی‬‫ک‬ ‫دارنید‬ ‫ی‬‫ی‬‫متناقض‬ ‫های‬ ‫رفتار‬ ‫موارد‬ ‫بعض‬ ‫در‬ ‫ها‬ ‫مرورگر‬ ‫البته‬JQuery
‫این‬ ‫سازی‬ ‫یکسان‬ ‫جهت‬ ‫زیادی‬ ‫کمک‬Event.‫کنند‬ ‫یم‬ ‫ها‬
// Event bind:
// jquery
$("#div").click(function(){
// ...
});
// javascript
var div = document.getElementById("div");
var listener = function(event) { /* ... */ };
div.addEventListener("click", listener, false);
div.removeEventListener("click", listener, false);
‫در‬bind‫شدن‬ ‫عوض‬ ‫به‬ ‫باید‬ ‫نها‬‌‫ین‬ ‫کرد‬context.‫کرد‬ ‫دقت‬This‫که‬ ‫هنگایم‬fire‫دیگر‬ ‫یمشود‬‌‫ین‬this‫حاضییر‬
‫مورد‬ ‫این‬ ‫حل‬ ‫برای‬ .‫نیست‬refrence.‫کرد‬ ‫باید‬ ‫کار‬ ‫آن‬ ‫با‬ ‫و‬ ‫باشد‬ ‫داشته‬ ‫وجود‬ ‫باید‬ ‫آن‬
‫که‬ ‫کنید‬ ‫دقت‬deligate‫کل‬ ‫روی‬ ‫چون‬ ‫معمول‬dom‫از‬ .‫یت‬‫ی‬‫داش‬ ‫ید‬‫ی‬‫خواه‬ ‫سریعتری‬ ‫نتیجه‬ ‫نباشد‬ ‫یمتواند‬‌‫ین‬
‫که‬ ‫است‬ ‫بهتر‬ ‫باشد‬ ‫نم‬ ‫موجود‬ ‫صفحه‬ ‫در‬ ‫نظر‬ ‫مورد‬ ‫المنت‬ ‫علت‬ ‫هر‬ ‫به‬ ‫که‬ ‫هنگایم‬ ‫طرفی‬Event‫یای‬‫هی‬
.‫کنید‬ ‫حذف‬ ‫هم‬ ‫را‬ ‫هاش‬‌‫ین‬ ‫مربوط‬
‫یک‬ ‫خودتان‬ ‫یمتوانید‬‌‫ین‬ ‫شما‬Event‫نظر‬ ‫مورد‬ ‫زمان‬ ‫در‬ ‫و‬ ‫بسازید‬ ‫جدید‬fire.‫کنید‬
‫صفحه‬‫چهارده‬Scalable JavaScript Application By Efazati

15. Model‫و‬Data
‫در‬ ‫یا‬‫ی‬‫ت‬ ‫ید‬‫ی‬‫داری‬ ‫نگه‬ ‫را‬ ‫اطلعات‬ ‫نیست‬ ‫بهتر‬ ‫آیا‬ ‫یمکنید‬‌‫ین‬ ‫دریافت‬ ‫سرور‬ ‫از‬ ‫را‬ ‫اطلعات‬ ‫یک‬ ‫شما‬ ‫که‬ ‫هنگایم‬
‫کنید؟‬ ‫استفاده‬ ‫نها‬‌‫ین‬ ‫آ‬ ‫از‬ ‫اطلعات‬ ‫همین‬ ‫مجدد‬ ‫درخواست‬
‫لیه‬ ‫کل‬model‫سمت‬ ‫از‬view‫یای‬‫ی‬‫ه‬ ‫یاز‬‫ی‬‫نی‬ ‫همیه‬ ‫و‬ ‫شود‬ ‫دیده‬ ‫یمتواند‬‌‫ین‬sync‫خیود‬ ‫یق‬‫ی‬‫طری‬ ‫از‬model‫حیل‬
‫عمل‬ ‫از‬ ‫ممکن‬ .‫شود‬ ‫حل‬ ‫باید‬ ‫شما‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫نسبت‬ ‫به‬ ‫و‬ ‫پیشنهادیست‬ ‫موارد‬ ‫این‬ ‫که‬ ‫کنید‬ ‫)دقت‬ .‫شود‬
sync‫لیه‬ ‫از‬ ‫جزی‬controller(… ‫یا‬ ‫باشد‬ ‫شما‬
‫شود؟‬ ‫ذخیره‬ ‫کجا‬ ‫نظر‬ ‫مورد‬ ‫دیتای‬ ‫است‬ ‫این‬ ‫مسأله‬ ‫این‬ ‫سؤال‬ ‫مهمترین‬
‫خود‬ ‫تها‬‌‫ین‬ ‫قسم‬ ‫ترین‬ ‫راحت‬ ‫از‬ ‫یک‬object‫به‬ ‫مربوط‬model‫است‬
var User = {
records: [],
fetchRemote: function(){ /* ... */ }
};
‫کلس‬ ‫یک‬ ‫یمتوانید‬‌‫ین‬ ‫شما‬Model‫که‬ ‫کنید‬ ‫درست‬tabel‫کار‬ ‫خودش‬ ‫طرفی‬ ‫از‬ ‫و‬ ‫شود‬ ‫مشتق‬ ‫آن‬ ‫از‬ ‫هایتان‬
.‫دهد‬ ‫انجام‬ ‫را‬ … ‫و‬ ‫اطلعات‬ ‫دریافت‬
‫شبه‬ ‫از‬ ‫یمتوانید‬‌‫ین‬ ‫طرفی‬ ‫از‬ORM‫دارند‬ ‫وجود‬ ‫زیر‬ ‫موارد‬ ‫مثال‬ ‫طور‬ ‫به‬ .‫کنید‬ ‫استفاده‬ ‫موجود‬ ‫های‬
• TaffyDB - The JavaScript Database -> http://www.taffydb.com/
• Supplement.js - JavaScript Extras -> http://supplementjs.com/
• Poincare/ShinyCar -> https://github.com/Poincare/ShinyCar
• Jaylist -> http://benbscholz.github.com/jaylist/
• marcuswestin/store.js -> https://github.com/marcuswestin/store.js
‫کل‬ ‫طور‬ ‫به‬ ‫هها‬‌‫ین‬ ‫کتابخان‬ ‫این‬data‫یری‬‫ی‬‫س‬ ‫یک‬‫ی‬‫ی‬ ‫یا‬‫ی‬‫ب‬ ‫را‬ ‫یده‬‫ی‬‫ش‬ ‫دریافت‬wrapper‫یان‬‫ی‬‫امک‬ ‫و‬ ‫ید‬‫ی‬‫یمکنن‬‌‫ین‬ ‫یداری‬‫ی‬‫نگه‬
.‫گذارند‬ ‫یم‬ ‫نویس‬ ‫برنامه‬ ‫اختیار‬ ‫در‬ ‫را‬ ‫بهتر‬ ‫استفاده‬ ‫و‬ ‫جستجو‬
‫از‬ ‫قسمت‬ ‫مثال‬ ‫طور‬ ‫به‬taffyDB‫ببینیم‬ ‫رو‬
// Create DB and fill it with records
var friends = TAFFY([
{"id":1,"gender":"M","first":"John","last":"Smith","city":"Seattle,
WA","status":"Active"},
{"id":2,"gender":"F","first":"Kelly","last":"Ruth","city":"Dallas,
TX","status":"Active"},
{"id":3,"gender":"M","first":"Jeff","last":"Stevenson","city":"Washington,
D.C.","status":"Active"},
{"id":4,"gender":"F","first":"Jennifer","last":"Gill","city":"Seattle,
WA","status":"Active"}
]);
‫صفحه‬‫پانزده‬Scalable JavaScript Application By Efazati

16. // Find all the friends in Seattle
friends({city:"Seattle, WA"});
// Find John Smith, by ID
friends({id:1});
// Find John Smith, by Name
friends({first:"John",last:"Smith"});
// Kelly's record
var kelly = friends({id:2}).first();
// Kelly's last name
var kellyslastname = kelly.last;
‫خود‬ ‫جای‬ ‫به‬ ‫همچنین‬object‫از‬localStorage‫خود‬html5.‫کنید‬ ‫استفاده‬ ‫تونید‬ ‫یم‬ ‫هم‬
Backbone js Model
‫ساختار‬model‫در‬backbone‫در‬ ‫یک‬‫ی‬‫ت‬ ‫یک‬‫ی‬‫ت‬ ‫یر‬‫ی‬‫نظ‬ ‫مورد‬ ‫های‬ ‫فیلد‬ ‫که‬ ‫است‬ ‫صورت‬ ‫این‬ ‫به‬object‫یتق‬‫ی‬‫مش‬
‫از‬ ‫شده‬model‫را‬ ‫یری‬‫ی‬‫عملگ‬ ‫دارنید‬ ‫یا‬‫ی‬‫ه‬ ‫ید‬‫ی‬‫فیل‬ ‫یه‬‫ی‬‫ب‬ ‫که‬ ‫ای‬ ‫دسترس‬ ‫با‬ ‫متدها‬ ‫از‬ ‫کدام‬ ‫هر‬ ‫و‬ ‫یمشود‬‌‫ین‬ ‫تعریف‬
:‫مثال‬ ‫طور‬ ‫به‬ .‫دهند‬ ‫یم‬ ‫انجام‬
var Game = Backbone.Model.extend({
initialize: function(){
alert("Oh hey! ");
},
defaults: {
name: 'Default title',
releaseDate: 2011,
}
});
‫هر‬ ‫حقیقت‬ ‫در‬Row‫یک‬model‫یک‬ ‫نها‬‌‫ین‬ ‫ای‬ ‫های‬‌‫ین‬ ‫مجموع‬ ‫طرفی‬ ‫از‬ ‫و‬ ‫یمباشد‬‌‫ین‬collection.‫کند‬ ‫یم‬ ‫ایجاد‬ ‫را‬
var GamesCollection = Backbone.Collection.extend({
model : Game,
old : function() {
‫صفحه‬‫شانزده‬Scalable JavaScript Application By Efazati

17. return this.filter(function(game) {
return game.get('releaseDate') < 2009;
});
}
});
‫در‬ ‫باشد‬ ‫ردیف‬ ‫هر‬ ‫برای‬ ‫که‬ ‫خصیصه‬ ‫هر‬ ‫روش‬ ‫این‬ ‫در‬model‫بییه‬ ‫مربوط‬ ‫که‬ ‫چیزی‬ ‫هر‬ ‫و‬ ‫یمشود‬‌‫ین‬ ‫اضافه‬
‫کل‬collection‫در‬ ‫باشد‬collection.‫شود‬ ‫یم‬ ‫تعریف‬
‫در‬ ‫دیتا‬ ‫ذخیره‬ ‫جالب‬ ‫تهای‬‌‫ین‬ ‫خاصی‬ ‫از‬ ‫یک‬localstorge‫است‬
window.SomeCollection = Backbone.Collection.extend({
localStorage: new Backbone.LocalStorage("SomeCollection"), // Unique name
within your app.
// ... everything else is normal.
});
‫صفحه‬‫هفده‬Scalable JavaScript Application By Efazati

18. Controllers‫و‬State
State‫دیییده‬ ‫چی‬ ‫تر‬ ‫قبل‬ ‫اینکه‬ ‫ببیند‬ ‫باید‬ ‫چی‬ ‫الن‬ ‫اینکه‬ .‫است‬ ‫کاربر‬ ‫نمایش‬ ‫حاضر‬ ‫وضعیت‬ ‫حقیقت‬ ‫در‬
‫لینیک‬ ‫از‬ ‫اسیتفاده‬ ‫بیا‬ ‫چییز‬ ‫همیه‬ ‫سنت‬ ‫شهای‬‌‫ین‬ ‫رو‬ ‫در‬ ‫دید؟‬ ‫خواهد‬ ‫چه‬ ‫دکمه‬ ‫فلن‬ ‫روی‬ ‫بر‬ ‫کلیک‬ ‫با‬ ‫اینکه‬
‫و‬ ‫ثابت‬ ‫های‬session‫قابل‬ ‫کاربر‬handle‫سمت‬ ‫چیز‬ ‫همه‬ ‫که‬ ‫روش‬ ‫در‬ ‫ول‬ ‫بود‬javascript‫یی؟‬‫ی‬‫چ‬ ‫هست‬
‫راحتیست؟‬ ‫همین‬ ‫به‬ ‫آیا‬
state‫طور‬ ‫به‬ .‫یمآید‬‌‫ین‬ ‫ثابت‬ ‫درخواست‬ ‫یک‬ ‫اساس‬ ‫بر‬ ‫که‬ ‫متفاوت‬ ‫بهای‬‌‫ین‬ ‫جوا‬ :‫یمکنند‬‌‫ین‬ ‫تعریف‬ ‫اینگونه‬ ‫را‬
‫دیگر‬ ‫شکل‬ ‫یک‬ ‫عضو‬ ‫غیر‬ ‫کاربر‬ ‫برای‬ ‫و‬ ‫بیاید‬ ‫شکل‬ ‫یک‬ ‫عضو‬ ‫کاربر‬ ‫برای‬ ‫از‬ ‫ممکن‬ ‫آدرس‬ ‫یک‬ ‫مثال‬load
.‫شود‬
‫یک‬ ‫کل‬ ‫در‬application‫یک‬state‫از‬ ‫لیست‬ ‫و‬ ‫دارد‬ ‫فعال‬state‫دو‬ ‫ین‬‫ی‬‫بی‬ ‫یاط‬‫ی‬‫ارتب‬ .‫یته‬‫ی‬‫گذش‬ ‫یای‬‫ی‬‫ه‬state‫یک‬‫ی‬‫ی‬
transaction‫بین‬ ‫در‬ ‫حرکت‬ ‫برای‬ ‫که‬ ‫هست‬state‫ها‬call.‫شود‬ ‫یم‬
‫تغییرات‬ ‫کرد‬ ‫دقت‬ ‫باید‬state‫به‬ ‫منجر‬controller.‫کنند‬ ‫یم‬ ‫اجرا‬ ‫را‬ ‫عملگری‬ ‫نها‬‌‫ین‬ ‫آ‬ ‫و‬ ‫یمشوند‬‌‫ین‬transaction
‫این‬ ‫در‬ ‫ها‬controller‫یای‬‫ی‬‫ه‬ ‫یا‬‫ی‬‫دیت‬ ‫نباید‬ ‫وجه‬ ‫هیچ‬ ‫به‬ .‫شود‬ ‫یم‬ ‫تعریف‬ ‫ها‬view‫در‬ ‫یدی‬‫ی‬‫بع‬ ‫و‬ ‫ی‬‫ی‬‫قبل‬ ‫ای‬html
‫یه‬‫ی‬‫ک‬ ‫ید‬‫ی‬‫مدان‬‌‫ین‬ ‫ن‬ ‫یدل‬‫ی‬‫م‬ ‫یرات‬‫ی‬‫تغیی‬ ‫یایت‬‫ی‬‫نه‬ ‫در‬ ‫و‬ ‫یوند‬‫ی‬‫یمش‬‌‫ین‬ ‫داده‬ ‫یک‬ ‫ازدیاد‬ ‫به‬ ‫منجر‬ ‫چون‬ ‫شوند‬ ‫ذخیره‬view
‫یا‬ ‫شود‬ ‫ساخته‬ ‫باید‬ ‫جدید‬html… ‫کند‬ ‫ویرایش‬ ‫را‬ ‫موجود‬ ‫ها‬
‫یی‬‫ی‬‫طراح‬ ‫یای‬‫ی‬‫الگوه‬ ‫بخش‬ ‫در‬ ‫هم‬ ‫تر‬ ‫قبل‬controller‫ین‬‫ی‬‫بی‬ ‫یب‬‫ی‬‫چس‬ ‫یوان‬‫ی‬‫عن‬ ‫یه‬‫ی‬‫ب‬ ‫را‬ ‫یا‬‫ی‬‫ه‬model‫و‬view‫معرفیی‬
.‫کردیم‬
‫یک‬ ‫چگونه‬controller‫یت‬‫ی‬‫حقیق‬ ‫در‬ ‫یود؟‬‫ی‬‫ش‬ ‫ی‬‫ی‬‫یم‬ ‫هسازی‬‌‫ین‬ ‫پیاد‬controller‫ییک‬ ‫از‬ ‫یر‬‫ی‬‫فرات‬ ‫چییزی‬ ‫یا‬‫ی‬‫ه‬function
‫یعن‬ .‫شوند‬ ‫اجرا‬ ‫نظر‬ ‫مورد‬ ‫زمان‬ ‫در‬ ‫باید‬ ‫که‬ ‫نیستند‬map‫کردند‬change state‫و‬ ‫ها‬event‫یک‬‫ی‬‫ی‬ ‫یه‬‫ی‬‫ب‬ ‫یا‬‫ی‬‫ه‬
controller.‫کند‬ ‫یم‬ ‫اش‬ ‫هسازی‬‌‫ین‬ ‫پیاد‬ ‫های‬‌‫ین‬ ‫گون‬ ‫به‬ ‫کس‬ ‫هر‬ ‫که‬ ‫است‬ ‫بحث‬
Routing
‫یر‬‫ی‬‫تغیی‬ ‫یل‬‫ی‬‫عوام‬ ‫مهمترین‬ ‫از‬ ‫یک‬state‫برنیامه‬ ‫یک‬‫ی‬‫ی‬routing‫یای‬‫ی‬‫سه‬‌‫ین‬ ‫آدر‬ ‫یال‬‫ی‬‫مث‬ ‫یور‬‫ی‬‫ط‬ ‫یه‬‫ی‬‫ب‬ .‫یت‬‫ی‬‫اس‬twitter‫را‬
‫است‬ ‫صورت‬ ‫این‬ ‫به‬ ‫هاید‬‌‫ین‬ ‫دید‬
http://twitter.com/#!/efazati
‫که‬ ‫قسمت‬ ‫که‬ ‫است‬ ‫قرار‬ ‫و‬ ‫مشود‬‌‫ین‬ ‫ن‬ ‫فرستاده‬ ‫سرور‬ ‫به‬ (#) ‫شارپ‬ ‫از‬ ‫بعد‬ ‫هرچیزی‬ ‫کل‬ID‫این‬ ‫برابر‬ ‫ی‬
‫یر‬‫تغییی‬ ‫با‬ ‫که‬ ‫دارد‬ ‫وجود‬ ‫این‬ ‫کنترل‬ ‫برای‬ ‫زیادی‬ ‫ههای‬‌‫ین‬ ‫برنام‬ .‫دهد‬ ‫نشان‬ ‫صفحه‬ ‫راس‬ ‫در‬ ‫را‬ ‫دارد‬ ‫صفحه‬ ‫در‬
url call‫یمتوانند‬‌‫ین‬ ‫و‬ ‫یمشوند‬‌‫ین‬transaction‫را‬ ‫هاش‬‌‫ین‬ ‫مربوط‬call‫کنند‬
‫در‬ ‫یورد‬‫می‬ ‫ین‬‫ایی‬browser‫یادی‬‫زیی‬ ‫یای‬‫هی‬compatible‫یم‬‫هی‬ ‫یر‬‫تی‬ ‫یدیم‬‫قی‬ ‫یای‬‫هی‬ ‫ر‬‫مرورگی‬ ‫یرای‬‫بی‬ ‫ی‬‫ولی‬ ‫یت‬‫هسی‬
:‫مثل‬ ‫است‬ ‫موجود‬ ‫ههای‬‌‫ین‬ ‫کتابخان‬
• Ben Alman » jQuery hashchange event -> http://benalman.com/projects/jquery-
hashchange-plugin/
‫صفحه‬‫هجده‬Scalable JavaScript Application By Efazati

19. backbone.js routing
‫در‬backbone‫با‬extend‫از‬router‫همانند‬event‫سری‬ ‫یک‬ ‫یمشود‬‌‫ین‬rule.‫کرد‬ ‫تعریف‬ ‫جدید‬Transaction
‫در‬ ‫را‬ ‫اصل‬ ‫کار‬ ‫یا‬ ‫شود‬ ‫تعریف‬ ‫داخل‬ ‫صورت‬ ‫به‬ ‫یمتواند‬‌‫ین‬ ‫هم‬ ‫ها‬controller.‫کنند‬ ‫تعریف‬
var Workspace = Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},
help: function() {
...
},
search: function(query, page) {
...
}
});
‫در‬ ‫که‬ ‫همانطور‬code‫یک‬ ‫با‬ ‫یمشود‬‌‫ین‬ ‫دیده‬ ‫هم‬regex‫و‬ ‫یود‬‫ی‬‫یمش‬‌‫ین‬ ‫بررسی‬ ‫یا‬‫ی‬‫ته‬‌‫ین‬ ‫حال‬ ‫یه‬‫ی‬‫هم‬ ‫آدرس‬ ‫تغییر‬ ‫با‬
query‫به‬ ‫هم‬transaction function.‫شود‬ ‫یم‬ ‫داده‬
‫به‬ ‫را‬ ‫محتوی‬ ‫بقیه‬ ‫کل‬ ‫هم‬ * ‫از‬ ‫استفاده‬ ‫با‬ ‫یمتوانید‬‌‫ین‬ ‫شما‬transaction function‫یال‬‫ی‬‫مث‬ ‫یور‬‫ی‬‫ط‬ ‫یه‬‫ی‬‫ب‬ .‫ید‬‫ی‬‫بدهی‬
.‫بگیرید‬ ‫آرگومان‬ ‫عنوان‬ ‫به‬ ‫را‬ ‫فایل‬ ‫آدرس‬ ‫یمخواهید‬‌‫ین‬
routes: {
"/download/*path": "downloadFile",
// <a href="http://example.com/#/download/user/images/hey.gif">Download</a>
},
‫صفحه‬‫نوزده‬Scalable JavaScript Application By Efazati

20. View and Templating
‫یورد‬‫ی‬‫م‬ ‫سه‬ ‫)هر‬ ‫طراحی‬ ‫الگوهای‬ ‫تهای‬‌‫ین‬ ‫قسم‬ ‫مهمترین‬ ‫از‬ ‫یک‬MVVM MVC MVP‫یمت‬‫ی‬‫قس‬ (View‫آن‬
.‫است‬
‫به‬ ‫تبدیل‬ ‫کجا‬ ‫است‬ ‫شده‬ ‫داده‬ ‫که‬ ‫های‬‌‫ین‬ ‫داد‬ ‫اینکه‬template‫شود؟‬ ‫یم‬
‫در‬ ‫باید‬ ‫صورت‬ ‫هر‬ ‫به‬container view‫به‬ ‫مربوط‬application‫خیل‬ ‫روش‬ .‫داد‬ ‫نشان‬ ‫را‬ ‫نظر‬ ‫مورد‬ ‫دیتای‬
‫کل‬ ‫که‬ ‫است‬ ‫این‬ ‫ساده‬html‫حقیقت‬ ‫در‬ .‫بگیرید‬ ‫سرور‬ ‫از‬ ‫را‬model‫یه‬‫ی‬‫ب‬ ‫ید‬‫ی‬‫باش‬ ‫یته‬‫ی‬‫داش‬ ‫قسمت‬ ‫یک‬ ‫شما‬
‫اسم‬raw html.‫شود‬ ‫منتقل‬ ‫باید‬ ‫دفعه‬ ‫هر‬ ‫زیادی‬ ‫بیهوده‬ ‫دیتای‬ ‫البته‬ ‫که‬ .‫دهید‬ ‫نمایش‬ ‫را‬ ‫آن‬ ‫دفعه‬ ‫هر‬ ‫و‬
‫که‬ ‫است‬ ‫این‬ ‫دوم‬ ‫روش‬html.‫کنید‬ ‫توجه‬ ‫مثال‬ ‫به‬ .‫بسازید‬ ‫را‬
$("#views").empty();
var container = $("<div />").attr({id: "user"});
var name = $("<span />").text(data.name);
$("#views").append(container.append(name));
‫راحت‬ ‫به‬html‫هر‬ ‫برای‬ ‫آیا‬ ‫ول‬ ‫یمشود‬‌‫ین‬ ‫ساخته‬html‫باید‬ ‫ی‬code‫یمت‬‫ی‬‫قس‬ ‫در‬ ‫کامل‬ ‫مربوطه‬javascript
‫تغییرات‬ ‫بیاید؟‬html‫قسمت‬ ‫نهایت‬ ‫در‬ ‫و‬ ‫است‬ ‫دشوار‬ ‫بسیار‬ ‫کار‬ ‫این‬javascript‫زیییادی‬ ‫بیهوده‬ ‫کد‬ ‫هم‬
.‫داشت‬ ‫خواهد‬
‫برنامه‬ ‫زیادی‬ ‫تعداد‬template rendering‫در‬javascript.‫هست‬
• olado/doT -> https://github.com/olado/doT
• jasonmoo/t.js -> https://github.com/jasonmoo/t.js
• flatiron/plates -> https://github.com/flatiron/plates
• List.js - Add search, sort and flexibility to plain HTML lists or tables with cross-browser
native JavaScript by @javve -> http://listjs.com/
• Tempo :: The tiny JSON rendering engine by TwigKit -> http://twigkit.github.com/tempo/
• honza/140medley -> https://github.com/honza/140medley
• John Resig - JavaScript Micro-Templating -> http://ejohn.org/blog/javascript-micro-
templating/
• deepsweet/microjungle -> https://github.com/deepsweet/microjungle
• pvande/Milk -> https://github.com/pvande/Milk
• {{ mustache }} -> http://mustache.github.com/
• mir.aculo.us JavaScript with Thomas Fuchs » Blog Archive » Little helpers: a tweet-sized
JavaScript templating engine -> http://mir.aculo.us/2011/03/09/little-helpers-a-tweet-sized-
javascript-templating-engine/
‫صفحه‬‫بیست‬Scalable JavaScript Application By Efazati

21. • hij1nx/weld -> https://github.com/hij1nx/weld
‫از‬ ‫استفاده‬ ‫با‬ ‫مثال‬ ‫طور‬ ‫به‬milk.‫سازیم‬ ‫یم‬ ‫قالب‬ ‫یک‬
Milk.escape('<tag type="evil">'); // => '&lt;tag type=&quot;evil&quot;&gt;'
Milk.escape = function(str) { return str.split("").reverse().join("") };
// Milk.escape is used to handle all escaped tags
var template = "{{data}} is {{{data}}}";
Milk.render(template, { "data": "reversed" }); // => "desrever is reversed"
‫یمبینیم‬‌‫ین‬ ‫مثال‬ ‫در‬ ‫که‬ ‫همانطور‬Template‫با‬ ‫را‬Date‫مربیوطه‬Render‫مثیل‬ ‫کارهیای‬ ‫و‬ .‫یم‬‫ی‬‫میکنی‬escape,
helper, partial template.‫دهد‬ ‫یم‬ ‫انجام‬ ‫هم‬
Tag‫مثل‬ ‫هم‬ ‫قالب‬ ‫های‬mustache.‫باشد‬ ‫یم‬
‫حقیقت‬ ‫در‬Event‫از‬ ‫جزئ‬ ‫تونه‬ ‫یم‬ ‫هم‬view‫یه‬‫ی‬‫ک‬ ‫یت‬‫ی‬‫اس‬ ‫یتر‬‫ی‬‫به‬ ‫گفتم‬ ‫هم‬ ‫لتر‬‌‫ین‬ ‫قب‬ .‫باشد‬deligate‫روی‬ ‫یر‬‫ی‬‫ب‬
‫وقت‬ .‫باشد‬ ‫قالب‬ ‫کتر‬‌‫ین‬ ‫کوچ‬ ‫تهای‬‌‫ین‬ ‫قسم‬container‫به‬ ‫مربوط‬View‫بر‬ ‫که‬ ‫بهتر‬ ‫چه‬ ‫است‬ ‫مشخص‬ ‫شما‬
‫همان‬ ‫روی‬deligate‫یک‬ ‫به‬ ‫نهایت‬ ‫در‬ ‫و‬ ‫دهید‬ ‫انجام‬ ‫را‬action.‫برسید‬
‫هر‬ ‫که‬ ‫هست‬ ‫نیاز‬ ‫طرفی‬ ‫از‬view‫قابلیت‬render.‫باشد‬ ‫داشته‬ ‫مجدد‬Data‫یا‬‫بی‬ ‫و‬ ‫ید‬‫کنی‬ ‫تغییر‬ ‫است‬ ‫ممکن‬
‫باید‬ ‫تغییر‬ ‫هر‬render‫طریق‬ ‫)از‬ ‫شود‬ ‫انجام‬model(… ‫یا‬
backbone.js view
‫در‬backbone‫همه‬ ‫است‬ ‫نیاز‬ ‫که‬ ‫هست‬ ‫قسمت‬ ‫هم‬event‫ها‬bind… ‫و‬ ‫شود‬
var DocumentRow = Backbone.View.extend({
tagName: "li",
className: "document-row",
events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
},
‫صفحه‬‫یک‬ ‫و‬ ‫بیست‬Scalable JavaScript Application By Efazati

22. render: function() {
...
}
});
‫اسایم‬tagName‫و‬className‫و‬id‫آدرس‬ ‫حقیقت‬ ‫در‬RootElemnt‫در‬ ‫یمتیوان‬‌‫ین‬ ‫کیه‬ .‫هسیتند‬render‫از‬
.‫کرد‬ ‫استفاده‬ ‫آن‬
‫طرفی‬ ‫از‬event‫نوع‬ ‫اول‬ ‫که‬ ‫دارد‬ ‫قسمت‬ ‫دو‬ ‫هم‬event‫دوم‬ ‫و‬elementi‫آن‬ ‫روی‬ ‫بر‬ ‫که‬deligate‫یورت‬‫ی‬‫ص‬
‫یت‬‫ی‬‫حقیق‬ ‫در‬ ‫هیم‬ ‫یدام‬‫ی‬‫ک‬ ‫یر‬‫ی‬‫ه‬ ‫یروی‬‫ی‬‫روب‬ ‫مورد‬ .‫است‬ ‫یمگیرد‬‌‫ین‬this.title‫ییک‬ ‫مسیتقیما‬ ‫یود‬‫ی‬‫یمش‬‌‫ین‬ ‫کیه‬ ‫هسیت‬
function.‫باشد‬
‫برای‬render‫از‬ ‫شما‬ ‫مثل‬ ‫هم‬milk.‫داشت‬ ‫خواهید‬ ‫را‬ ‫کدی‬ ‫همچین‬ ‫یمکنید‬‌‫ین‬ ‫استفاده‬
Template = $(this.tagName)
Milk.render(template, this.data);
data‫طریق‬ ‫از‬ ‫هم‬Model.‫شود‬ ‫تأمین‬ ‫باید‬
‫صفحه‬‫دو‬ ‫و‬ ‫بیست‬Scalable JavaScript Application By Efazati

23. Dependency Management
‫زبان‬ ‫در‬javascript‫اسم‬ ‫به‬ ‫چیزی‬ ‫کل‬Dependency Management‫یت‬‫ی‬‫راح‬ ‫یه‬‫ی‬‫ب‬ ‫یما‬‫ی‬‫ش‬ ‫ی‬‫ی‬‫یعن‬ ‫یدارد‬‫ی‬‫ن‬ ‫وجود‬
‫بنویسید‬ ‫فایلتان‬ ‫بالی‬ ‫متوانید‬‌‫ین‬ ‫ن‬Import X‫از‬ ‫و‬X‫خود‬ ‫در‬ ‫ها‬ ‫نیاز‬ ‫همه‬ ‫که‬ ‫است‬ ‫قرار‬ ‫کل‬ .‫کنید‬ ‫استفاده‬
html‫با‬ ‫پایه‬load.‫شود‬ ‫انجام‬ ‫لها‬‌‫ین‬ ‫فای‬ ‫درست‬ ‫کردن‬
‫داشت‬ ‫خواهد‬ ‫های‬‌‫ین‬ ‫نتیج‬ ‫همچین‬ ‫کنید‬ ‫دقت‬ ‫چیز‬ ‫همه‬ ‫به‬ ‫هم‬ ‫درست‬ ‫اگر‬ ‫نهایت‬ ‫در‬
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.ui.js" type="text/javascript" charset="utf-8"></script>
<script src="application.utils.js" type="text/javascript" charset="utf-
8"></script>
<script src="application.js" type="text/javascript" charset="utf-8"></script>
<script src="models/asset.js" type="text/javascript" charset="utf-8"></script>
<script src="models/activity.js" type="text/javascript" charset="utf-
8"></script>
<script src="states/loading.js" type="text/javascript" charset="utf-8"></script>
...
‫بلکه‬ ‫نیست‬ ‫زیبا‬ ‫تنها‬ ‫نه‬ ‫که‬http overhead‫ی‬‫ی‬‫خیل‬ ‫یت‬‫ی‬‫درخواس‬ ‫یداد‬‫ی‬‫تع‬ ‫یما‬‫ی‬‫ش‬ ‫یعن‬ .‫داشت‬ ‫خواهد‬ ‫زیادی‬
‫یا‬‫نهی‬‌‫ین‬ ‫ای‬ ‫یه‬‫ی‬‫هم‬ ‫یت‬‫ی‬‫نیس‬ ‫یوم‬‫معلی‬ ‫ید‬‫ی‬‫یمزنی‬‌‫ین‬ ‫یرور‬‫سی‬ ‫یه‬‫ی‬‫ب‬ ‫یادی‬‫ی‬‫زی‬minify‫یتند؟‬‫ی‬‫هس‬ ‫یاز‬‫ی‬‫نی‬ ‫یان‬‫ی‬‫هش‬‌‫ین‬ ‫هم‬ ‫ید؟‬‫ی‬‫ان‬ ‫یده‬‫ی‬‫ش‬
Dependency Management.‫یمدهد‬‌‫ین‬ ‫خروجی‬ ‫فایل‬ ‫یک‬ ‫است‬ ‫شده‬ ‫استفاده‬ ‫که‬ ‫لهای‬‌‫ین‬ ‫فای‬ ‫نسبت‬ ‫به‬
CommonJS
‫یه‬‫ی‬‫اینک‬ ‫از‬ ‫ید‬‫ی‬‫بع‬javascript‫یل‬‫ی‬‫مث‬ ‫یای‬‫ی‬‫ه‬ ‫یزار‬‫ی‬‫اب‬ ‫در‬ ‫رفیت‬ ‫یرور‬‫ی‬‫س‬ ‫یمت‬‫ی‬‫س‬ ‫یه‬‫ی‬‫ب‬rhino‫و‬spiderMonkey‫یکل‬‫ی‬‫مش‬
Dependency Management‫در‬ ‫حت‬ .‫شد‬ ‫حل‬node‫اسم‬ ‫به‬ ‫ابزاری‬ ‫شما‬require‫یانه‬‫ی‬‫کتابخ‬ ‫یه‬‫ی‬‫ک‬ ‫داشت‬
‫را‬ ‫نظر‬ ‫مورد‬load.‫کرد‬ ‫یم‬
‫قضایا‬ ‫این‬ ‫از‬ ‫بعد‬Kevin Dangoor‫که‬ ‫نوشت‬ ‫بلگش‬ ‫از‬ ‫پست‬ ‫در‬javascript‫استاندارد‬ ‫راهی‬ ‫که‬ ‫دارد‬ ‫نیاز‬
‫برای‬load‫ههای‬‌‫ین‬ ‫کتابخان‬ ‫کردن‬javascript‫که‬ ‫بود‬ ‫اینگونه‬ .‫باشد‬ ‫داشته‬CommonJs.‫شد‬ ‫متولد‬
‫فایل‬ ‫یک‬ ‫یمتوانید‬‌‫ین‬ ‫راحت‬ ‫به‬ ‫شما‬javascript‫را‬declare‫نظرش‬ ‫مورد‬ ‫زمان‬ ‫در‬ ‫و‬ ‫کنید‬require.‫کنید‬
// maths.js
exports.per = function(value, total) {
return( (value / total) * 100 );
};
// application.js
var Maths = require("./maths");
‫صفحه‬‫سه‬ ‫و‬ ‫بیست‬Scalable JavaScript Application By Efazati

24. assertEqual( Maths.per(50, 100), 50 );
‫نویس‬ ‫برنامه‬ ‫با‬ ‫این‬ ‫ارتباط‬ ‫یمپرسید‬‌‫ین‬ ‫خودتان‬ ‫از‬Client side‫یتاندارد‬‫ی‬‫اس‬ ‫یول‬‫ی‬‫اص‬ ‫یه‬‫ی‬‫اینک‬ ‫از‬ ‫بعد‬ ‫چیست؟‬
‫شد‬ ‫این‬ ‫برپایه‬ ‫چیز‬ ‫همه‬ ‫و‬ ‫شدند‬CommonJs‫یم‬‫ی‬‫اس‬ ‫یه‬‫ی‬‫ب‬ ‫یرد‬‫ی‬‫ک‬ ‫یافه‬‫ی‬‫اض‬ ‫را‬ ‫یمت‬‫ی‬‫قس‬Modules/Transport‫یا‬‫ی‬‫ب‬
‫هدف‬load‫کردن‬module‫صورت‬ ‫به‬async‫یمت‬‫ی‬‫س‬ ‫در‬ ‫و‬ ‫ید‬‫ی‬‫یمش‬‌‫ین‬ ‫یام‬‫ی‬‫انج‬client‫را‬ ‫یوارد‬‫ی‬‫م‬ ‫ین‬‫ی‬‫ای‬ ‫یه‬‫ی‬‫هم‬ ‫یم‬‫ی‬‫ه‬
.‫باشیم‬ ‫داشته‬
// maths.js
require.define("maths", function(require, exports){
exports.per = function(value, total) {
return( (value / total) * 100 );
};
});
// application.js
require.define("application", function(require, exports){
var per = require("./maths").per;
assertEqual( per(50, 100), 50 );
}), ["./maths"]); // List dependencies (maths.js)
‫مشکلت‬ ‫تمام‬ ‫اتفاق‬ ‫این‬ ‫با‬scope‫و‬namesapacing.‫یمشد‬‌‫ین‬ ‫حل‬ … ‫و‬
Module Loaders
‫سمت‬ ‫در‬ ‫استفاده‬ ‫برای‬client‫به‬ ‫نیاز‬Module Loaders.‫شد‬ ‫نوشته‬ ‫این‬ ‫برای‬ ‫های‬ ‫ابزار‬ ‫پس‬ ‫بود‬
Yabble
‫یمتوانید‬‌‫ین‬ ‫ساده‬ ‫خیل‬ ‫ابزار‬ ‫این‬ ‫با‬root‫را‬ ‫همه‬ ‫فها‬‌‫ین‬ ‫تعری‬ ‫نسبت‬ ‫به‬ ‫و‬ ‫کنید‬ ‫مشخص‬ ‫را‬ ‫اصل‬Load.‫کنید‬
<script src="https://github.com/jbrantly/yabble/raw/master/lib/yabble.js">
</script>
<script>
require.setModuleRoot("javascripts");
// We can use script tags if the modules
// are wrapped in the transport format
require.useScriptTags();
require.ensure(["application"], function(require) {
// Application is loaded
});
require.ensure(["application", "utils"], function(require) {
var utils = require("utils");
‫صفحه‬‫چهار‬ ‫و‬ ‫بیست‬Scalable JavaScript Application By Efazati

25. assertEqual( utils.per( 50, 200 ), 25 );
});
</script>
‫با‬require‫از‬Load.‫کنید‬ ‫کار‬ ‫ابزار‬ ‫آن‬ ‫با‬ ‫یمتواند‬‌‫ین‬ ‫و‬ ‫یمشوید‬‌‫ین‬ ‫مطمئن‬ ‫شدن‬
‫مثل‬ ‫دارد‬ ‫وجود‬ ‫چرخه‬ ‫این‬ ‫تکمیل‬ ‫برای‬ ‫هم‬ ‫دیگری‬ ‫موارد‬ ‫کل‬ ‫در‬
• sstephenson/sprockets Sprockets: Rack-based asset packaging ->
https://github.com/sstephenson/sprockets
• RequireJS -> http://requirejs.org/
• Pyramid js: A dependency manager to load/combine web development files ->
http://joel.inpointform.net/software-development/pyramid-js-a-web-dependency-manager/
• Ender - the no-library library. -> http://ender.no.de/
‫صفحه‬‫پنج‬ ‫و‬ ‫بیست‬Scalable JavaScript Application By Efazati

26. Real-Time Web
‫مافزار‬‌‫ین‬ ‫نر‬ ‫مهم‬ ‫ههای‬‌‫ین‬ ‫جنب‬ ‫از‬ ‫یک‬real-time‫کنیید‬ ‫تغییر‬ ‫است‬ ‫ممکن‬ ‫لحظه‬ ‫در‬ ‫چیز‬ ‫همه‬ .‫است‬ ‫قضیه‬ ‫بودن‬
‫و‬application js‫منتظر‬ ‫نباید‬refresh.‫باشد‬ ‫کاربر‬ ‫سمت‬ ‫از‬
‫با‬ ‫را‬ ‫مشکل‬ ‫این‬ ‫شما‬ ‫شاید‬pull request‫درصد‬ ‫چند‬ ‫درستیست؟‬ ‫راه‬ ‫این‬ ‫آیا‬ ‫ول‬ .‫کنید‬ ‫حل‬ ‫مداوم‬ ‫های‬
request‫است؟‬ ‫بیهوده‬ ‫شما‬ ‫های‬
‫یورت‬‫ی‬‫ص‬ ‫یر‬‫ی‬‫تغیی‬ ‫یه‬‫ی‬‫ک‬ ‫ید‬‫ی‬‫بگوی‬ ‫کاربر‬ ‫سمت‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫به‬ ‫سرور‬ ‫تغییر‬ ‫هنگام‬ ‫که‬ ‫است‬ ‫این‬ ‫تر‬ ‫درست‬ ‫حل‬ ‫راه‬
‫گرفته‬request.‫بگوید‬ ‫را‬ ‫تغییرات‬ ‫واقعا‬ ‫اینکه‬ ‫یا‬ ‫بزن‬
‫یک‬‫ی‬‫کوچ‬ ‫یدر‬‫ی‬‫اینق‬ ‫یا‬‫ی‬‫ه‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫بعض‬ ‫نیستند‬ ‫مهم‬ ‫اصل‬ ‫دیتاها‬ ‫بعض‬ .‫نیست‬ ‫کار‬ ‫این‬ ‫به‬ ‫نیاز‬ ‫جا‬ ‫همه‬ ‫البته‬
‫شما‬ ‫که‬ ‫دارند‬ ‫کم‬ ‫بازدید‬ ‫و‬ ‫هستند‬request‫کیه‬ ‫جیای‬ ‫نسیبت‬ ‫به‬ ‫باید‬ ‫کل‬ ‫در‬ .‫است‬ ‫بهتر‬ ‫بزنید‬ ‫بیهوده‬
.‫کنید‬ ‫نگاه‬ ‫قضیه‬ ‫این‬ ‫به‬ ‫بگیرد‬ ‫صورت‬ ‫کار‬ ‫است‬ ‫قرار‬
WebSockets
‫طریق‬ ‫از‬ ‫یمتوانید‬‌‫ین‬ ‫شما‬WebSockets‫اصل‬ ‫مشکل‬ ‫اما‬ ‫باشید‬ ‫داشته‬ ‫وطرفه‬‌‫ین‬ ‫د‬ ‫ارتباط‬WebSockets‫اییین‬
‫به‬ ‫مربوط‬ ‫که‬ ‫است‬html5.‫کنند‬ ‫یم‬ ‫پشتیبان‬ ‫زیر‬ ‫مرورگرهای‬ ‫یعن‬ .‫است‬
• Chrome >= 4
• Safari >= 5
• iOS >= 4.2
• Firefox >= 4
• IE >= 9
• Opera >= 11
‫خوبیست‬ ‫انتخاب‬ .‫نیست‬ ‫مهم‬ ‫قدیم‬ ‫های‬ ‫مرورگر‬ ‫از‬ ‫پشتیبان‬ ‫شما‬ ‫برای‬ ‫اگر‬ ‫ول‬
var socket = new WebSocket("ws://example.com");
// Then, we can add some event listeners to the socket:
// The connection has connected
socket.onopen = function(){ /* ... */ }
// The connection has some new data
socket.onmessage = function(data){ /* ... */ }
// The connection has closed
socket.onclose = function(){ /* ... */ }
‫بدهید‬ ‫جواب‬ ‫یمتوانید‬‌‫ین‬ ‫زبانتان‬ ‫نسبت‬ ‫به‬ ‫هم‬ ‫سرور‬ ‫سمت‬ ‫در‬
• nicokaiser/php-websocket -> https://github.com/nicokaiser/php-websocket
• rlotun/txWebSocket -> https://github.com/rlotun/txWebSocket
• miksago/node-websocket-server -> https://github.com/miksago/node-websocket-server
‫صفحه‬‫شش‬ ‫و‬ ‫بیست‬Scalable JavaScript Application By Efazati

27. • Socket.IO: the cross-browser WebSocket for realtime apps. -> http://socket.io/
Socket.io
‫از‬ ‫استفاده‬ ‫با‬socket.io‫کتابخیانه‬ ‫از‬ ‫اسیتفاده‬ ‫یا‬‫ی‬‫ب‬ ‫و‬ ‫ید‬‫ی‬‫دهی‬ ‫یام‬‫ی‬‫انج‬ ‫را‬ ‫کیار‬ ‫ایین‬ ‫ید‬‫ی‬‫یمتوانی‬‌‫ین‬ ‫یر‬‫ی‬‫تت‬‌‫ین‬ ‫راح‬ ‫خیلی‬
javascript.‫کنند‬ ‫یم‬ ‫پشتیبان‬ ‫ها‬ ‫مرورگر‬ ‫اکثر‬ ‫هم‬
.‫ببینید‬ ‫را‬ ‫نمونه‬ ‫کد‬
‫سرور‬ ‫سمت‬ ‫کد‬
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
‫کاربر‬ ‫سمت‬ ‫کد‬
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
‫صفحه‬‫هفت‬ ‫و‬ ‫بیست‬Scalable JavaScript Application By Efazati

28. Testing and Debugging
‫فاز‬ ‫طراحی‬ ‫تهای‬‌‫ین‬ ‫قسم‬ ‫مهمترین‬ ‫از‬ ‫یک‬test‫و‬debug‫ت‬‫ی‬‫درسی‬ ‫جا‬ ‫همه‬ ‫در‬ ‫کد‬ ‫اصل‬ ‫روند‬ ‫اینکه‬ .‫است‬
‫از‬ ‫خیل‬ ‫البته‬ ‫اید؟‬ ‫نوشته‬ ‫درست‬ ‫کد‬ ‫منطقی‬ ‫کل‬ ‫اینکه‬ ‫شود؟‬ ‫یم‬ ‫اجرا‬javascript developer‫را‬ ‫اینکار‬ ‫ها‬
‫به‬ ‫خلصه‬ ‫را‬ ‫کار‬ ‫و‬ ‫مکنند‬‌‫ین‬ ‫ن‬console‫یار‬‫ی‬‫ک‬ ‫ین‬‫ی‬‫ای‬ ‫یه‬‫ی‬‫ب‬ ‫یا‬‫ی‬‫مطلق‬ ‫یود‬‫ی‬‫مش‬‌‫ین‬ ‫ن‬ ‫یت؟‬‫ی‬‫درستیس‬ ‫روش‬ ‫آیا‬ ‫ول‬ ‫یمکنند‬‌‫ین‬
‫ضروریست‬ ‫نکته‬ ‫چند‬ ‫گرفتن‬ ‫نظر‬ ‫در‬ ‫ول‬ ‫گرفت‬ ‫خرده‬
‫قابلیت‬ ‫که‬ ‫کدی‬test‫ین‬‫ی‬‫ممک‬ ‫یای‬‫ی‬‫ج‬ ‫یا‬‫ی‬‫ت‬ ‫یید‬‫ی‬‫باش‬ ‫یت‬‫ی‬‫تس‬ ‫قابل‬ ‫اینکه‬ ‫برای‬ .‫است‬ ‫متفاوت‬ ‫معمول‬ ‫کد‬ ‫با‬ ‫دارد‬
‫در‬ ‫جدید‬ ‫چیز‬ ‫نباید‬end method‫را‬ ‫شما‬ ‫که‬ ‫کس‬ ‫از‬ ‫را‬ ‫چیز‬ ‫همه‬ ‫و‬ ‫کنید‬ ‫استفاده‬ ‫ها‬call‫بگیرید‬ ‫هاید‬‌‫ین‬ ‫کرد‬
‫هنگام‬ ‫همین‬ ‫برای‬ ‫نیست‬ ‫اینگونه‬ ‫ها‬ ‫کد‬ ‫معمول‬ ‫ول‬debug‫یت‬‫ی‬‫اس‬ ‫یده‬‫ی‬‫ش‬ ‫یراب‬‫ی‬‫خ‬ ‫یا‬‫ی‬‫کج‬ ‫یار‬‫ی‬‫ک‬ ‫یه‬‫ی‬‫اینک‬ ‫کردن‬
.‫شود‬ ‫یم‬ ‫سختر‬
Unit Test
‫یی‬‫ی‬‫طراح‬ ‫یرای‬‫ی‬‫ب‬ ‫یادی‬‫ی‬‫زی‬ ‫ههای‬‌‫ین‬ ‫کتابخان‬unit test‫یا‬‫ی‬‫ب‬ ‫یما‬‫ی‬‫ش‬ .‫دارد‬ ‫یود‬‫ی‬‫وج‬mock‫یارجی‬‫ی‬‫خ‬ ‫تهای‬‌‫ین‬ ‫یم‬‫ی‬‫قس‬ ‫یردن‬‫ی‬‫ک‬
‫یک‬ ‫فقط‬ ‫یمتوانید‬‌‫ین‬function‫در‬ ‫باشید‬ ‫نداشته‬ ‫زیادی‬ ‫انتظارات‬ ‫اگر‬ ‫البته‬ .‫کنید‬ ‫تست‬ ‫را‬level‫خیل‬ ‫های‬
‫بسازید‬ ‫سیستم‬ ‫یک‬ ‫خودتان‬ ‫یمتوانید‬‌‫ین‬ ‫ساده‬
Assertions
‫دارد؟‬ ‫را‬ ‫نتیجه‬ ‫همین‬ ‫واقعا‬ ‫نوشتید‬ ‫که‬ ‫چیزی‬ ‫شوید‬ ‫مطمئن‬ ‫یمتوانید‬‌‫ین‬ ‫روش‬ ‫این‬ ‫با‬ ‫شما‬
var asset = function(value, msg) {
if ( !value )
throw(msg || (value + " does not equal true"));
};
‫ابزار‬ ‫یک‬ ‫راحت‬ ‫به‬assert‫یا‬‫ی‬‫ی‬ ‫است‬ ‫برابر‬ ‫چیز‬ ‫دو‬ ‫واقعا‬ ‫کنید‬ ‫چک‬ ‫یمتوانید‬‌‫ین‬ ‫این‬ ‫از‬ ‫استفاده‬ ‫با‬ ‫و‬ ‫ساختیم‬
‫دارد؟‬ ‫وجود‬
‫موجود‬ ‫های‬ ‫ابزار‬ ‫از‬ ‫های‬‌‫ین‬ ‫نمون‬
• QUnit -> http://qunitjs.com/
• WebReflection/wru -> https://github.com/WebReflection/wru
• madrobby/Evidence -> https://github.com/madrobby/evidence
• One-com/one-validation -> https://github.com/One-com/one-validation
• jasmine .js -> http://pivotal.github.com/jasmine/
• YUI 2: YUI Test -> http://developer.yahoo.com/yui/yuitest/
• Home — Scriptaculous Documentation -> http://madrobby.github.com/scriptaculous/
‫صفحه‬‫هشت‬ ‫و‬ ‫بیست‬Scalable JavaScript Application By Efazati

29. • FireUnit: Firebug Unit Testing for Firefox -> http://fireunit.org/
• js-test-driver - Remote javascript console - Google Project Hosting ->
http://code.google.com/p/js-test-driver/
• Sinon.JS - Versatile standalone test spies, stubs and mocks for JavaScript ->
http://sinonjs.org/
• Welcome! Buster.JS is... -> http://busterjs.org/
• jquery/testswarm -> https://github.com/jquery/testswarm/
‫مثل‬ ‫ها‬ ‫ابزار‬ ‫بیشتر‬ ‫کتابخانه‬ ‫این‬mock‫و‬assert.‫دارند‬ ‫را‬ … ‫و‬
‫کتابخانه‬ ‫در‬ ‫شما‬ ‫مثال‬ ‫طور‬ ‫به‬jasmine‫تونید‬ ‫یم‬ ‫اینگونه‬assert‫باشید‬ ‫داشته‬
describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});
Debuging
‫برای‬debug‫یر‬‫ی‬‫تت‬‌‫ین‬ ‫راح‬ ‫ید‬‫ی‬‫یمتوانی‬‌‫ین‬ ‫یا‬‫ی‬‫نه‬‌‫ین‬ ‫آ‬ ‫از‬ ‫یتفاده‬‫ی‬‫اس‬ ‫یا‬‫ی‬‫ب‬ ‫یما‬‫ی‬‫ش‬ ‫که‬ ‫دارد‬ ‫وجود‬ ‫مهم‬ ‫های‬ ‫ابزار‬ ‫هم‬debug
‫کنید‬
‫ها‬ ‫ابزار‬ ‫این‬ ‫مهمترین‬ ‫از‬ ‫یک‬firebug‫از‬ ‫استفاده‬ ‫با‬ ‫شما‬ .‫است‬console‫در‬ ‫که‬javascript‫یاز‬‫ی‬‫ب‬ ‫هنگام‬ ‫در‬
‫بودن‬firebug‫را‬ ‫چیز‬ ‫همه‬ ‫یمتوانید‬‌‫ین‬ ‫دارید‬log.‫کنید‬
.‫دارید‬ ‫را‬ ‫زیر‬ ‫دستورات‬ ‫شما‬
// show your code with variable
console.log("The %s jumped over %d tall buildings", animal, count);
console.warn("test")
console.info("test")
console.debug("test")
‫صفحه‬‫نه‬ ‫و‬ ‫بیست‬Scalable JavaScript Application By Efazati

30. console.error("test")
‫چون‬ ‫اعمال‬ ‫همچنین‬profiling‫ایجاد‬ ‫یا‬ … ‫و‬break point‫از‬ ‫استفاده‬ ‫همچنین‬ .‫دهید‬ ‫انجام‬ ‫یمتوانید‬‌‫ین‬ ‫را‬
console.‫ضروریست‬
‫از‬ ‫استفاده‬ ‫برای‬ ‫کل‬ ‫در‬firebug.‫باشید‬ ‫داشته‬ ‫تری‬ ‫مفید‬ ‫استفاده‬ ‫تا‬ ‫شود‬ ‫مطالعه‬ ‫باید‬ ‫راهنمایش‬ ‫حتما‬
‫مثل‬ ‫است‬ ‫مفید‬ ‫هم‬ ‫دیگر‬ ‫ابزارهای‬ ‫از‬ ‫استفاده‬
debug-js - The JavaScript debugger in JavaScript. - Google Project Hosting ->
http://code.google.com/p/debug-js/
‫صفحه‬‫س‬Scalable JavaScript Application By Efazati

31. CoffieScript
‫کوچک‬ ‫زبان‬CoffieScript‫یه‬‫ی‬‫ب‬ ‫یه‬‫ی‬‫ک‬ ‫یود‬‫ی‬‫نب‬ ‫یزرگ‬‫ی‬‫ب‬ ‫یدر‬‫ی‬‫اینق‬ ‫یورد‬‫ی‬‫م‬ ‫ین‬‫ی‬‫ای‬ ‫البته‬ .‫است‬ ‫شده‬ ‫مطرح‬ ‫بیشتر‬ ‫اخیرا‬
‫بود‬ ‫انصافی‬ ‫یب‬ ‫هم‬ ‫نبودش‬ ‫ول‬ ‫شود‬ ‫مطرح‬ ‫فصل‬ ‫یک‬ ‫عنوان‬
• CoffeeScript -> http://jashkenas.github.com/coffee-script/
‫به‬ ‫نهایت‬ ‫در‬ ‫حقیقت‬ ‫در‬ ‫زبان‬ ‫این‬javascript‫یا‬‫ی‬‫ب‬ ‫را‬ ‫یری‬‫ی‬‫ت‬ ‫کوتاه‬ ‫کد‬ ‫یمافتد‬‌‫ین‬ ‫که‬ ‫اتفاقی‬ ‫فقط‬ ‫یمشود‬‌‫ین‬ ‫تبدیل‬
‫رو‬ ‫یزی‬‫ی‬‫چی‬ ‫یر‬‫ی‬‫دیگ‬ ‫یما‬‫ی‬‫ش‬ ‫یال‬‫ی‬‫مث‬ ‫یور‬‫ی‬‫ط‬ ‫به‬ ‫بزنید‬ ‫باید‬ ‫زبان‬ ‫این‬declare‫یتفاده‬‫ی‬‫اس‬ ‫یولد‬‫ی‬‫آک‬ ‫از‬ ‫کل‬ ‫یا‬‫ی‬‫ی‬ ‫ید‬‫ی‬‫مکنی‬‌‫ین‬ ‫ن‬
‫با‬ ‫چیز‬ ‫همه‬ ‫و‬ ‫مکنید‬‌‫ین‬ ‫ن‬tab‫یمشود‬‌‫ین‬ ‫مشخص‬
# Assignment:
number = 42
opposite = true
# Conditions:
number = -42 if opposite
// result in js
if (opposite) {
number = -42;
}
# Functions:
square = (x) -> x * x
// result in js
square = function(x) {
return x * x;
};
# Arrays:
list = [1, 2, 3, 4, 5]
# Objects:
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x
# Splats:
race = (winner, runners...) ->
‫صفحه‬‫یک‬ ‫و‬ ‫س‬Scalable JavaScript Application By Efazati

32. print winner, runners
# Existence:
alert "I knew it!" if elvis?
# Array comprehensions:
cubes = (math.cube num for num in list)
‫ی‬‫ی‬‫خیل‬ ‫نیتیجه‬ ‫در‬ ‫و‬ ‫یود‬‫ی‬‫یمش‬‌‫ین‬ ‫هتر‬‌‫ین‬ ‫سیاد‬ ‫ی‬‫ی‬‫خیل‬ ‫یز‬‫ی‬‫چی‬ ‫همیه‬ ‫کل‬ ‫یود‬‫ی‬‫یمش‬‌‫ین‬ ‫یاهده‬‫ی‬‫مش‬ ‫یا‬‫ی‬‫له‬‌‫ین‬ ‫مثا‬ ‫در‬ ‫که‬ ‫همانطور‬
‫بزنید‬ ‫و‬ ‫کد‬ ‫یمتوانید‬‌‫ین‬ ‫تتر‬‌‫ین‬ ‫راح‬
‫صورت‬ ‫به‬ ‫نهایت‬ ‫در‬ ‫که‬ ‫دارد‬ ‫وجود‬ ‫هم‬ ‫کلس‬ ‫مثل‬ ‫مواردی‬ ‫کل‬ ‫در‬function‫یمشود‬‌‫ین‬ ‫تعریف‬
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake extends Animal
move: ->
alert "Slithering..."
super 5
‫مشکل‬ ‫بزرگترین‬CoffeScript‫قسمت‬Debuging‫یده‬‫ی‬‫ش‬ ‫یی‬‫ی‬‫طراح‬ ‫یری‬‫ی‬‫دیگ‬ ‫یان‬‫ی‬‫زب‬ ‫به‬ ‫اصل‬ ‫کد‬ ‫چون‬ ‫است‬
‫دارد‬ ‫مشکل‬ ‫کدتان‬ ‫کجای‬ ‫بفهمید‬ ‫نتیجه‬ ‫کد‬ ‫از‬ ‫مجبورید‬ ‫شما‬ ‫و‬ ‫است‬
‫دارد‬ ‫قصد‬ ‫فایرفاکس‬ ‫البته‬ix
‫آینده‬ ‫در‬debugger‫یل‬‫ی‬‫مث‬ ‫یای‬‫ی‬‫ه‬ ‫یزار‬‫ی‬‫اب‬ ‫یم‬‫ی‬‫ه‬ ‫الن‬ .‫ید‬‫ی‬‫کن‬ ‫اضافه‬ ‫هم‬ ‫را‬ ‫زبان‬ ‫این‬
AceBug‫سختیست‬ ‫کار‬ ‫کل‬ ‫در‬ ‫ول‬ ‫هست‬
‫صفحه‬‫دو‬ ‫و‬ ‫س‬Scalable JavaScript Application By Efazati

33. Deploying
‫یمی‬ ‫گفتیه‬ ‫شود‬ ‫انجام‬ ‫باید‬ ‫سرور‬ ‫روی‬ ‫بر‬ ‫مناسب‬ ‫صورت‬ ‫به‬ ‫مافزار‬‌‫ین‬ ‫نر‬ ‫استقرار‬ ‫جهت‬ ‫که‬ ‫اعمال‬ ‫تمام‬ ‫به‬
.‫شود‬ ‫یم‬ … ‫و‬ ‫بیشتر‬ ‫سرعت‬ ‫باعث‬ ‫اعمال‬ ‫این‬ ‫انجام‬ ‫کیفیت‬ .‫شود‬
‫کاهش‬Http Request
‫تعداد‬ ‫که‬ ‫است‬ ‫لزم‬Http Request‫یورت‬‫ی‬‫ص‬ ‫یه‬‫ی‬‫ب‬ ‫یل‬‫ی‬‫فای‬ ‫یک‬ ‫در‬ ‫همه‬ ‫تصاویر‬ .‫یابد‬ ‫کاهش‬ ‫صفحه‬ ‫یک‬ ‫های‬
sprit. ‫بگیرند‬ ‫قرار‬Css‫یا‬‫ی‬‫له‬‌‫ین‬ ‫فای‬ ‫یام‬‫ی‬‫تم‬ ‫و‬ ‫شوند‬ ‫یک‬ ‫لها‬‌‫ین‬ ‫فای‬javascript‫ین‬‫ی‬‫ای‬ ‫یرای‬‫ی‬‫ب‬ ‫و‬ ‫ید‬‫ی‬‫مکنن‬‌‫ین‬ ‫ن‬ ‫یر‬‫ی‬‫تغیی‬ ‫یه‬‫ی‬‫ک‬
.‫شوند‬ ‫یک‬ ‫هستند‬ ‫صفحه‬
‫ممکن‬ ‫جای‬ ‫تا‬ ‫روش‬ ‫این‬ ‫در‬request.‫خورد‬ ‫یم‬ ‫سرور‬ ‫به‬ ‫کمتری‬
Caching
‫در‬HTTP 1.1‫برای‬ ‫نظر‬ ‫مورد‬ ‫زمان‬ ‫یمتوانید‬‌‫ین‬ ‫شما‬cache‫یت‬‫ی‬‫اس‬ ‫خوب‬ .‫کنید‬ ‫مشخص‬ ‫رو‬ ‫لها‬‌‫ین‬ ‫فای‬ ‫کردن‬
‫فایل‬ ‫برای‬ ‫زمان‬ ‫این‬ ‫که‬static‫شبیه‬css javascript image‫کرد‬ ‫باید‬ ‫دقت‬ .‫باشد‬ ‫ممکن‬ ‫حالت‬ ‫بیشتر‬ ‫در‬
‫دوباره‬ ‫را‬ ‫فایل‬ ‫این‬ ‫وقت‬ ‫هیچ‬ ‫دیگر‬ ‫سال‬ ‫یک‬ ‫تا‬ ‫مرورگر‬ ‫بگذارید‬ ‫سال‬ ‫یک‬ ‫را‬ ‫زمان‬ ‫این‬ ‫مثال‬ ‫طور‬ ‫به‬ ‫اگر‬
.‫بگوید‬ ‫کاربر‬ ‫اینکه‬ ‫مگر‬ ‫مگیرد‬‌‫ین‬ ‫ن‬
‫یل‬‫ی‬‫فای‬ ‫یم‬‫ی‬‫اس‬ ‫گرفیت‬ ‫صورت‬ ‫تغییر‬ ‫فایل‬ ‫در‬ ‫وقت‬ ‫هر‬ .‫است‬ ‫متغیر‬ ‫های‬ ‫نام‬ ‫از‬ ‫استفاده‬ ‫پیشنهادی‬ ‫حل‬ ‫راه‬
‫شود‬ ‫عوض‬
‫مثال‬ ‫طور‬ ‫به‬header.jpg‫به‬header.jpg?123‫از‬ ‫یتفاده‬‫ی‬‫اس‬ ‫یا‬‫ی‬‫ب‬ ‫زمان‬ ‫این‬ ‫تنظیم‬ ‫برای‬ ‫های‬ ‫ابزار‬ .‫کند‬ ‫تغییر‬
‫تغییرات‬SCM.‫دارد‬ ‫وجود‬
Minification
‫برای‬ ‫های‬ ‫ابزار‬ .‫شود‬ ‫حذف‬ ‫کد‬ ‫بین‬ ‫خال‬ ‫فضای‬ .‫شوند‬ ‫کوچک‬ ‫ممکن‬ ‫جای‬ ‫تا‬ ‫باید‬ ‫کدها‬Minfiy‫کییردن‬
‫های‬ ‫کد‬javascript‫و‬css‫دارد‬ ‫وجود‬
• Closure Compiler Service -> http://closure-compiler.appspot.com/home
• JS Minifier -> http://fmarcia.info/jsmin/test.html
• JSMIN, The JavaScript Minifier -> http://www.crockford.com/javascript/jsmin.html
• Minify JavaScript - Free JavaScript Compressor -> http://www.minifyjavascript.com/
• mishoo/UglifyJS -> https://github.com/mishoo/UglifyJS
• YUI Compressor -> http://developer.yahoo.com/yui/compressor/
• Javascript Compressor - compress code online for free -> http://javascriptcompressor.com/
• Minify Javascript Online / Online JavaScript Packer -> http://jscompress.com/
‫صفحه‬‫سه‬ ‫و‬ ‫س‬Scalable JavaScript Application By Efazati

34. • /packer/ -> http://dean.edwards.name/packer/
• CSS Compressor - Online code compressor for Cascading Style Sheets ->
http://www.csscompressor.com/
• CSS Compressor, Free CSS Compressor and CSS Compression Tool ->
http://www.minifycss.com/css-compressor/
‫از‬ ‫قبل‬ ‫بار‬ ‫هر‬ ‫یمتوانید‬‌‫ین‬ ‫شما‬deploy‫از‬ ‫ید‬‫ی‬‫بع‬ ‫یه‬‫ی‬‫ک‬ ‫یید‬‫ی‬‫باش‬ ‫داشته‬ ‫برنامه‬ ‫یک‬ ‫اینکه‬ ‫یا‬ ‫دهید‬ ‫انجام‬ ‫را‬ ‫اینکار‬
commit‫یک‬ ‫کل‬ ‫یا‬ ‫دهد‬ ‫انجام‬ ‫را‬ ‫کار‬ ‫این‬script automate… ‫و‬ ‫باشید‬ ‫داشته‬
GZip
‫یروژه‬‫ی‬‫پ‬ ‫یط‬‫ی‬‫توس‬ ‫یه‬‫ی‬‫ک‬ ‫یت‬‫ی‬‫سازیس‬ ‫یم‬‫ی‬‫حج‬ ‫کم‬ ‫روش‬ ‫بترین‬‌‫ین‬ ‫محبو‬GNU‫یه‬‫ی‬‫ب‬ ‫یرد‬‫ی‬‫لک‬‌‫ین‬ ‫عم‬ .‫یت‬‫ی‬‫اس‬ ‫یده‬‫ی‬‫ش‬ ‫یاخته‬‫ی‬‫س‬
‫خود‬ ‫درخواست‬ ‫در‬ ‫مرورگر‬ ‫که‬ ‫است‬ ‫نگونه‬‌‫ین‬ ‫ای‬Encoding‫یمکند‬‌‫ین‬ ‫قبول‬ ‫که‬ ‫های‬Gzip‫و‬ ‫ید‬‫ی‬‫یمگوی‬‌‫ین‬ ‫یم‬‫ی‬‫ه‬ ‫را‬
‫را‬ ‫نتیجه‬ ‫جواب‬ ‫در‬ (‫بودن‬ ‫فعال‬ ‫و‬ ‫پشتیبان‬ ‫صورت‬ ‫)در‬ ‫بسرور‬‌‫ین‬ ‫و‬ ‫نتیجه‬ ‫در‬Gzip‫یمدهد‬‌‫ین‬ ‫شده‬
Accept-Encoding: gzip, deflate
.‫شود‬ ‫یم‬ ‫داده‬ ‫نمایش‬ ‫یمشودو‬‌‫ین‬ ‫باز‬ ‫دوباره‬ ‫کاربر‬ ‫سمت‬ ‫در‬ ‫و‬
‫یالتر‬‫ی‬‫ب‬ ‫یال‬‫ی‬‫انتق‬ ‫یرعت‬‫ی‬‫س‬ ‫نتیجه‬ ‫در‬ ‫و‬ ‫یمشود‬‌‫ین‬ ‫کمتر‬ ‫کاربر‬ ‫و‬ ‫بسرور‬‌‫ین‬ ‫و‬ ‫بین‬ ‫شده‬ ‫منتقل‬ ‫حجم‬ ‫روش‬ ‫این‬ ‫در‬
.‫رود‬ ‫یم‬
CDN
‫مخفف‬ ‫کلمه‬ ‫این‬content delivery network‫ین‬‫ی‬‫کتری‬‌‫ین‬ ‫نزدی‬ ‫از‬ ‫محتوی‬ ‫انتقال‬ ‫وظیفه‬ ‫که‬ ‫ای‬ ‫شبکه‬ .‫هست‬
‫روش‬ ‫ین‬‫ی‬‫ای‬ ‫یه‬‫ی‬‫ک‬ ‫گفت‬ ‫تحقیقاتش‬ ‫در‬ ‫و‬ ‫کرد‬ ‫معرفی‬ ‫را‬ ‫روش‬ ‫این‬ ‫بار‬ ‫اولین‬ ‫یاهو‬ .‫دارد‬ ‫عهده‬ ‫به‬ ‫را‬ ‫سرور‬۲۰
.‫کند‬ ‫یم‬ ‫بیشتر‬ ‫را‬ ‫انتقال‬ ‫سرعت‬ ‫درصد‬
‫صورت‬ ‫به‬ ‫لها‬‌‫ین‬ ‫فای‬ ‫است‬ ‫خوب‬CDN.‫شود‬ ‫داده‬ ‫ارایه‬
‫مثل‬ ‫عمویم‬ ‫ههای‬‌‫ین‬ ‫کتابخان‬ ‫برای‬ ‫همچنین‬JQuery‫از‬ ‫است‬ ‫خوب‬CDN‫یتفاده‬‫ی‬‫اس‬ ‫گوگل‬ ‫مثل‬ ‫معروف‬ ‫های‬
‫این‬ ‫از‬ ‫تها‬‌‫ین‬ ‫سای‬ ‫از‬ ‫زیادی‬ ‫تعداد‬ ‫چون‬ .‫شود‬CDN‫بیالی‬ ‫سیرعت‬ ‫هیم‬ ‫نیتیجه‬ ‫در‬ ‫و‬ ‫یمکننید‬‌‫ین‬ ‫استفاده‬ ‫ها‬
‫هم‬ ‫دارند‬Caching.‫دارند‬ ‫سرور‬ ‫دنیا‬ ‫بیشتر‬ ‫در‬ ‫هم‬ ‫و‬ ‫دارند‬ ‫مناسب‬
‫از‬ ‫یمتوانید‬‌‫ین‬ ‫هم‬ ‫عمویم‬ ‫های‬ ‫کد‬ ‫برای‬Free CDN‫از‬ ‫استفاده‬ ‫مثال‬ ‫طور‬ ‫به‬ .‫کنید‬ ‫استفاده‬ ‫ها‬Github‫یا‬
cloudflare.‫است‬ ‫کار‬ ‫این‬ ‫برای‬ ‫مناسب‬ ‫های‬ ‫گزینه‬
‫بررس‬
‫و‬ ‫تست‬ ‫آنلین‬ ‫های‬ ‫ابزار‬ ‫با‬ ‫که‬ ‫است‬ ‫خوب‬ ‫کل‬ ‫در‬Auditors‫نظیر‬ySlow‫ببینییید‬ ‫و‬ ‫کنید‬ ‫تست‬ ‫را‬ ‫سایت‬
‫دهند‬ ‫یم‬ ‫سرعت‬ ‫بهبود‬ ‫جهت‬ ‫خویب‬ ‫توضیحات‬ ‫هم‬ ‫ها‬ ‫ابزار‬ ‫این‬ ‫معمول‬ ‫ندارد؟‬ ‫خاص‬ ‫مشکل‬ ‫که‬
‫صفحه‬‫چهار‬ ‫و‬ ‫س‬Scalable JavaScript Application By Efazati

35. Rich Application Framework
‫سایت‬ ‫یک‬ ‫طراحی‬ ‫برای‬ ‫بود‬ … ‫و‬ ‫ابزار‬ ‫سری‬ ‫یک‬ ‫شد‬ ‫داده‬ ‫مقاله‬ ‫این‬ ‫در‬ ‫که‬ ‫توضیحات‬ ‫تمام‬Scalable.
.‫است‬ ‫شده‬ ‫نوشته‬ ‫اینکار‬ ‫برای‬ ‫زیادی‬ ‫های‬ ‫ابزار‬ ‫و‬ ‫نیست‬ ‫جدیدی‬ ‫مساله‬ ‫این‬ ‫کل‬ ‫در‬
‫ها‬ ‫ابزار‬ ‫این‬ ‫از‬ ‫ههای‬‌‫ین‬ ‫نمون‬
• Backbone.js -> http://backbonejs.org/
• JavaScriptMVC -> http://javascriptmvc.com/
• SproutCore -> http://sproutcore.com/
• Agility.js Javascript MVC library -> http://agilityjs.com/
• Build Awesome Javascript MVC Applications - Spine -> http://spinejs.com/
• Ember.js - About -> http://emberjs.com/
• Cappuccino Web Framework - Build Desktop Class Applications in Objective-J and
JavaScript -> http://cappuccino.org/
• Luna, our in-house framework for writing great web apps - Asana -> http://asana.com/luna/
• Knockout : Home -> http://knockoutjs.com/
• Web Application Development with Sencha Ext JS Framework | Sencha Ext JS | Products |
Sencha -> http://www.sencha.com/products/extjs/
• batman.js — overview -> http://batmanjs.org/
• AngularJS — Superheroic JavaScript MVW Framework -> http://angularjs.org/
‫با‬ ‫پیشتر‬backbone.js‫ایین‬ ‫میوارد‬ ‫یثر‬‫ی‬‫اک‬ ‫که‬ ‫هستند‬ ‫ابزاری‬ ‫نها‬‌‫ین‬ ‫ای‬ .‫شدید‬ ‫آشنا‬ ‫نمونه‬ ‫عنوان‬ ‫به‬ ‫ها‬ ‫کد‬ ‫در‬
‫مثال‬ ‫طور‬ ‫به‬ ‫دارند‬ ‫را‬ ‫مقاله‬knockout.js‫یک‬ ‫عنوان‬ ‫به‬MVVM‫و‬ ‫دارد‬ ‫یبیهی‬‫ی‬‫ش‬ ‫یای‬‫ی‬‫ته‬‌‫ین‬ ‫قابلی‬ ‫و‬ ‫شد‬ ‫مطرح‬
‫آن‬ ‫تغییر‬ ‫اش‬ ‫برتری‬ ‫مهمترین‬Data‫شدن‬ ‫عوض‬ ‫با‬Model.‫است‬
‫یا‬spine‫نویس‬ ‫باز‬ ‫حقیقت‬ ‫در‬backbonejs‫با‬caffescript‫یول‬‫ی‬‫معم‬ ‫ی‬‫ی‬‫ول‬ ‫دارد‬ ‫یم‬‫ی‬‫ه‬ ‫ی‬‫ی‬‫تغییرات‬ ‫یه‬‫ی‬‫البت‬ .‫است‬
‫با‬ ‫که‬ ‫کسان‬coffescript‫انتخاب‬ ‫جای‬ ‫به‬ ‫یمکنند‬‌‫ین‬ ‫کار‬backbone.‫کنند‬ ‫یم‬ ‫استفاده‬ ‫مورد‬ ‫این‬ ‫از‬
.‫یمشود‬‌‫ین‬ ‫انتخاب‬ ‫موارد‬ ‫از‬ ‫یک‬ … ‫و‬ ‫نیاز‬ ‫به‬ ‫بنا‬ ‫معمول‬
‫صفحه‬‫پنج‬ ‫و‬ ‫س‬Scalable JavaScript Application By Efazati

36. i Patterns For Large-Scale JavaScript Application Architecture ->
http://addyosmani.com/largescalejavascript/
ii Architectural pattern - Wikipedia, the free encyclopedia ->
http://en.wikipedia.org/wiki/Architectural_pattern
iii MVC-Diagram.gif (GIF Image, 440 × 347 pixels) -> http://www.beansoftware.com/ASP.NET-
Tutorials/Images/MVC-Diagram.gif
iv MVVM vs MVP vs MVC: The differences explained -> http://joel.inpointform.net/software-
development/mvvm-vs-mvp-vs-mvc-the-differences-explained/
v The ViewModel Pattern - David Hill's WebLog - Site Home - MSDN Blogs ->
http://blogs.msdn.com/b/dphill/archive/2009/01/31/the-viewmodel-pattern.aspx
vi MVVM Compared To MVC and MVP ->
http://geekswithblogs.net/dlussier/archive/2009/11/21/136454.aspx
vii MVC is dead, it's time to MOVE on. -> http://cirw.in/blog/time-to-move-on
viii 3 ways to define a JavaScript class / Stoyan's phpied.com -> http://www.phpied.com/3-ways-to-define-a-
javascript-class/
ix Mozilla, WebKit To Support Debugging Minified JS As Well As CoffeeScript and other JS Languages ->
http://www.infoq.com/news/2011/08/debug-languages-on-javascript-vm
10.Amazon.com: JavaScript Web Applications (9781449303518): Alex MacCaw: Books ->
http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X/ref=sr_1_7?
ie=UTF8&qid=1345810683&sr=8-7&keywords=web+rich+application
11.Amazon.com: JavaScript Patterns (9780596806750): Stoyan Stefanov: Books ->
http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752/ref=sr_1_2?
ie=UTF8&qid=1345810701&sr=8-2&keywords=javascript+design+pattern
12.Ben Alman » jQuery hashchange event -> http://benalman.com/projects/jquery-hashchange-plugin/
13.‫خروجی‬ :: ‫افاضات‬ ‫محمد‬ firebug ‫کنید‬ ‫رنگ‬ ‫را‬ -> http://blog.efazati.org/post/%D8%AE
%D8%B1%D9%88%D8%AC%DB%8C-firebug-%D8%B1%D8%A7-%D8%B1%D9%86%DA%AF%DB
%8C-%DA%A9%D9%86%DB%8C%D8%AF
14.Github as a CDN | Lance Pollard -> http://code.lancepollard.com/github-as-a-cdn/
15.CoffeeScript -> http://jashkenas.github.com/coffee-script/
16.Why a JavaScript hater thinks everyone needs to learn JavaScript in the next year - O'Reilly Radar ->
http://radar.oreilly.com/2011/06/time-to-learn-javascript.html
17.Learning JavaScript Design Patterns -> http://addyosmani.com/resources/essentialjsdesignpatterns/book/
18.Dynamics of JavaScript -> http://sss.cs.purdue.edu/projects/dynjs/