[Powered by Google Translate] [ندوة] [أطر جافا سكريبت: لماذا وكيف] [كيفن شميد] [جامعة هارفارد] [هذا CS50.] [CS50.TV] 

مرحبا، الجميع. مرحبا بكم في أطر الندوة سكريبت. اسمي كيفن، واليوم انا ذاهب الى أن نتحدث عن الأطر جافا سكريبت، والهدف من هذه الندوة ليست لتحصل على، ويقول، إتقان إطار معين في حد ذاته ولكن لتعطيك مقدمة واسعة لزوجين من الأطر وتبين لماذا كنا نريد من أي وقت مضى لاستخدام الإطار. 

قبل أن أفعل ذلك، أنا سوف توفر الخلفية قليلا في جافا سكريبت، ومن ثم سنقوم أعتبر من هناك. ونحن في طريقنا للبدء بتنفيذ قائمة المهام. وإليك قائمة المهام لهذا اليوم. انها نوع من مضحك. لدينا لتنفيذ قائمة المهام في جافا سكريبت. هذا هو ما يحدث لتبدو وكأنها، أن ذلك ليس هدفنا الأول. نحن لن تستخدم إطارا للقيام بذلك. ونحن في طريقنا إلى شفرة جافا سكريبت والحصول على قائمة المهام للعمل. ثم ونحن في طريقنا لتحسين تصميم دون استخدام الإطار. نحن ذاهبون لمناقشة مختلف الأمور يمكننا القيام به فقط مع جافا سكريبت وحده لجعل لدينا تأليف لائحة قليلا مصممة أكثر جيدا. ثم نحن ذاهبون الى رمي في بعض مسج، ومن ثم نحن في طريقنا للبحث في نفس تأليف لائحة، نفذت فقط في أطر مختلفة، وسنناقش  إيجابيات وسلبيات على طول الطريق. 

دعونا نبدأ تنفيذ هذا تأليف لائحة. دعونا نقول اننا تعطى هذه HTML. انا ذاهب الى جعل هذا أصغر قليلا. كما ترون، ولدي القليل من الرأس الذي يقول تودو ومربع قليلا حيث يمكنني أن أدخل وصفا لTODO ثم زر عنصر جديد، لذلك دعونا في محاولة لإدخال TODO جديدة إلى هذه القائمة. إعطاء الأطر ندوة جافا سكريبت، وأنا ليصل بند جديد. يمكنني الحصول على هذا التنبيه جافا سكريبت تقول تنفيذ لي. لقد وصلنا إلى تنفيذه. دعونا تحقق من رمز لهذا، فإن كلا من HTML وجافا سكريبت. وهنا HTML لدينا. كما ترون هنا، وهنا لدينا رأس تودوس قليلا. وكان أن هذا الشيء جريئة في القمة، ومن ثم لدينا مربع الإدخال مع العنصر النائب، وبعد ذلك هناك سمة معينة من هذا الزر الذي يستدعي هذه الدالة addTodo. هل يريد أي شخص أن يخمن ما الذي على نقرة ومما يدل؟ [طالب استجابة غير مسموع] جيدة، وعند النقر هو نوع من مثل هذا الحدث، مثل النقر على الفأرة هو مجرد حدث، وما نقوم به ونحن ربط حدث من النقر على هذا الزر لتنفيذ هذه المهمة. AddTodo هو معالج الحدث هذا لالنقر على هذا الزر. 

كما ترون، عندما كنت اضغط على زر عنصر جديد أطلقت يحصل الحدث Click على، ويحصل على استدعاء هذه الدالة. دعونا ننظر في وظيفة. كما ترون، وهنا شفرة جافا سكريبت بلدي حتى الآن. ما قلته في الأعلى هو بنية البيانات العالمية لقائمتي تأليف ل. يبدو صفيف. انها مجرد مجموعة فارغة. ثم لدي وظيفة addTodo التي رأيناها في وقت سابق، والخط فقط من التعليمات البرمجية في وجود هذا التنبيه. إنه ينبه تنفيذ لي، ثم لقد 2 المهام في متناول اليد. لا بد لي من إضافة TODO إلى أن هيكل البيانات العالمية، ثم أريد أن استخلاص قائمة المهام. لا شيء يتوهم جدا فقط حتى الآن، ولكن سكريبت قد تكون غير مألوفة مع، لذلك انا ذاهب للذهاب بطيئة واستعراض أساسيات الجافا سكربت في ذلك الطريق. 

دعونا نعطي هذه رصاصة واحدة. دعونا نقول للمستخدم يدخل شيء في هذا المربع. أنا فقط كتبت شيئا هنا، النص. كيف يمكنني فرز Access الذي نص من خلال جافا سكريبت؟ نتذكر أن جافا سكريبت، واحدة من ميزاته الأساسية هي أنها تعطي لنا هذا بالوصول المبرمج إلى DOM. لأنها تتيح لنا الوصول إلى عناصر وممتلكاتهم من هذه HTML الفعلية. الطريقة التي تفعل ذلك مع العارية العظام سكريبت هو أننا يمكن استخدامها في الواقع وظيفة في جافا سكريبت دعا getElementByID. أريد أن تخزين النص وهذا ما كتبته هناك في بعض متغير، لذلك أنا ذاهب الى القول متغير جديد يسمى new_todo، وانا ذاهب للحصول على هذا العنصر. هذه هي وظيفة،. getElementByID. والآن أنا الحصول على عنصر بواسطة معرف، لذلك أنا في حاجة إلى ID من أن مربع النص، حتى لقد أتيحت لها new_todo_description ID. هذه هي الطريقة التي انا ذاهب الى الحصول على عنصر. وهذا حجتي لهذه المهمة، لتحديد أي رقم للحصول على. وذلك أن عنصر في HTML، ولها خصائص. كنت قد رأيت هذه. انهم الصفات. يسمى السمة للعنصر النص الذي يخزن إدخال المستخدم قيمة. انني أنقذت قيمة مربع النص الآن في هذا المتغير يسمى new_todo. الآن لدي الوصول البرمجي إلى هذا المتغير، والذي هو نوع من باردة لأنه الآن ما يمكنني القيام به هو أنني يمكن إضافته إلى قائمة المهام. 

الطريقة التي ستفعل هذا في جافا سكريبت، و لا تقلق إذا كنت غير مألوف مع هذا، ولكن مجرد الذهاب من خلال ذلك هو todos.push لأن هذا هو اسم بلدي هيكل البيانات العالمية هنا، وانا ذاهب لدفع new_todo. وهذا شيء عظيم لأنه الآن لقد إضافته إلى تشغيل الجافا بلدي تمثيل تلك القائمة إلى القيام به. ولكن الآن كيف يمكنني الحصول على إعادته إلى HTML؟ لا بد لي من ايجاد وسيلة لفرز من يدفع به إلى الوراء. وبعبارة أخرى، أنا نوع من يجب أن يوجه هذا. ما نحن بصدد القيام به هو أننا ذاهبون لرسم لائحة تأليف ل. ولست بحاجة لتحديث HTML أخرى على تلك الصفحة، وكما ترون، لقد تركت هذه الحاوية قليلا هنا، هذا المفرق من الصفحة التي ID هو TODOS، وانا ذاهب الى وضع قائمة إلى القيام به هناك. أولا أنا ذاهب لمسحها خارج لأنه، يقول، هناك قائمة إلى قيام القديمة هناك. انني اتلقى هذا العنصر عن الهوية مرة أخرى، وأنا الوصول إلى HTML الداخلية لهذا العنصر، وانا ذاهب لمسح ذلك. إذا تركنا هذا الكود كما هو، لكنا نرى شيئا فارغا هناك، والآن أريد أن أبدأ جعل بلدي جديد قائمة المهام. انا اساسا ذاهب للقضاء على قائمتي تأليف ل. 

الآن داخل HTML الداخلية من أن TODOS DIV غير واضحة تماما، والآن أنا بحاجة للبدء في إضافة قائمتي. أول شيء أريد أن أضيف إلى الوراء لائحة علامة غير مرتبة، الذي يدل أساسا على أن هذا هو بداية قائمة غير مرتبة. الآن لكل عنصر في بلدي TODOS مجموعة أريد أن طباعته داخل تلك HTML. أريد أن إلحاقها إلى الجزء السفلي من هذه القائمة. مثلما هو الحال في C، يمكنني استخدام لحلقة، وأنا ذاهب لبدء في بداية قائمتي في العنصر 0، وانا ذاهب للذهاب كل وسيلة لطول القائمة. يمكننا في الواقع الحصول على طول صفيف في جافا سكريبت باستخدام الخاصية طول. أساسا أنا ذاهب إلى القيام بشيء مماثل جدا داخل هنا لطباعة هذا العنصر. أستطيع الوصول مرة أخرى DIV TODOS، الخاصية HTML الداخلية من ذلك، وانا ذاهب لإضافة على هذه القائمة عنصر جديد، والذي يحدث أن تكون محاطة هذه العلامة لى، وانا ذاهب لسلسلة مع المشغل +، وهذا هو العنصر إيث من بلدي TODOS مجموعة، ثم أنا ذاهب لإغلاق هذه العلامة. الآن لكل عنصر سنقوم بإضافة إدخال قائمة جديدة. ثم نحن حقا بحاجة الى القيام به هو إغلاق هذه العلامة. أنا فقط بحاجة لإغلاق هذا غير مرتبة العلامة قائمة. 

هل التعود على كيفية عمل ذلك؟ هذا يفتح القائمة بأكملها. وهذا يضيف عناصر فردية من قائمة TODOS إلى القائمة، ثم أن يغلق القائمة بأكملها، وهذا هو بلدي وظيفة addTodo. أبدأ أساسا عن طريق الحصول على ما يجب عمله من مربع النص. أود أن أضيف أن لمجموعة TODOS، وبعد ذلك إعادة تقديم لائحة تأليف ل. أنا الآن يمكن إضافة عناصر إلى قائمتي. هذا هو نوع من الإثارة لأنه في بضعة أسطر من التعليمات البرمجية التي قمنا بها في الأساس قائمة المهام حيث يمكننا أن نضيف العناصر. عظيم. وهذا النوع من مقدمة أساسية للجافا سكريبت. لا تقلق كثيرا حول بناء الجملة في الوقت الراهن، ولكن التفكير في هذا المفهوم. كان لدينا بعض HTML. كان لدينا مربع نص على الصفحة التي تسمح للمستخدمين أساسا لإدخال عنصر تأليف لإضافته. ثم استخدمنا جافا سكريبت لجلب أن TODO من أن مربع النص. نحن المخزنة التي داخل مجموعة وجافا سكريبت، الذي هو في الأساس مثل التمثيل البرنامجية لدينا من أن تأليف لائحة، وبعد ذلك طبعت بها. هذا هو todos.js. 

هذا هو نوع من باردة، ولكن كيف يمكن لنا أن أغتنم هذه مزيد؟ حسنا، كما ترون، هذه ليست مثل القائمة كاملة إلى القيام به. على سبيل المثال، وأنا لا يمكن وضع علامة على أي من هذه البنود كما غير مكتملة، مثل إذا أردت أن إعادة ترتيب أولويات البنود أو حذف العناصر. هذا على ما يرام، لكننا يمكن أن يستغرق هذا أبعد من ذلك. أنا لن أتحدث كثيرا عن إضافة ميزات اضافية، ولكننا يمكن ان يأخذ هذا أبعد من ذلك. دعونا نتحدث حول إضافة ميزة واحدة أكثر من هذا لتأليف لائحة، وهو ذاهب الى أن تكون قادرة على التحقق من الفرد إلى القيام البند ولقد يمكن تجاوزها من ذلك، لذلك أساسا قائلا لقد فعلت هذا. دعونا نلقي نظرة على بعض التعليمات البرمجية التي يمكن تحقيق ذلك. لاحظ ما فعلته في الجزء العلوي هو أنني قمت بإضافتها دعا مجموعة عالمية جديدة كاملة. أنا أساسا استخدام هذا لتخزين ما إذا كانت العناصر في قائمة المهام هي كاملة أم لا. هذه هي طريقة واحدة للقيام بذلك. إذا كنت تنظر في تنفيذ هذا، وعرض، أساسا إذا كنت إدخال TODO وأنا الضغط على هذا الزر تبديل فإنه يعبر بها، لذلك كل بند في هذه القائمة إما كاملة أو دولة غير مكتملة، وأنا باستخدام مجموعة أخرى لتمثيل ذلك. 

أساسا لكل TODO في هذا TODOS مجموعة هناك عنصر في مجموعة كاملة التي تشير إلى الأساس سواء كان ذلك كاملة أم لا. لقد كان لإجراء تغييرات الحد الأدنى جدا لهذا الرمز، حتى هنا لدينا وظيفة addTodo. لاحظ أن هنا أنا دفعت به إلى مجموعة، ثم أنا يدفع 0 إلى أن مجموعة كاملة، أساسا بالتوازي مع ذلك دفع TODO جديدة أن أقول أنا وأضاف هذا البند، وانها اقترنت هذه القيمة، وهو ما يعني أنه من غير مكتملة. ثم أنا إعادة رسم لائحة المهام. الآن، لاحظ لقد أضيفت هذه وظيفة drawTodoList. هذا يأخذ الكثير من رمز كان لدينا من قبل، مسح أساسا خارج منطقة الجزاء ومن ثم توجه جديد قائمة تأليف ل. ولكن لاحظ أن داخل هذا لحلقة نفعله أكثر من ذلك بقليل الآن. نحن أساسا فحص ما إذا كان العنصر المقابلة لTODO إيث هنا كاملة، ونحن يتصرف بشكل مختلف في هذه الظروف 2. اذا كان كاملة، ونحن مضيفا هذه العلامة ديل، الذي هو في الأساس الطريقة يمكنك الحصول على هذه الضربة من خلال تأثير شطب لائحة تأليف للو كان كاملة، وإذا لم يكن، ونحن لا تشمل ذلك. وحتى هذا النوع من يعتني ذلك، 

وهذا هو أحد السبل لتحقيق ذلك. ومن ثم لاحظ عندما يقوم المستخدم بالنقر فوق واحدة من هذه نحن تبديل حالة الانتهاء من ذلك. عندما يقوم المستخدم بالنقر فوق، سنقوم عكس ما إذا كان قد تم الانتهاء منه أم لا، ومن ثم سنقوم إعادة رسم عليه. هذا النوع من الأعمال. لدينا هذه المهام التي تنفذ المهام الخاصة بهم، وهذا على ما يرام. هل هناك أي شيء يمكننا القيام به أفضل حول هذا الموضوع، على الرغم من؟ لاحظ لدينا هذه المصفوفات العالمية 2. إذا كان هذا C، وكان لدينا 2 صفائف هذا النوع من تمثيل البيانات التي تم نوع من تتصل في بعض الطريق ما يمكن أن نستخدمها في C في الجمع بين هذه المجالات 2 إلى شيء بتغليف كل قطعة من المعلومات؟ أي شخص تريد أن تجعل من اقتراح؟ [طالب استجابة غير مسموع] 

بالضبط، حتى أننا يمكن أن تستخدم نوعا من البنية، وإذا كنت تعتقد أن العودة، ويقول، pset 3، تذكر كان لدينا قاموس، ومن ثم كان لدينا ما إذا كانت كلمة وكان في القاموس، ووضعت كل تلك المعلومات معا داخل بعض هياكل البيانات. شيء واحد يمكنني القيام به مع هذا الرمز لتجنب وجود هذه 2 صفائف مختلفة لقطعة مماثلة من المعلومات يمكنني الجمع بينهما إلى كائن جافا سكريبت. دعونا نلقي نظرة على ذلك. لاحظ ليس لدي سوى مجموعة واحدة في الجزء العلوي الآن وما قمت به هو وهذا هو مجرد بناء الجملة جافا سكريبت لنوع من إنشاء نسخة حرفية من كائن، وتلاحظ هناك 2 الخصائص، لذلك لدينا ما يجب عمله، وأبقى جنبا إلى جنب مع ما اذا كان كاملة أو غير كاملة. هذا هو رمز مشابهة جدا. نحن نستخدم الكائنات سكريبت. هذا النوع من الامور تتحسن. مثل الآن، وتحفظ جميع هذه الحقول من المعلومات ذات الصلة معا. عندما نذهب لطباعته، يمكننا الوصول إلى الحقول. 

لاحظ كيف نقوم به TODOS [أنا]. كاملة بدلا من فحص مجموعة كاملة بشكل منفصل، ولاحظ أننا عندما ترغب في الحصول على سلسلة تأليف لأننا الحصول على الملكية إلى القيام ذلك ما يجب عمله، لذلك هذا النوع من المنطقي لأن كل عنصر له هذه الخصائص الجوهرية حول هذا الموضوع. أنه يحتوي على ما يجب عمله، ولها سواء كان ذلك كاملة أم لا. لم يفت العديد من التغييرات هناك وظيفيا، واضاف عادل بعض أكثر إلى رمز. هذا يعد تحسنا عن بعض الجبهات، أليس كذلك؟ أعني أننا الحسبان بأعمال التصميم قليلا. الآن لدينا كائنات لتغليف أساسا هذه البيانات. هل هناك أي شيء أكثر يمكننا القيام به من هنا من حيث جافا سكريبت؟ أحب لاحظ أن هذا الرمز هنا للحصول على HTML الداخلية للشعبة قليلا، وأنا أعتقد، طويلة. هناك document.getElementByID ("TODOS"). innerHTML. شيء واحد يمكن أن نقوم به لجعل هذا الرمز تبدو ودا قليلا لذلك أود أن لا يكون للحفاظ على التمرير الأيسر والأيمن، ذهابا وإيابا، هو أنني يمكن استخدام مكتبة مثل مسج. 

دعونا تحقق من الحلقه 2 وهذا هو نفس الرمز، ولكن يتم ذلك مع مسج. قد لا تكون مألوفة جدا مع مسج، ولكن نعرف تماما أن مسج هو نوع من مكتبة للجافا سكريبت أن يجعل من الأسهل أن تفعل أشياء مثل العناصر الفردية صول DOM. هنا بدلا من أن تقول document.getElementByID ("TODOS"). innerHTML يمكنني استخدامها بالطريقة الأنظف في مسج، الذي هو مجرد لاستخدام محددات. كما ترون، هذا الرمز لم يحصل قليلا أكثر نظافة، مشابهة جدا وظيفيا، ولكن هذه هي الفكرة. لقد رأينا بضعة أشياء حتى الآن، لذلك بدأنا في تنفيذ جافا سكريبت الخام فقط. أضفنا ميزات جديدة وأظهرت كيف يمكننا تحسينه مع فقط ما لدينا في جافا سكريبت. 

لا أرى أي شخص أي صعوبات مع هذا التصميم؟ وهي، أعتقد أو ليس بالضرورة صعوبات ولكن دعنا نقول كنا لا تفعل مشروع قائمة المهام، وغدا قررنا كنا نرغب في تقديم قائمة البقالة أو مشروع قائمة التسوق. وهناك الكثير من هذه الميزات هي مشابهة جدا. وهناك الكثير من الأشياء التي تريد الخروج من جافا سكريبت شائعة جدا، وهذا يؤكد الحاجة لبعض نوع الطريق مما يجعل هذا أسهل للقيام به. كان لي لبناء كل هذا الوصول HTML، كل هذا الوصول DOM، مثل أنا ذاهب لتمثيل قائمة إلى القيام به مع هذا الطراز. وإشعار أنا مسؤول عن المطور سكريبت من أجل الحفاظ على HTML وجافا سكريبت أن لدي في المزامنة. لا شيء بشكل تلقائي أن التمثيل سكريبت أو لائحة تأليف لتحصل دفعت بها إلى HTML. لا شيء القسري التي ما عدا بالنسبة لي. اضطررت لكتابة القرعة تأليف لوظيفة قائمة. والتي قد لا تكون أعني، فمن المعقول أن تفعل ذلك، لكنها قد تكون مملة أحيانا. إذا كان لديك مشروع أكبر، وهذا قد يكون صعبا. 

الأطر، واحدة من أغراض الأطر هو تبسيط هذه العملية ونوع من عامل خارج هذه الشائعة، وأنا أعتقد أن أنماط القول تصميم أن الناس لديهم عموما نوعا من طريقة لتمثيل البيانات، سواء كان ذلك في قائمة الأصدقاء، سواء كان ذلك المعلومات خريطة أو شيء أو قائمة المهام. بعض الناس لديهم عموما وسيلة لتمثيل المعلومات، وأنها تحتاج بشكل عام للحفاظ على هذا النوع من المعلومات في المزامنة بين ما يراه المستخدم في بعض نوع من الرأي، يتحدث في شروط مثل وحدة تحكم عرض نموذج التي رأيتها في محاضرة، ثم النموذج، وهو في هذه الحالة هو هذه المجموعة سكريبت. الأطر تعطينا طريقة لحل تلك المشكلة. الآن دعونا نلقي نظرة على تنفيذ هذا تأليف لائحة في إطار دعا angularjs. هذا هو عليه. لاحظ تناسبها على شريحة. أنا لم يكن لديك للتمرير إلى اليسار واليمين. ربما كان هذا هو ليس سبب وجيه أن يوصي باستخدام الإطار، لكن لاحظ أنا أي وقت مضى الحصول على عناصر HTML الفردية هنا؟ أنا ذاهب من أي وقت مضى في DOM؟ هل ترى أي document.getElementByID أو شيء من هذا القبيل؟ لا، هذا ذهب. 

الزاوي يساعدنا على الحفاظ على DOM وجافا سكريبت تمثيلنا من شيء نوع من وفاق، لذلك إذا لم يكن في ملف JS، اذا لم يكن هناك طريقة للحصول على برمجيا للجميع أن محتوى HTML من جافا سكريبت كيف يمكننا أخذ ذلك في المزامنة؟ إذا لم يكن في ملف JS، انها حصلت على أن تكون في HTML، أليس كذلك؟ هذا هو نسخة جديدة من الملف HTML، وتلاحظ أننا أضفنا الكثير هنا. لاحظ هناك هذه الصفات الجديدة التي يقول NG-ضغطة وNG-تكرار. نهج الزاوي على حل هذه المشكلة من الصعوبات في تصميم هو جعل أساسا HTML أقوى بكثير. الزاوي هو وسيلة للسماح لك لجعل HTML إلى حد ما أكثر تعبيرا. على سبيل المثال، أستطيع أن أقول إنني ذاهب لادراك التعادل أو ربط مربع النص هذا إلى متغير داخل بلدي الزاوي شفرة جافا سكريبت. هذا الموديل نانوغرام يفعل ذلك بالضبط. أن يقول أساسا أن هذا البند داخل مربع النص هذا، مجرد الربط بين ذلك مع new_todo_description متغير ضمن شفرة جافا سكريبت. هذا هو قوي جدا لأنني لم يكن لديك للذهاب صراحة إلى وDOM للحصول على تلك المعلومات. أنا لا يجب أن أقول document.getElementByID. أنا لم يكن لديك لاستخدام jQueries مثل الوصول DOM. يمكنني ربطه مع متغير، ومن ثم عندما أقوم بتغيير هذا المتغير ضمن سكريبت أبقى ذلك متزامنا مع HTML، بحيث يبسط عملية الاضطرار للذهاب ذهابا وإيابا بين البلدين. هل هذا معقول؟ 

وتلاحظ عدم وجود رمز وصول HTML. لقد أدلى به للتو HTML أكثر قوة، والآن، على سبيل المثال، يمكننا أن نفعل أشياء مثل هذه، مثل عندما تنقر على هذا، استدعاء هذه الدالة ضمن نطاق todos.js، ويمكننا أن نفعل ذلك من قبل، ولكن هناك أشياء أخرى، مثل هذه NG-نموذج، وتلاحظ هذه NG-تكرار. ماذا كنت تعتقد أن هذا يفعل؟ وهنا لدينا قائمة غير مرتبة من قبل. لدينا علامات UL، ولكن أنا من أي وقت مضى مما يجعل تلك القائمة داخل شفرة جافا سكريبت؟ أنا لا من أي وقت مضى مما يجعل تلك القائمة بشكل صريح. كيف يعمل هذا؟ حسنا، طريقة الزاوي تنجز هذا هو وهذا ما يسمى مكرر. أساسا هذا يقول أنني أريد أن طباعة هذه HTML لكل داخل TODO من بلدي TODOS صفيف. داخل todos.jr هناك مجموعة TODOS الحق هنا، وهذا سوف اقول الذهاب الزاوي من خلال هذا الصفيف، ولكل عنصر تشاهد أريدك أن تطبع هذه HTML. هذا هو نوع من رائع لأنني أستطيع القيام بذلك فقط دون الحاجة لكتابة لحلقة، والتي لقائمة المهام التي كانت فقط 30 أسطر من التعليمات البرمجية قد لا يكون الشيء الأكثر فائدة، ولكن إذا كان لديك مشروع كبير، وهذا يمكن الحصول على مريحة للغاية. 

هذا هو حل واحد لهذه المشكلة، مما يجعل HTML أكثر قوة، والذي يسمح لنا للحفاظ على سكريبت و HTML في المزامنة. هناك طرق أخرى ممكنة لحل هذه المشكلة، وليس كل إطار يفعل هذا. لا يعمل في كل إطار على طول هذه الخطوط. بعض الأطر نهجا مختلفا، وكنت قد تجد أن تستمتع الترميز في إطار واحد على الآخر. دعونا ننظر إلى واحدة أكثر. هذه لائحة تأليف لترميز حتى في إطار تسمى العمود الفقري. انا ذاهب للذهاب من خلال هذا بسرعة. سأبدأ مع HTML قبل أن نذهب هناك. ثانية واحدة. بدءا من HTML، كما لاحظت، HTML دينا هي مشابهة جدا إلى ما كانت عليه من قبل، لذلك ليس كثيرا جديدة على هذه الجبهة. لكن ملف شبيبة لدينا هي مختلفة قليلا. نوع العمود الفقري لديه هذه الفكرة، أو يبني على فكرة أن الكثير من ما نقوم به، ويقول، ومشاريع جافا سكريبت لدينا هو التفكير في نماذج ومجموعات من هذه النماذج. هذا يمكن أن يكون، على سبيل المثال، صورة ومجموعات من الصور، أو فكرة أحد الأصدقاء ومجموعات من الأصدقاء. وكثير من الأحيان عندما نقوم برمجة تطبيقات جافا سكريبت سنقوم فرز من يمثل فكرة وجود مجموعة من الأصدقاء بطريقة أو بأخرى في جافا سكريبت، والعمود الفقري يعطينا هذه الطبقة على رأس المصفوفات والكائنات الموجودة جافا سكريبت ل أن تفعل أشياء أكثر قوة مع أن أكثر بسهولة. 

أنا هنا قمت بتحديدها نموذجا تأليف ل، وكنت لا داعي للقلق كثيرا حول بناء الجملة، ولكن لاحظت أن ما هو واحدة من خصائص هذا؟ أنه يحتوي على الحقل الافتراضي. العمود الفقري يتيح لي الفرصة لتحديد بالفعل قبالة الخفافيش أي جديد لذلك أنا خلق وستكون لدينا هذه الافتراضيات. الآن أستطيع أن تخصيص هذا، ولكن أن تكون قادرة على تحديد الإعدادات الافتراضية هو لطيف، وانها نوع من مريحة لأن هذا ليس شيئا مثل المتأصلة في جافا سكريبت، وأنا الآن لا داعي للصراحة أقول إن TODOS غير مكتملة. أستطيع أن أقول الحق قبالة الخفافيش التي TODOS ذاهبون إلى أن تكون علامة كاملة. لاحظ ثم ما هو هذا؟ الآن لدي قائمة إلى القيام به، وهذا هو جمع. لاحظ مجال يرتبط أن يقول نموذج TODO. هذه هي طريقتي في إخبار العمود الفقري الذي انا ذاهب الى أن التفكير في جمع هذه TODOS الفردية. وهذا هو الأساس لهيكل نموذج لبرنامجي. هنا لدي هذه الفكرة من مجموعة، وأساسا العناصر الواردة في ذلك جمع جميعا سوف تكون هذه TODOS، وهذا طبيعي جدا في هذا المعنى لأن لدي TODOS، ولدي منها في مجموعة. 

دعونا ننظر في أكثر قليلا من هذا. هنا نسخة العمود الفقري. الشيء الآخر أن العمود الفقري يقول هو أن الكثير من النماذج التي كنت تفكر أو حتى مجموعات سوف تحتاج إلى بعض الطريقة التي يتم عرضها. نحن بحاجة لجعل ذلك تأليف لائحة، ولن يكون ذلك جميلا إذا نحن يمكن أن توفر لكل نموذج أو المنتسبين مع كل نموذج هذا الرأي تسمح لنا أعتقد ربط اثنين معا؟ في حين قبل كان علينا أن استخدام لحلقة التي من شأنها أن تعمل من خلال كل ما يجب عمله في قائمتنا ثم طباعته هنا نحن يمكن الاتصال أساسا مع هذا النموذج. هذه نسخة تأليف ل. ويرتبط هذا مع ما يجب عمله وجدنا في وقت سابق. الآن للعرض كل ما يجب عمله أو renderable هذا إلى عرض المهام. لاحظ بعض الحقول. ماذا كنت تعتقد أن هذا tagName هو، tagName: لي؟ تذكر من قبل عندما كنا نريد لتقديم TODO سيتعين علينا أن إقران صراحة TODOS لدينا مع هذه العلامة لى. الآن نحن نقول أنه حيثما هذه TODO هو الذهاب الى العيش ستكون داخل علامة لى. ونحن الآن أيضا ربط الأحداث مع TODOS لدينا. 

كل ما يجب عمله لديه هذا حدث واحد. إذا قمت بالنقر فوق الى حد كبير زر تبديل، وهذا ما أقوله هناك، ثم وضع علامة في الأساس TODO كما عكس ما كان عليه من قبل ومن ثم إعادة تقديم الطلب. هذا هو نوع من مشابهة إلى رمز من قبل. أتذكر عندما احتفلنا أنها إما عكس أو ثم نعيد أصدرته. ولكن لاحظ الآن هذا الحدث كان ليكون شيئا ما في HTML. كان يجلس هناك. كان الزر لفي نقرة. عند النقر فوق الزر، فإنه نوع من يفعل الاشياء ل اقامة أن TODO أن تكون غير مكتملة. هنا قمنا يرتبط هذا الحدث من النقر فوق هذا الزر تبديل وعكس ما اذا كان أو إيقاف تشغيله مع هذا الرأي. 

هذه هي طريقة لطيفة لإقامة هذا الحدث بحيث انها جدا بإحكام لهذا الرأي، وهكذا تلاحظ هذا واحد أكثر. لدي هذا الأسلوب تقديم، ونحن لم يكن لديك للذهاب من خلال التفاصيل. انها نوع من غرار ما كان لدينا من قبل، ولكن لاحظ أنا لا حلقات عبر أي شيء. أنا لا تطبع هذه العلامة UL هذا النوع من يقول انا ذاهب لطباعة كل عنصر من العناصر. أنا توفير وظائف لتقديم هذا واحد لتأليف البند. هذا هو مفهوم قوي جدا لأنه في الاساس يتكون لدينا قائمة لقيام كل هذه TODOS، واذا كنا نستطيع تحديد الأساس الطريقة لتقديم واحدة من تلك TODOS ثم أننا يمكن أن يكون العمود الفقري لدينا قوية في حد ذاتها تجعل كل من TODOS بواسطة استدعاء الأسلوب تجعل على TODOS الفردية. هذا هو مفهوم يمكن أن يكون مفيدا هنا. الآن سؤال جيد لطرحه هو كيف يتم هذا التطبيق يتم وضع معا؟ لأن لدينا القدرة على تقديم ما يجب عمله واحدة، ولكن كيف نحصل على فكرة TODOS متعددة؟ 

دعونا نلقي نظرة على ذلك. هذا هو الجزء الأخير. لاحظ لدينا طريقة عرض قائمة إلى القيام به هنا، وتلاحظ انها أيضا وجهة نظر. ويذهب أكثر من بضعة أشياء، سيتم استدعاء هذا الأسلوب تهيئة عندما كنا أولا إنشاء هذه القائمة إلى القيام. كما ترون، انها مثل إنشاء قائمة إلى القيام به، وربطه مع هذا الرأي. ثم أضفت وظائف هنا وذلك أساسا عند إضافة بند- هذا هو مماثل لأسلوب AddItem شاهدنا من قبل، أنا ذاهب لإنشاء كائن TODO جديدة، وإشعار ادعو فعلا هذا الأسلوب TODO جديدة، لذلك يتم توفير ذلك من خلال العمود الفقري، وأنا يمكن أن تمر في ممتلكاتي هنا. والآن فإن كل ما يجب عمله التي أقوم بإنشائها باستخدام هذا الحصول على تلك الوظيفة التي رأينا من قبل. لاحظ أنا التخلص من مربع النص بالتفصيل تسبق قليلا صغيرة ثم أنا مضيفا هذه المجموعة. 

هذا يكاد يبدو غريبا لأنه قبل كان علينا فقط أن نفعل ذلك todos.push، ومن ثم كان علينا القيام به، وهذا قد يبدو أكثر تعقيدا لهذا المشروع بالذات، وكنت قد تجد أن العمود الفقري أو حتى سيارة أجرة أو أي إطار آخر لا تتناسب مع المشروع الخاص بك معين، لكن أعتقد أنه من المهم أن نفكر في ماذا يعني هذا على نطاق أوسع لمشاريع أكبر، لأنه إذا كان لدينا مشروع أكبر حيث كنا يمثل بعض جمع معقدة حقا، شيء أعمق من مجرد قائمة المهام، دعنا نقول قائمة الأصدقاء أو شيء من هذا القبيل، وهذا يمكن أن تأتي في متناول اليدين لأننا يمكن أن تنظم رمز لنا في وسيلة مريحة حقا، بطريقة من شأنها أن تجعل من السهل على شخص آخر الذي أراد أن تلتقط مشروع لبناء عليها. يمكنك أن ترى أن هذا يوفر الكثير من الهيكل. ثم ادعو تقديم على هذا addItem. تقدم، وكما ترون، وليس لديك لفهم هذه الجملة الكامل، ولكن أساسا لكل نموذج انه سيكون لاستدعاء الأسلوب تجعل الفرد. وهذا النوع من أين يأتي هذا من. دعونا تحديد مدى لتقديم TODOS الفردية، ثم دعونا الغراء لهم معا ككل. ولكن هذا يوفر وسيلة من التجريد، لأنني يمكن أن تغير الطريقة أقرر لتقديم TODOS الفردية، وأنا لن تضطر إلى تغيير أي من هذه التعليمات البرمجية. وهذا النوع من بارد. 

هل لدى أي شخص أي أسئلة حول الأطر جافا سكريبت؟ [طالب سؤال غير مسموع] أوه، بالتأكيد، وهذا هو السؤال الكبير. كان السؤال كيف أنا وتشمل الأطر؟ معظم الأطر جافا سكريبت هي في الأساس مجرد ملفات JS التي يمكن أن تدرج في الجزء العلوي من التعليمات البرمجية الخاصة بك. تلاحظ في جزء رئيس من HTML بلدي لدي كل هذه العلامات النصي، والعلامة النصي النهائي هو رمز أننا قد كتبت. ثم رموز الإطار 3 هي فقط أيضا علامات البرنامج النصي. أنا بما لهم من ما يسمى CDN، الذي يسمح لي للحصول عليه من شخص آخر في هذه المرحلة ولكن في كل إطار له هذا، يمكنك أن تجد الى حد كبير مضمون لمكتبة جافا سكريبت خاصة متوفرة في بعض CDN أو شيء من هذا القبيل، ومن ثم يمكن أن تشمل هذه العلامات النصي. هل هذا معقول؟ بارد. 

تلك هي 2 مناهج مختلفة. تلك ليست هي النهج الوحيد لحل هذه المشكلة. هناك العديد من الأشياء المختلفة التي شخص ما يمكن القيام به، وهناك العديد من الأطر هناك. الزاوي والعمود الفقري لا تروي القصة بأكملها. حظا سعيدا مع مشاريع النهائي الخاص بك، وشكرا جزيلا لك. [CS50.TV]