[Powered by Google Translate] [سمینار ها] [جاوا اسکریپت چارچوب: چرا و چگونه؟] [کوین Schmid در] [دانشگاه هاروارد] [این CS50 است.] و [CS50.TV،] 

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

قبل از من انجام این کار، من یک پس زمینه کمی در جاوا اسکریپت ارائه، و پس از آن خواهیم آن را از وجود دارد. ما قصد داریم تا با اجرای یک لیست TO-DO است. در اینجا لیست کار ما برای امروز است. این نوع خنده دار است. ما به پیاده سازی یک لیست در جاوا اسکریپت به انجام. این همان چیزی است که آن را به مانند نگاه، به طوری که اولین هدف ما است. ما قصد داریم به استفاده از یک چارچوب برای انجام این کار. ما قصد داریم به کدهای جاوا اسکریپت و دریافت لیست به انجام کار. سپس ما قصد داریم برای بهبود طراحی بدون استفاده از چارچوب است. ما قصد داریم به بحث در مورد چیزهای مختلف ما می توانیم با فقط جاوا اسکریپت به تنهایی انجام دهید را به فهرست کارهای کمی بیشتر به خوبی طراحی شده است. سپس ما قصد داریم به پرتاب در برخی از jQuery، و پس از آن ما قصد داریم در همان نگاه کنید به فهرست کارهای روزانه، فقط در چارچوب های مختلف اجرا شده است و به بررسی  جوانب مثبت و منفی در طول راه. 

بیایید شروع پیاده سازی است که به فهرست کارهای روزانه. بیایید می گویند ما این HTML داده شده است. من قصد دارم به این کمی کوچکتر است. همانطور که می بینید، من یک ضربه سر کوچک است که می گوید TODO و یک جعبه کوچک که در آن من می توانم شرح TODO را وارد کنید و سپس دکمه آیتم جدید، پس بیایید سعی کنید را وارد کنید یک TODO جدید به این لیست است. به چارچوبهای سمینار جاوا اسکریپت، و من به آمار آیتم جدید. من این هشدار جاوا اسکریپت را که می گوید اجرای من. ما باید به پیاده سازی آن. بیایید چک کردن این کد، HTML و JavaScript در مرورگر شما هر دو. HTML ما است. همانطور که شما در اینجا می توانید ببینید، در اینجا، هدر کمی Todos ما است. این چیزی که جسورانه در بالا بود، و پس از آن ما باید به جعبه ورودی با حفره یا سوراخ، و پس از آن یک ویژگی خاصی از این دکمه که خواستار این تابع addTodo وجود دارد. آیا کسی می خواهم به حدس زدن آنچه که در کلیک دلالت است؟ [پاسخ دانشجویی نامفهوم] خوب، بر روی کلیک نوعی مانند یک رویداد. مانند کلیک ماوس فقط یک رویداد، و آنچه ما انجام می دهیم این است این است که ما در حال به تساوی صورت کلیک بر روی این دکمه برای اجرای آن تابع است. AddTodo این event handler برای کلیک کردن بر روی این دکمه می باشد. 

همانطور که می بینید، هنگامی که با کلیک بر روی دکمه آیتم جدید رویداد کلیک بر روی اخراج می شود، و این تابع می شود نامیده می شود. اجازه دهید در تابع نگاه کنید. همانطور که می بینید، در اینجا کد های جاوا اسکریپت من تا کنون است. ساختار داده های جهانی برای به فهرست کارهای من چیزی که من در بالا است. آن را مانند یک آرایه به نظر می رسد. این یک آرایه خالی است. و پس من باید تابع addTodo که ما قبلا دیدم، و تنها خط کد در آن وجود دارد این هشدار است. این هشدار اجرای من، و پس از آن من 2 وظایف در دست است. من برای اضافه کردن TODO به آن ساختار داده های جهانی، و پس از آن من می خواهم را به منظور جلب لیست TO-DO است. هیچ چیز بیش از حد تصور است، اما جاوا اسکریپت شما ممکن است با آن آشنا نیستند، بنابراین من قصد دارم به رفتن آهسته و بررسی مبانی جاوا اسکریپت را در آن راه. 

اجازه دهید یک شوت زیبا به این. بیایید می گویند که کاربر وارد چیزی در این جعبه است. من فقط چیزی در اینجا، متن تایپ شده است. چگونه می توانم دسترسی به آن متن را از طریق جاوا اسکریپت مرتب کردن بر اساس من؟ به یاد داشته باشید که جاوا اسکریپت، یکی از ویژگی های اساسی آن این است که آن را به ما می دهد این دسترسی برنامه ریزی شده به DOM است. این به ما اجازه می دهد برای دسترسی به عناصر و خواص خود را از این HTML واقعی است. روشی که ما انجام است که با لخت استخوان جاوا اسکریپت ما در واقع می تواند استفاده از یک تابع در جاوا اسکریپت به نام getElementByID. من می خواهم برای ذخیره متن است که وجود دارد در برخی از متغیر تایپ، بنابراین من قصد دارم برای گفتن یک متغیر جدید به نام new_todo، و من قصد دارم برای به دست آوردن آن عنصر است. این یک تابع getElementByID است. و در حال حاضر من گرفتن یک عنصر ID، بنابراین من نیاز به ID که جعبه متن، بنابراین من آن را new_todo_description ID داده ام. که چگونه من قصد دارم برای به دست آوردن یک عنصر است. که استدلال من به این تابع، به مشخص که ID برای به دست آوردن. و به طوری که یک عنصر HTML است، و آن را دارای خواص. شما این را دیده ام. آنها ویژگی هستند. ویژگی عنصر متنی است که ورودی کاربر را ذخیره ارزش نامیده می شود. من در حال حاضر در این متغیر نام new_todo است را نجات داد ارزش که جعبه متن. در حال حاضر من دسترسی برنامه ریزی شده به این متغیر، که نوع خنک زیرا در حال حاضر آنچه که من می تواند انجام دهد این است من می توانید آن را به لیست کارهای من اضافه کنید. 

راه ما این کار را در انجام جاوا اسکریپت و نگران نباشید اگر شما با این ناآشنا هستید، اما فقط رفتن را از طریق آن todos.push است زیرا که نام ساختار داده های جهانی من در اینجا، و من قصد دارم به فشار new_todo. این فوق العاده است چون در حال حاضر من آن را به جاوا اسکریپت من نمایندگی که به فهرست کارهای روزانه. اما در حال حاضر چگونه می توانم آن را دریافت کنم به HTML؟ من برای پیدا کردن یک راه برای مرتب کردن بر اساس فشار آن را به عقب. به عبارت دیگر، من نوعی باید این را به منظور جلب. چه ما قصد داریم انجام دهیم این است که ما قصد داریم به منظور جلب لیست به انجام. من نیاز به به روز رسانی HTML دیگر در آن صفحه، و همانطور که می بینید، من این ظرف کوچک باقی مانده در اینجا، این تقسیم از صفحه که ID todos، و من قصد دارم برای قرار دادن لیست به انجام وجود دارد. در ابتدا من به رفتن به آن روشن است، زیرا، می گویند، به فهرست کارهای قدیمی وجود دارد. من گرفتن که عنصر ID دوباره، و من دسترسی به HTML درونی آن عنصر، و من قصد دارم به روشن است که. اگر ما این کد را به عنوان است، ما می خواهم هیچ چیز خالی وجود دارد، و در حال حاضر من می خواهم برای شروع ارائه جدید را به فهرست کارهای من. من اساسا رفتن به پاک کردن به فهرست کارهای من. 

حالا داخل HTML که todos دیو درونی کاملا روشن است، و در حال حاضر من نیاز به شروع به اضافه کردن لیست من. اولین چیزی که من می خواهم برای اضافه کردن برچسب لیست نامرتب است، که اساسا بیانگر گزینه ای است که پاسخ دادن که این آغاز یک لیست نامرتب. در حال حاضر برای هر عنصر آرایه todos من من می خواهم به نسخه قابل چاپ کردن آن در داخل از آن HTML. من می خواهم به آن الحاق به پایین به این لیست است. درست مانند در C، من می توانم یک حلقه for استفاده کنید، و من قصد دارم برای شروع در ابتدای لیست من در عنصر 0، و من قصد دارم به رفتن تمام راه را به طول لیست. ما در واقع می تواند طول آرایه در جاوا اسکریپت با استفاده از طول ملک را دریافت کنید. در واقع من قصد دارم برای انجام کاری بسیار مشابه در داخل از اینجا برای چاپ کردن آن عنصر است. من دوباره می توانید دسترسی DIV todos، اموال درونی HTML که، و من قصد دارم برای اضافه کردن این آیتم لیست جدید، و که رفتن به احاطه این تگ LI، و من قصد دارم به الحاق با استفاده از عملگر +، و که عنصر i ام آرایه todos من است، و سپس من قصد دارم به نزدیک که برچسب. در حال حاضر برای هر عنصر خواهیم یک ورودی لیست جدید اضافه کنید. و سپس همه ما واقعا نیاز به انجام است که تگ نزدیک کردن. من فقط نیاز به بستن که برچسب لیست نامرتب است. 

آیا احساس چگونه است که با این نسخهها کار می کنید؟ این لیست کامل باز می شود. این می افزاید: عناصر منحصر به فرد از لیست todos به لیست، و پس از آن که می بندد لیست کامل، و که این تابع addTodo من است. من اساسا با گرفتن TODO از جعبه متن آغاز خواهد شد. اضافه کنم که به آرایه todos، و سپس من دوباره ارائه لیست به انجام. در حال حاضر من می توانید آیتم به لیست اضافه کنید. این نوع از هیجان انگیز است زیرا فقط در چند خط کد ما اساسا ساخته شده ام یک لیست به انجام که در آن ما می توانید آیتم اضافه کنید. بزرگ است. این نوع مقدمه ای اساسی به جاوا اسکریپت است. بیش از حد نگران نباشید نحو در حال حاضر، اما فکر می کنم در مورد این مفهومی است. ما برخی HTML. ما یک جعبه متن در صفحه ای که کاربران اساسا مجاز به ورودی یک آیتم به انجام به اضافه کردن بود. و سپس ما با استفاده از جاوا اسکریپت برای واکشی که TODO از آن جعبه متن. ما ذخیره می شود که در داخل یک آرایه جاوا اسکریپت، است که اساسا مانند نمایش برنامه ریزی شده ما از آن به فهرست کارهای روزانه، و سپس ما آن را چاپ کرد. این todos.js است. 

این نوع سرد است، اما چگونه می توان از این بیشتر؟ خب، همانطور که می بینید، این مثل این است که کامل به فهرست کارهای روزانه نیست. به عنوان مثال، می توانید هر یک از این اقلام به عنوان ناقص علامت نیست، می خواهم اگر من می خواستم به reprioritize آیتم یا آیتم های حذف. این خوب است، اما ما می توانیم این را بیشتر. من قصد ندارم به صحبت کردن بیش از حد در مورد اضافه کردن خصوصیات اضافی، اما ما می تواند آن را بیشتر کنند. اجازه دهید بحث در مورد اضافه کردن یکی از ویژگی های دیگر به این فهرست کارها، است که قادر به چک کردن فرد به انجام آیتم و آن را عبور از، بنابراین اساسا و گفت من انجام داده ام این است. اجازه دهید در برخی از کد است که می تواند انجام رساندن آن نگاه کنید. آنچه من در بالا انجام داده ام من اضافه شده است یک آرایه جهانی جدید به نام کامل است. من اساسا با استفاده از این برای ذخیره اینکه آیا اقلام در لیست TO-DO کامل یا نه. این یک راه برای انجام این کار است. اگر من در اجرای این، صفحه نمایش، نگاه کنید اساسا اگر من وارد TODO و من روی این دکمه کلیک ضامن آن می گذرد، بنابراین هر آیتم در این لیست است یا کامل و یا دولت ناقص، و من با استفاده از آرایه دیگری برای نشان دادن آن است. 

در واقع برای هر TODO در آن آرایه todos یک آیتم وجود دارد در آرایه کامل است که در واقع نشان می دهد که آیا که کامل و یا نه. من تا به حال برای ایجاد تغییرات بسیار کم است به این کد، بنابراین در اینجا تابع addTodo ما است. توجه کنید که در اینجا من آن را هل دادن بر روی آرایه، و سپس من هل دادن 0 به که مجموعه ای کامل، اساسا در موازات با آن فشار TODO جدیدی برای گفتن من اضافه کردن این مورد، و آن را با این مقدار همراه، که بدان معنی است که آن را ناقص است. و سپس من ترسیم لیست TO-DO است. در حال حاضر، متوجه من این تابع drawTodoList ارسال شده ایم. این طول می کشد زیادی از کد ما قبل تا به حال، اساسا پاک از جعبه و سپس تساوی به فهرست کارهای روزانه. اما توجه کنید که در داخل این حلقه ما در حال انجام کمی در حال حاضر بیش. ما اساسا چک کردن اعم از قلم دوم از اقلام مربوط به TODO i ام در اینجا کامل است، و ما در حال رفتار متفاوت در این 2 شرایط. اگر آن را کامل، ما در حال اضافه کردن این تگ به دل، است که اساسا راه که شما می توانید از طریق اعتصاب اثر عبور از لیست به انجام اگر آن را کامل، و اگر این طور نیست، ما آن را از جمله نیست. و به طوری که نوع طول می کشد مراقبت از آن، 

و این یک راه برای انجام این کار است. و پس از آن متوجه زمانی که کاربر یکی از این کلیک ما ضامن وضعیت تکمیل از آن. هنگامی که کلیک کاربر، خواهیم معکوس آن است که آیا تکمیل شده است یا نه، و سپس ما آن را ترسیم خواهیم کرد. این نوع آثار است. ما باید این توابع است که وظایف خود را انجام می دهند، و این خوب است. آیا چیزی هست که ما می توانیم در این مورد انجام دهید بهتر است، هر چند وجود دارد؟ توجه داشته باشید ما باید این 2 آرایه های جهانی. اگر این C بود، و ما تا به حال 2 آرایه که به نوعی نشان داده داده هایی را که مرتب سازی بر اساس در برخی از راه مرتبط آنچه که در C استفاده می کنیم برای ترکیب این 2 زمینه به چیزی است که هر دو قطعه از اطلاعات را کپسوله؟ هر کسی می خواهید به نظر؟ [پاسخ دانشجویی نامفهوم] 

دقیقا، بنابراین ما می تواند برخی از نوع از ساختارها (struct) استفاده کنید، و اگر شما فکر می کنم، می گویند، 3 pset، به یاد داشته باشید ما تا به حال فرهنگ لغت، و پس از آن ما تا به حال اینکه آیا کلمه در فرهنگ لغت بود، و تمام این اطلاعات با هم قرار گرفت در داخل برخی از ساختمان داده. یک چیزی که من می توانم با این کد انجام دهد برای اجتناب از نیاز این 2 آرایه های مختلف برای قطعات مشابه اطلاعات است من می توانم آنها را به یک شی جاوا اسکریپت ترکیب. بیایید نگاهی که در آن. توجه کنید من فقط یک آرایه در بالا در حال حاضر و آنچه من انجام داده ام و این فقط نحو جاوا اسکریپت برای مرتب سازی ایجاد نسخه تحت اللفظی از یک شی، و متوجه 2 خواص وجود دارد، بنابراین ما باید TODO، و آن را همراه با آن است که آیا کامل یا ناقص نگه داشته شود. این کد بسیار مشابه است. ما با استفاده از اشیاء جاوا اسکریپت. این نوع از چیزهای را بهبود می بخشد. مثل همین الان، تمام این زمینه ها اطلاعات مرتبط با هم نگه داشته شود. هنگامی که ما به آن را چاپ کند، ما می توانیم زمینه دسترسی داشته باشید. 

توجه داشته باشید که چگونه ما در حال انجام todos های [i]. کامل به جای چک کردن آرایه کامل به طور جداگانه، و متوجه زمانی که ما می خواهیم به رشته به کار ما در حال گرفتن اموال به انجام که TODO، بنابراین این نوع را حس می کند به دلیل هر فقره این از خواص ذاتی در مورد آن است. این TODO، و آن این است که آیا آن را به کامل و یا نه. نه بیش از حد بسیاری از تغییرات عملکرد وجود دارد، افزود: برخی از کد. این بهبود در برخی از جبهه ها، درست است؟ منظورم این است که، ما عامل از طراحی کمی. در حال حاضر ما اشیاء به اساسا در محفظهای قرار دادن این اطلاعات است. آیا چیزی هست که ما می توانند از اینجا در نظر جاوا اسکریپت را انجام دهد وجود دارد؟ می خواهم توجه داشته باشید که این کد در اینجا برای گرفتن HTML درونی از یک div کمی است، من حدس می زنم، طولانی. document.getElementByID وجود دارد ("todos"). innerHTML بطوری. یک چیزی که ما می توانیم انجام دهید تا به این کد نگاه کنید کمی دوستانهتر بنابراین من نمی خواهد به نگه داشتن اسکرول چپ و راست، جلو و عقب، من می توانم یک کتابخانه مانند جی کوئری استفاده کنید. 

اجازه چک کردن سمینار 2، و این کد همان است، اما آن را با jQuery انجام می شود. شما ممکن است بیش از حد آشنا با jQuery، اما فقط می دانم که مرتب کردن بر اساس جی کوئری یک کتابخانه جاوا اسکریپت است که باعث می شود آن را آسان تر را به انجام کارهای مانند دسترسی به عناصر منحصر به فرد از DOM. در اینجا به جای گفتن document.getElementByID ("todos"). innerHTML بطوری من می توانم راه پاک کننده بسیار در jQuery استفاده کنید، است که فقط به استفاده از انتخابگرهای. همانطور که می بینید، این کد کمی پاک کننده، بسیار شبیه عملکرد، اما این ایده. ما یک زن و شوهر از چیزهایی که دیده ام تا کنون، بنابراین ما با اجرای جاوا اسکریپت را فقط خام شده. ما ویژگی های جدید اضافه شده و نشان داد که چگونه ما می توانیم آن را با بهبود فقط آنچه که ما در جاوا اسکریپت. 

آیا هر کسی هر گونه مشکلات را با این طرح؟ یعنی، من حدس می زنم یا مشکلات لزوما نه، اما اجازه دهید بگویم ما انجام یک پروژه لیست به انجام، و فردا ما تصمیم گرفتیم ما می خواستیم را به یک لیست خرید و یا پروژه لیست خرید ها. بسیاری از این ویژگی ها خیلی مشابه هستند. بسیاری از چیزهایی که ما می خواهیم به خارج شدن از جاوا اسکریپت بسیار معمول است، و این امر نیاز به نوعی از راه ساخت این آسان تر به انجام. من تا به حال برای ساخت تا همه از این دسترسی HTML، تمام این دسترسی DOM، مثل من قصد دارم برای نشان دادن لیست TO-DO با این مدل است. و متوجه من مسئول به عنوان توسعهدهنده جاوا اسکریپت برای حفظ HTML و جاوا اسکریپت است که من در همگام. هیچ چیز به طور خودکار ساخته شده است که نمایندگی جاوا اسکریپت و یا لیست کارهای خارج HTML تحت فشار قرار دادند. هیچ چیز اجباری که به جز من. من تا به حال برای نوشتن قرعه کشی به انجام تابع لیست. و این ممکن است باشد، منظور من، آن را معقول و منطقی برای انجام این کار، اما ممکن است گاهی اوقات خسته کننده است. اگر شما یک پروژه بزرگتر، که می تواند مشکل باشد. 

چارچوب، یکی از اهداف از چارچوب ساده که روند و نوع از عامل از این مشترک من حدس می زنم شما می توانید از الگوهای می گویند طراحی که مردم به طور کلی دارای نوعی از راه به نمایندگی از داده ها، که آیا آن لیست دوستان است، چه که اطلاعات نقشه یا چیزی و یا یک لیست به انجام. برخی از افراد به طور کلی راه به نمایندگی از اطلاعات، و آنها به طور کلی نیاز به نگه داشتن آن نوع اطلاعات در همگام بین آنچه را که کاربر می بیند در نوعی از نظر، صحبت کردن در شرایط شبیه به مدل کنترل که شما در سخنرانی را دیدم، و پس از آن مدل، که در این مورد این آرایه جاوا اسکریپت است. چارچوب به ما یک راه برای حل این مشکل را. حالا اجازه دهید نگاهی به اجرای این فهرست کارها در چارچوب نام angularjs. این از آن است. توجه داشته باشید آن را بر روی یک اسلاید متناسب. من لازم نیست برای حرکت به سمت چپ و راست. که احتمالا یک دلیل بزرگ توصیه می شود که با استفاده از یک چارچوب نیست، اما توجه من همیشه دسترسی به عناصر HTML فردی اینجا؟ من همیشه رفتن به DOM؟ آیا هر document.getElementByID و یا چیزی شبیه به آن را می بینید؟ نه، این رفته است. 

زاویه ای کمک می کند تا ما را DOM و نمایندگی جاوا اسکریپت خود را از چیزی نوع از در همگام، پس اگر آن را در فایل JS، اگر هیچ راهی برای برنامه نویسی به تمام کسانی که محتوای HTML وجود دارد از JavaScript در مرورگر شما چگونه ما این نگهداری در همگام؟ اگر آن را در فایل JS. نیست، آن را رو در HTML باشد، درست است؟ این نسخه جدید از فایل HTML است، و متوجه شده ایم اضافه زیادی در اینجا. توجه داشته باشید این ویژگی های جدید که می گویند نانوگرم کلیک کنید و نانوگرم تکرار وجود دارد. رویکرد زاویه ای برای حل این مشکل از مشکلات در طراحی این است که اساسا HTML بسیار قوی تر کند. زاویه راه اجازه می دهد شما را به HTML تا حدودی رسا تر است. برای مثال، می توانم بگویم که من قصد دارم به کراوات یا اتصال این جعبه متن به متغیر درون من کد جاوا اسکریپت زاویه. این نانوگرم در مدل می کند که فقط. که اساسا می گوید که آیتم داخل این جعبه متن، تنها شریک که با new_todo_description متغیر ها در درون کد های جاوا اسکریپت. که بسیار قدرتمند چون من لازم نیست که به صراحت به DOM که برای دریافت اطلاعات. من لازم نیست می گویند document.getElementByID. من لازم نیست برای استفاده از jQueries مانند دسترسی به DOM. من می توانم آن را با یک متغیر مرتبط، و سپس وقتی که متغیر را عوض کنم در داخل جاوا اسکریپت آن را در همگام با HTML نگهداری، به طوری که ساده فرآیند نیاز به رفتن به جلو و عقب بین این دو است. آیا آن را حس؟ 

و توجه داشته باشید که هیچ یک از کدهای دسترسی HTML وجود دارد. ما فقط متنی قوی تر ساخته شده، و در حال حاضر، به عنوان مثال، ما می توانیم چیزهایی مثل این را انجام دهید، مانند زمانی که شما در این مورد کلیک کنید، با این تابع در دامنه todos.js، و ما می توانیم قبل از انجام این کار، اما چیزهای دیگر وجود دارد، مانند این نانوگرم در مدل، و متوجه این نانوگرم تکرار. شما چه فکر می کند؟ در اینجا لیست نامرتب ما از قبل است. ما باید تگ UL، اما من تا به حال ارائه آن فهرست در داخل از کد جاوا اسکریپت؟ من به صراحت همیشه ارائه آن فهرست. چگونه این کار می کند؟ خوب، راه زاویه ای انجام این است که این یک تکرار نامیده می شود. اساسا این می گوید که من می خواهم برای چاپ این HTML برای هر TODO داخل آرایه todos من. داخل todos.jr است یک آرایه todos حق در اینجا وجود دارد، و این کار بروید زاویه ای که از طریق آرایه بگویید، و برای هر عنصر می بینید من می خواهم به شما برای چاپ این HTML. این نوع بسیار جذاب است چون من فقط می تواند این کار را انجام دهند بدون نیاز به نوشتن یک حلقه for، که برای یک لیست کارهای که تنها 30 خط کد بود ممکن است مفید ترین چیز نیست، اما اگر شما یک پروژه بزرگ، این می تواند بسیار مناسب است. 

این یک راه حل برای این مشکل است، متنی قوی تر، و است که اجازه می دهد تا ما را به نگه داشتن جاوا اسکریپت و HTML در همگام. از دیگر راه های ممکن برای حل این مشکل وجود دارد، و نه هر چارچوب می کند. هر چارچوب نه در امتداد این خطوط کار می کند. برخی از چارچوبها نیز دارای روش های مختلف، و شما ممکن است دریابید که شما لذت بردن از برنامه نویسی در یک چارچوبی بیش از دیگر. اجازه دهید در یک نگاه. این لیست به کار در یک چارچوب به نام ستون فقرات کد است. من قصد دارم از طریق این سرعت. من با HTML شروع قبل از ما وجود دارد. یک دوم. با شروع HTML، که شما متوجه، HTML ما بسیار شبیه است به آنچه که قبل از آن، به طوری که نه بیش از حد بسیار جدید در این جبهه بود. اما فایل جی اس ما این است که کمی متفاوت است. نوع ستون فقرات از این ایده، یا ساخت بر اساس این ایده که بسیاری از آنچه که ما با انجام این کار، می گویند، ما پروژه های جاوا اسکریپت در مورد مدل ها و مجموعه ای از این مدل ها فکر می کنم. و این ممکن است، برای مثال، یک عکس و مجموعه عکس ها، یا ایده دوستان و مجموعه ای از دوستان است. و اغلب هنگامی که ما در حال برنامه نویسی برنامه های کاربردی جاوا اسکریپت خواهیم مرتب سازی بر اساس نشان دادن ایده داشتن یک مجموعه از دوستان به نحوی در جاوا اسکریپت، و ستون فقرات به ما می دهد این لایه در بالای آرایه های موجود جاوا اسکریپت و اشیاء برای انجام کارهای قوی تر با آن به راحتی. 

در اینجا من تعریف کرده ایم یک مدل TO-DO، و شما لازم نیست که به نگرانی بیش از حد در مورد نحو، اما توجه کنید که یکی از خواص این است؟ این زمینه به طور پیش فرض. ستون فقرات به من اجازه می دهد برای مشخص کردن خفاش هر به انجام این کار من ایجاد می خواهم که این پیش فرض است. در حال حاضر من می توانم این سفارشی است اما بخاطر این که قادر به تعیین پیش فرض خوب است، و آن را از نوع مناسب به دلیل این است چیزی که مانند ذاتی در جاوا اسکریپت، و در حال حاضر من به صراحت ندارد می گویند که todos ناقص هستند. می توانم بگویم حق کردن خفاش است که todos می رویم به عنوان ناقص مشخص شده اند. توجه داشته باشید پس از آن چه است؟ در حال حاضر من یک لیست به انجام، و این یک مجموعه است. توجه کنید زمینه های مرتبط با آن می گوید مدل TODO. به این ترتیب من از گفتن ستون فقرات است که من قصد دارم به تفکر در مورد مجموعه ای از این todos فردی. این است که اساسا ساختار مدل برای برنامه های من است. در اینجا من این ایده را از یک مجموعه، و اساسا آیتم های موجود در آن مجموعه همه برای رفتن به این todos، و این بسیار طبیعی به این معنا چون من مجبور todos، و من آنها را در یک مجموعه. 

اجازه دهید کمی بیشتر از این نگاه. در اینجا دیدگاه ستون فقرات است. چیز دیگری که ستون فقرات می گوید این است که بسیاری از مدل های که شما در حال فکر کردن در مورد و یا حتی مجموعه می رویم به نیاز به برخی از راه نمایش داده می شود. ما نیاز به ارائه فهرست کارها، و آن را نمی شود خوب بود اگر ما می تواند برای هر مدل ارائه و یا معاشرت با هر مدل این دیدگاه که به ما اجازه می دهد به من حدس می زنم با هم اتصال دو؟ در حالی که قبل از ما تا به حال به استفاده از یک حلقه که از طریق اجرا هر TODO در لیست ما و سپس آن را چاپ از اینجا ما در واقع می توانید آن را با این مدل ارتباط برقرار کنند. این دیدگاه به انجام است. این است با TODO که قبلا وجود. در حال حاضر هر TODO از Displayable یا Renderable را این به انجام دهید. توجه داشته باشید برخی از زمینه ها. شما چه فکر میکنید به این tagName، tagName: لی؟ به یاد داشته باشید قبل از زمانی که ما می خواستیم به ارائه TODO ما باید به صراحت todos ما با این تگ لی جفت. در حال حاضر ما در حال اعلام کرد که که این TODO گذرد، به زندگی رفتن به داخل تگ لی. و در حال حاضر ما در حال ارتباط رویدادی به todos ما. 

هر TODO این رویداد یکی است. اگر شما کلیک کنید خیلی دکمه ضامن، این چیزی است که من ادعا وجود دارد، پس از آن اساسا علامت TODO به عنوان مخالف از آنچه قبل از آن بود و سپس دوباره رندر نرم افزار. این نوع شبیه به کد قبل است. به یاد داشته باشید هنگامی که ما آن را به صورت مخالف یا مشخص و سپس ما آن را دوباره ارائه شده است. اما متوجه این رویداد استفاده می شود چیزی است که در HTML بود. آن نشسته بود وجود دارد. را فشار دهید تا به حال بر روی کلیک کنید. هنگامی که شما با کلیک بر روی دکمه، این نوع از مسائل به راه اندازی که TODO ناقص باشد. در اینجا ما که صورت کلیک کردن بر روی این دکمه ضامن و معکوس آن است که آیا روشن یا خاموش با این دیدگاه است. 

این روش خوبی برای راه اندازی این رویداد است به طوری که آن را بسیار محکم محدود این دیدگاه، و غیره متوجه این یکی بیشتر. من این روش رندر، و ما لازم نیست برای رفتن از طریق جزئیات. این نوع مشابه آنچه قبل از ما تا به حال، اما متوجه من از طریق هر چیزی حلقه نیست. من چاپ که برچسب UL که مرتب سازی بر اساس گفت: من قصد دارم تا در آن چاپ تمام عناصر نیست. من ارائه قابلیت برای ارائه این یکی به آیتم استفاده کنید. این مفهوم بسیار قدرتمند است زیرا اساسا به فهرست کارهای ما متشکل از تمام این todos، و اگر ما اساسا می توانید مشخص کنید راه را برای ارائه یکی از کسانی که todos سپس ما می توانیم به ستون فقرات قدرتمند ما فی نفسه ارائه تمام todos با فراخوانی متد رندر در todos فردی. این یک مفهوم است که در اینجا مفید است. حالا یک سوال خوب برای پرسیدن این است که چگونه این نرم افزار در حال کنار هم قرار دادن؟ از آنجا که ما توانایی ارائه یک TODO، اما چگونه می توانم ما ایده todos متعدد را دریافت کنم؟ 

بیایید نگاهی که در آن. این قسمت آخر است. توجه داشته باشید ما باید به انجام لیست در اینجا، و متوجه آن را نیز در نظر است. و به بیش از یک زن و شوهر از مسائل، این روش مقداردهی اولیه نامیده می شود زمانی که ما برای اولین بار این لیست TO-DO ایجاد کنید. همانطور که می بینید، آن را مانند ایجاد لیست به کار و ارتباط آن با این دیدگاه است. و سپس من توابع اضافه شده است بنابراین در اینجا اساسا زمانی که شما اضافه کردن یک آیتم این شبیه به روش addItem ما قبل دیدم من قصد دارم برای ایجاد یک شیء جدید TODO، و متوجه من در واقع خواستار این روش و TODO جدید، پس این است که ستون فقرات ارائه شده، و من می توانم در املاک من به اینجا منتقل می کند. و در حال حاضر هر TODO که من با استفاده از ایجاد این خواهد شد که قابلیت است که ما قبل از دیدم. توجه کنید من پاکسازی جعبه متن جزئیات قبل و کمی کوچک و سپس من اضافه کردن این مجموعه است. 

در این تقریبا عجیب و غریب به نظر می رسد چرا که قبل از ما فقط تا به حال برای انجام این کار todos.push، و پس از آن ما انجام شد و این ممکن است پیچیده تر است برای این پروژه خاص به نظر می رسد، و شما ممکن است که ستون فقرات و یا حتی زاویه ای و یا هر چارچوب دیگر پیدا کنید پروژه های خاص شما مناسب نیست، اما من فکر می کنم این مهم است که به فکر کردن در مورد آنچه در این به این معنی در مقیاس بزرگتر برای پروژه های بزرگ، چرا که اگر ما تا به حال یک پروژه بزرگتر که در آن ما به نمایندگی از برخی از مجموعه واقعا پیچیده، چیزی عمیق تر از فقط یک لیست به انجام، اجازه دهید می گویند لیست دوستان و یا چیزی شبیه به آن، این می تواند در مفید آمده است از آنجا که ما می توانند کد خود را در یک راه واقعا مناسب سازماندهی، در یک راه است که آن را برای شخص دیگری آسانتر می کند که می خواستند انتخاب کنید تا یک پروژه برای ساخت بر. شما می توانید ببینید که این فراهم می کند مقدار زیادی از ساختار. و سپس من خواستار در این addItem ارائه. بارگزاری صفحه، همانطور که می بینید، و شما لازم نیست که به درک این نحو کامل، اما اساسا برای هر مدل آن را برای رفتن به متد رندر فردی است. که مرتب سازی بر اساس جایی که این می آید از. بیایید فقط مشخص کنید که چگونه به ارائه todos فردی، و سپس اجازه دهید چسب آنها را با هم به عنوان یک کل. اما این فراهم می کند راه را از انتزاع، زیرا من می توانم راه من تصمیم به ارائه todos فردی را تغییر دهید، و من نمی خواهد مجبور به تغییر هر یک از این کد. که نوع سرد است. 

آیا هر کسی هر گونه سوال در مورد چارچوب های جاوا اسکریپت؟ [سوال دانشجویی نامفهوم] اوه، مطمئن شوید، این یک سوال بزرگ است. سوال این بود که من شامل چارچوب؟ اغلب چارچوب های جاوا اسکریپت در واقع فقط فایل JS که شما می توانید در بالای کد شما باشد. توجه کنید که در بخش سر HTML من من همه از این دستورات اسکریپت، و تگ اسکریپت نهایی کدی که ما نوشته شده است. و سپس 3 کد چارچوب تگ های اسکریپت هستند فقط همچنین. من آنها را از جمله از یک CDN به نام، که به من اجازه می دهد تا آن را دریافت کند از کسی دیگری در این نقطه اما هر چارچوب این شما می توانید تقریبا پیدا کردن مطالب برای یک کتابخانه جاوا اسکریپت خاص موجود در برخی از CDN یا چیزی شبیه به آن، و سپس شما می توانید از این برچسب ها شامل اسکریپت. آیا آن را حس؟ سرد است. 

کسانی که 2 روش متفاوت هستند. کسانی که تنها روش برای حل این مشکل نیست. هستند بسیاری از چیزهای مختلف وجود دارد که کسی می تواند انجام دهد، و بسیاری از چارچوب های خارج وجود دارد وجود دارد. و زاویه ای و ستون فقرات کل داستان نیست. موفق باشید با پروژه های نهایی خود را، و بسیار از شما سپاسگزارم. [CS50.TV]