[Powered by Google Translate] [Hội thảo] [Khung JavaScript: Tại sao và như thế nào] [Kevin Schmid] [Đại học Harvard] [Đây là CS50.] [CS50.TV] 

Hi, tất cả mọi người. Chào mừng bạn đến Khung hội thảo JavaScript. Tôi tên là Kevin, và hôm nay tôi sẽ nói chuyện về các khuôn khổ JavaScript, và mục tiêu của hội thảo này không phải là để có được bạn, nói, chủ một khuôn khổ cụ thể cho mỗi gia nhập nhưng để cung cấp cho bạn một giới thiệu rộng rãi với một vài khung và cho thấy lý do tại sao chúng tôi sẽ bao giờ muốn sử dụng một khuôn khổ. 

Trước khi tôi làm điều đó, tôi sẽ cung cấp một nền tảng nhỏ trong JavaScript, và sau đó chúng tôi sẽ mang nó từ đó. Chúng ta sẽ bắt đầu bằng cách thực hiện một danh sách to-do. Dưới đây là danh sách công việc của chúng tôi ngày hôm nay. Nó là buồn cười. Chúng tôi phải thực hiện một danh sách công việc phải làm trong JavaScript. Đây là những gì nó sẽ như thế nào, vì vậy đó là mục tiêu đầu tiên của chúng tôi. Chúng tôi sẽ không sử dụng một khuôn khổ để làm điều đó. Chúng tôi đang đi vào mã JavaScript và nhận được danh sách công việc phải làm để làm việc. Sau đó chúng ta sẽ cải thiện thiết kế mà không sử dụng một khuôn khổ. Chúng ta sẽ thảo luận về những điều khác nhau chúng ta có thể làm gì với chỉ một mình JavaScript để làm cho chúng tôi phải làm liệt kê một chút tốt hơn thiết kế. Sau đó chúng ta sẽ ném trong một số jQuery, và sau đó chúng ta sẽ nhìn vào cùng một việc cần làm, chỉ cần thực hiện trong khuôn khổ khác nhau, và chúng tôi sẽ thảo luận về  ưu và nhược điểm trên đường đi. 

Chúng ta hãy bắt đầu thực hiện là việc cần làm. Hãy nói rằng chúng tôi đang đưa ra HTML này. Tôi sẽ làm cho nhỏ hơn một chút này. Như bạn thấy, tôi có một tiêu đề nhỏ mà nói Todo và một hộp nhỏ nơi tôi có thể nhập một mô tả về một việc cần làm và sau đó một nút mục mới, vì vậy hãy cố gắng để nhập cần làm mới vào danh sách này. Cho một khuôn khổ hội thảo JavaScript, và tôi là để đạt mục mới. Tôi có được điều này cảnh báo JavaScript mà nói tôi thực hiện. Chúng ta phải thực hiện nó. Hãy kiểm tra mã cho điều này, cả HTML và JavaScript. Đây là HTML. Như bạn có thể thấy ở đây, đây là Todos ít tiêu đề của chúng tôi. Đó là điều đậm ở đầu trang, và sau đó chúng tôi có hộp nhập với giữ chỗ, và sau đó có một thuộc tính nào đó của nút này sẽ gọi hàm này addTodo. Không ai muốn đoán những gì mà trên nhấp chuột là nghĩa? [Sinh viên phản ứng không nghe được] Tốt, trên nhấp chuột là loại giống như một sự kiện, như cách nhấp chuột chỉ là một sự kiện, và những gì chúng tôi đang làm là chúng ta đang buộc các sự kiện của cách nhấn vào nút này để thực hiện chức năng đó. AddTodo là xử lý sự kiện này cho cách nhấp vào nút đó. 

Như bạn có thể thấy, khi tôi nhấn vào nút mục mới sự kiện click trên bị sa thải, và chức năng này được gọi là. Hãy nhìn vào chức năng. Như bạn có thể thấy, đây là mã JavaScript của tôi cho đến nay. Một cấu trúc dữ liệu toàn cầu cho danh sách công việc phải làm của tôi những gì tôi có ở trên cùng là. Nó trông giống như một mảng. Nó chỉ là một mảng trống. Và sau đó tôi có chức năng addTodo mà chúng ta đã thấy, và dòng duy nhất của mã trong đó là cảnh báo này. Nó cảnh báo thực hiện tôi, và sau đó tôi có 2 nhiệm vụ trong tầm tay. Tôi có thêm những việc cần làm cho cấu trúc dữ liệu toàn cầu, và sau đó tôi muốn đề ra các danh sách to-do. Không có gì quá lạ mắt chỉ được nêu ra, nhưng JavaScript của bạn có thể không quen thuộc với, vì vậy tôi sẽ đi chậm và xem xét các nguyên tắc cơ bản của JavaScript theo cách đó. 

Hãy cung cấp cho một shot. Hãy nói rằng người dùng nhập vào một cái gì đó trong hộp này. Tôi chỉ cần gõ một cái gì đó ở đây, văn bản. Làm thế nào để sắp xếp của truy cập văn bản thông qua JavaScript? Hãy nhớ rằng JavaScript, một trong những tính năng cơ bản của nó là nó cung cấp cho chúng tôi truy cập chương trình này vào DOM. Nó cho phép chúng ta truy cập vào các yếu tố và các thuộc tính của họ về HTML thực tế này. Cách chúng ta làm điều đó với trần xương JavaScript là chúng ta thực sự có thể sử dụng chức năng trong JavaScript được gọi là getElementById. Tôi muốn để lưu trữ các văn bản đó là đánh máy có trong một số biến, vì vậy tôi sẽ nói một biến mới tên là new_todo, và tôi sẽ có được yếu tố đó. Đây là một chức năng,. GetElementById. Và bây giờ tôi nhận được một phần tử của ID, vì vậy tôi cần ID là hộp văn bản, vì vậy tôi đã cho nó những new_todo_description ID. Đó là làm thế nào tôi sẽ nhận được một phần tử. Đó là lý luận của tôi để chức năng này, để xác định các ID để có được. Và đó là một yếu tố trong HTML, và nó có tính chất. Bạn đã nhìn thấy này. Họ là các thuộc tính. Các thuộc tính của phần tử văn bản mà các cửa hàng đầu vào của người dùng được gọi là giá trị. Tôi đã lưu các giá trị là hộp văn bản bây giờ trong biến này được gọi là new_todo. Bây giờ tôi có thể truy cập chương trình để biến này, đó là loại mát mẻ bởi vì bây giờ những gì tôi có thể làm là tôi có thể thêm vào danh sách công việc phải làm của tôi. 

Cách chúng ta sẽ làm điều này trong JavaScript và không lo lắng nếu bạn không quen với điều này, nhưng chỉ đi qua nó là todos.push bởi vì đó là tên của cấu trúc dữ liệu toàn cầu của tôi lên đây, và tôi sẽ đẩy new_todo. Điều này là rất tốt vì bây giờ tôi đã thêm nó vào JavaScript của tôi đại diện cho rằng việc cần làm. Nhưng bây giờ làm thế nào để có được nó trở lại với HTML? Tôi phải tìm một cách để sắp xếp của đẩy nó trở lại. Nói cách khác, tôi hẳn sẽ có những hình ảnh này. Những gì chúng ta sẽ làm là chúng ta sẽ rút ra những danh sách công việc phải làm. Tôi cần phải cập nhật mã HTML khác trên trang đó, và như bạn thấy, tôi đã để lại bình chứa nhỏ ở đây, chia này của trang có ID là todos, và tôi sẽ đưa danh sách công việc phải làm ở đó. Đầu tiên tôi sẽ rõ ràng nó ra bởi vì, nói rằng, đã có một tuổi để làm danh sách đó. Tôi nhận được yếu tố đó bằng ID một lần nữa, và tôi đang truy cập vào HTML bên trong của phần tử đó, và tôi sẽ rõ ràng đó. Nếu chúng ta bỏ mã này như là, chúng ta sẽ thấy một không trống đó, và bây giờ tôi muốn bắt đầu render mới danh sách công việc phải làm của tôi. Tôi về cơ bản sẽ quét sạch danh sách công việc phải làm của tôi. 

Bây giờ trong HTML bên trong mà todos div là hoàn toàn rõ ràng, và bây giờ tôi cần phải bắt đầu bổ sung thêm danh sách của tôi. Điều đầu tiên tôi muốn thêm lại là danh sách từ khóa có thứ tự, mà về cơ bản chứng tỏ rằng đây là khởi đầu của một danh sách có thứ tự. Bây giờ cho mỗi phần tử trong mảng todos của tôi, tôi muốn in nó ra bên trong HTML. Tôi muốn thêm nó vào dưới cùng của danh sách này. Cũng giống như trong C, tôi có thể sử dụng một vòng lặp, và tôi sẽ bắt đầu vào đầu danh sách của tôi tại phần tử 0, và tôi sẽ làm mọi cách để chiều dài của danh sách. Chúng tôi thực sự có thể có được chiều dài của một mảng trong JavaScript bằng cách sử dụng tài sản dài. Về cơ bản tôi sẽ làm một cái gì đó rất giống nhau bên trong đây để in ra phần tử đó. Tôi lại có thể truy cập todos div, thuộc tính HTML bên trong đó, và tôi sẽ để thêm vào danh sách mặt hàng này mới, và điều đó sẽ được bao quanh bởi thẻ li này, và tôi sẽ để nối với các nhà điều hành +, và đó là yếu tố thứ i của mảng todos của tôi, và sau đó tôi sẽ đóng thẻ đó. Bây giờ cho từng yếu tố chúng ta sẽ thêm một mục danh sách mới. Và sau đó tất cả chúng tôi thực sự cần phải làm là đóng lại thẻ đó. Tôi chỉ cần đóng kín mà không có thứ tự danh sách từ khóa. 

Để bạn có được một cảm giác về làm thế nào mà làm việc? Điều này mở ra toàn bộ danh sách. Này cho biết thêm yếu tố cá nhân trong danh sách todos vào danh sách, và sau đó là đóng cửa toàn bộ danh sách, và đây là chức năng addTodo của tôi. Tôi về cơ bản bắt đầu bằng cách nhận được việc cần làm từ hộp văn bản. Tôi thêm rằng vào mảng todos, và sau đó tôi lại hiển thị danh sách công việc phải làm. Bây giờ tôi có thể thêm các mục vào danh sách của tôi. Đây là loại thú vị bởi vì chỉ trong một vài dòng mã chúng tôi đã cơ bản thực hiện một danh sách công việc phải làm mà chúng ta có thể thêm các mục. Tuyệt vời. Đó là loại giới thiệu cơ bản cho JavaScript. Đừng lo lắng quá nhiều về cú pháp cho bây giờ, nhưng suy nghĩ về khái niệm này. Chúng tôi đã có một số HTML. Chúng tôi đã có một hộp văn bản trên trang mà người dùng về cơ bản cho phép nhập vào một mục công việc phải làm thêm. Và sau đó chúng tôi sử dụng JavaScript để lấy cần làm mà từ đó hộp văn bản. Chúng tôi lưu trữ mà bên trong một mảng JavaScript, đó là cơ bản như đại diện chương trình của chúng tôi là việc cần làm, và sau đó chúng tôi in nó ra. Đây là todos.js. 

Đây là loại mát mẻ, nhưng làm thế nào chúng ta có thể thực hiện việc này hơn nữa? Vâng, như bạn có thể thấy, đây không phải là như hoàn toàn việc cần làm. Ví dụ, tôi không thể đánh dấu bất kỳ của các mặt hàng này là không đầy đủ, giống như nếu tôi muốn reprioritize các mục hoặc xóa các mục. Điều này không quan trọng, nhưng chúng ta có thể thực hiện việc này hơn nữa. Tôi sẽ không nói quá nhiều về việc thêm các tính năng bổ sung, nhưng chúng ta có thể đi mà tiếp tục. Chúng ta hãy nói về việc thêm một tính năng nhiều hơn nữa đến việc cần làm, mà là có được có thể kiểm tra một cá nhân để làm mục và nó đã được gạch chéo, vì vậy về cơ bản nói rằng tôi đã làm điều này. Hãy nhìn vào một số mã có thể thực hiện điều đó. Thông báo những gì tôi đã làm ở đầu trang là tôi đã thêm một mảng toàn cầu mới được gọi là hoàn chỉnh. Tôi về cơ bản sử dụng điều này để lưu trữ có các mục trong danh sách to-do đầy đủ hay không. Đây là một cách để làm điều này. Nếu tôi nhìn vào việc thực hiện điều này, màn hình hiển thị, về cơ bản nếu tôi nhập vào một công việc phải làm và tôi nhấn nút này chuyển đổi nó vượt ra ngoài, vì vậy tất cả các mục trong danh sách này có cả một hoàn chỉnh hoặc nhà nước không đầy đủ, và tôi đang sử dụng mảng khác làm đại diện đó. 

Về cơ bản cho tất cả các công việc phải làm trong đó mảng todos có một mục trong mảng hoàn chỉnh về cơ bản chỉ cho dù đó là hoàn chỉnh hay không. Tôi đã thay đổi khá tối thiểu để mã này, vì vậy đây là chức năng addTodo của chúng tôi. Chú ý rằng ở đây tôi là đẩy nó vào mảng, và sau đó tôi đẩy một 0 với mảng hoàn chỉnh, về cơ bản song song với đó cần làm thúc đẩy mới để nói Tôi bổ sung thêm mặt hàng này, và nó kết hợp với giá trị này, có nghĩa là nó không đầy đủ. Và sau đó tôi vẽ lại danh sách to-do. Bây giờ, thông báo tôi đã thêm chức năng drawTodoList này. Này có rất nhiều mã chúng tôi đã có trước đây, về cơ bản xóa ra khỏi hộp và sau đó rút ra mới để làm danh sách. Nhưng nhận thấy rằng bên trong này cho vòng lặp chúng tôi đang làm một ít giờ hơn. Chúng tôi về cơ bản là kiểm tra xem các mục tương ứng với các công việc phải làm thứ i đây hoàn tất, và chúng ta đang hành xử khác nhau trong 2 trường hợp. Nếu nó hoàn thành, chúng ta đang thêm thẻ del này, mà về cơ bản là cách bạn có thể nhận được cuộc tấn công thông qua hiệu quả vượt ra khỏi danh sách công việc phải làm nếu nó hoàn thành, và nếu nó không, chúng tôi không bao gồm nó. Và để loại chăm sóc đó, 

và đó là một cách để thực hiện điều này. Và sau đó thông báo khi người dùng nhấp vào một trong những chúng tôi chuyển đổi trạng thái hoàn thành nó. Khi người dùng nhấp chuột, chúng tôi sẽ đảo ngược dù nó được hoàn thành hay không, và sau đó chúng tôi sẽ vẽ lại nó. Loại công trình. Chúng tôi có những chức năng thực hiện nhiệm vụ của mình, và điều này không quan trọng. Là có bất cứ điều gì chúng ta có thể làm tốt hơn về điều này, mặc dù? Nhận thấy chúng tôi có những 2 mảng toàn cầu. Nếu điều này là C, và chúng tôi đã có 2 mảng là loại đại diện dữ liệu đã được loại liên quan một cách nào đó những gì chúng ta sẽ sử dụng trong C để kết hợp các lĩnh vực 2 vào một cái gì đó mà gói gọn cả hai phần của thông tin? Bất kỳ ai muốn thực hiện một đề nghị? [Sinh viên phản ứng không nghe được] 

Chính xác, vì vậy chúng tôi có thể sử dụng một số loại cấu trúc, và nếu bạn nghĩ lại, nói, pset 3, nhớ là chúng tôi đã có từ điển, và sau đó chúng tôi đã có từ là trong từ điển, và tất cả các thông tin đã được đặt lại với nhau trong một số cấu trúc dữ liệu. Một điều tôi có thể làm với mã này để tránh có những 2 mảng khác nhau cho điểm giống nhau về thông tin là tôi có thể kết hợp chúng thành một đối tượng JavaScript. Chúng ta hãy nhìn vào đó. Thông báo tôi chỉ có một mảng ở đầu giờ và những gì tôi đã thực hiện được và điều này chỉ là cú pháp JavaScript cho loại tạo ra một phiên bản đen của một đối tượng, và nhận thấy có 2 tài sản, vì vậy chúng tôi có việc phải làm, và nó được lưu giữ cùng với cho dù đó là đầy đủ hoặc không đầy đủ. Đây là mã rất giống nhau. Chúng tôi đang sử dụng các đối tượng JavaScript. Loại thứ cải thiện. Như bây giờ, tất cả các lĩnh vực thông tin liên quan được lưu giữ cùng. Khi chúng tôi đi để in nó ra, chúng ta có thể truy cập vào các lĩnh vực. 

Hãy chú ý cách chúng ta đang làm todos [i]. Hoàn chỉnh thay vì kiểm tra các mảng hoàn toàn riêng biệt, và thông báo khi chúng tôi muốn có được những chuỗi công việc phải làm, chúng tôi đang nhận được tài sản phải làm trong đó cần làm, vì vậy loại này có ý nghĩa bởi vì tất cả các mục có các đặc tính nội tại về nó. Nó có một việc phải làm, và nó có cho dù đó là hoàn toàn hay không. Không có quá nhiều thay đổi về chức năng, chỉ cần thêm một số chi tiết để mã. Đây là một sự cải tiến trên một số mặt trận, phải không? Ý tôi là, chúng ta yếu tố ra các thiết kế một chút. Bây giờ chúng ta có các đối tượng về cơ bản đóng gói dữ liệu này. Là có bất cứ điều gì hơn chúng ta có thể làm từ đây về JavaScript? Giống như thông báo rằng mã này ngay tại đây để nhận được HTML bên trong của một div là một chút, tôi đoán, dài. Có innerHTML là document.getElementById ("todos").. Một điều chúng ta có thể làm để làm cho mã này nhìn một chút thân thiện vì vậy tôi sẽ không phải tiếp tục di chuyển sang trái và phải, qua lại, là tôi có thể sử dụng một thư viện như jQuery. 

Hãy kiểm tra Hội thảo 2, và đây là mã tương tự, nhưng nó được thực hiện với jQuery. Bạn có thể không quá quen thuộc với jQuery, nhưng chỉ biết rằng jQuery là sắp xếp của một thư viện JavaScript mà làm cho nó dễ dàng hơn để làm những việc như các yếu tố cá nhân truy cập của DOM. InnerHTML đây thay vì nói document.getElementById ("todos"). Tôi có thể sử dụng cách sạch hơn trong jQuery, mà chỉ là sử dụng bộ chọn. Như bạn thấy, mã này đã nhận được một chút sạch hơn, tương tự như chức năng, nhưng đó là ý tưởng. Chúng tôi đã nhìn thấy một vài điều cho đến nay, vì vậy chúng tôi bắt đầu với việc thực hiện JavaScript chỉ thô. Chúng tôi đã thêm tính năng mới và cho thấy cách chúng tôi có thể cải thiện nó với chỉ là những gì chúng tôi có trong JavaScript. 

Không ai nhìn thấy bất kỳ khó khăn với thiết kế này? Cụ thể là, tôi đoán hoặc không nhất thiết phải là khó khăn nhưng chúng ta hãy nói chúng tôi đã không làm một dự án danh sách công việc phải làm, và ngày mai chúng tôi quyết định chúng tôi muốn tạo ra một danh sách tạp hóa hoặc một dự án danh sách mua sắm. Rất nhiều các tính năng này rất giống nhau. Rất nhiều những điều chúng ta muốn có được ra khỏi JavaScript là rất phổ biến, và điều này nhấn mạnh sự cần thiết đối với một số loại đường làm cho điều này dễ dàng hơn để làm. Tôi đã xây dựng tất cả các truy cập HTML này, tất cả các truy cập DOM này, như tôi sẽ đại diện cho danh sách công việc phải làm với mô hình này. Và thông báo tôi chịu trách nhiệm như các nhà phát triển JavaScript để giữ cho HTML và JavaScript mà tôi có trong đồng bộ. Không tự động thực hiện mà hiện JavaScript hoặc danh sách công việc phải làm được đẩy ra HTML. Không thực thi rằng ngoại trừ tôi. Tôi đã phải viết vẽ to-do list chức năng. Và có thể không-Ý tôi là, đó là hợp lý để làm điều đó, nhưng nó có thể là tẻ nhạt đôi khi. Nếu bạn có một dự án lớn hơn, đó có thể là khó khăn. 

Khuôn khổ, một trong những mục đích của các khuôn khổ là để đơn giản hóa quá trình và loại yếu tố ra các chung tôi đoán bạn có thể nói mẫu thiết kế mà mọi người thường có một số loại cách đại diện cho dữ liệu, cho dù đó là một danh sách bạn bè, cho dù đó là thông tin bản đồ hoặc một cái gì đó hoặc một danh sách công việc phải làm. Một số người có chung một cách để đại diện cho thông tin, và họ thường cần phải giữ thông tin loại đồng bộ giữa những gì người dùng thấy trong một số loại xem, nói về như bộ điều khiển xem mô hình mà bạn đã thấy trong bài giảng, và sau đó mô hình, mà trong trường hợp này là mảng JavaScript này. Khuôn khổ cho chúng ta một cách để giải quyết vấn đề đó. Bây giờ chúng ta hãy nhìn vào việc thực hiện này cần làm trong một khuôn khổ gọi là angularjs. Đây là nó. Nhận thấy nó phù hợp trên một slide. Tôi không cần phải di chuyển bên trái và bên phải. Điều đó có lẽ không phải là một lý do tuyệt vời để khuyên bạn sử dụng một khuôn khổ, nhưng thông báo tôi bao giờ truy cập vào các phần tử HTML cá nhân đây? Có bao giờ tớ vào DOM? Bạn có thấy bất kỳ document.getElementById hoặc một cái gì đó như thế? Không, đó là đi. 

Góc giúp chúng ta giữ cho DOM và đại diện JavaScript của chúng ta về một cái gì đó loại đồng bộ, vì vậy nếu nó không có trong các tập tin js, nếu không có cách lập trình để nhận được tất cả những nội dung HTML từ JavaScript làm sao chúng ta giữ này đồng bộ? Nếu nó không có trong file. Js, nó đã nhận được trong HTML, phải không? Đây là phiên bản mới của tập tin HTML, và nhận thấy chúng tôi đã thêm rất nhiều ở đây. Nhận thấy có những thuộc tính mới mà nói ng nhấp chuột và ng-lặp lại. Cách tiếp cận góc để giải quyết vấn đề này khó khăn trong thiết kế là cơ bản làm cho HTML mạnh hơn rất nhiều. Góc là một cách cho phép bạn thực hiện HTML hơi biểu cảm hơn. Ví dụ, tôi có thể nói rằng tôi sẽ buộc hoặc gắn hộp văn bản này cho một biến trong mã JavaScript góc của tôi. Này ng mô hình hiện điều đó. Nói về cơ bản mà bên trong hộp văn bản này mục, chỉ liên kết đó với new_todo_description biến trong mã JavaScript. Đó là rất mạnh mẽ bởi vì tôi không cần phải đi đến một cách rõ ràng DOM để có được thông tin đó. Tôi không cần phải nói document.getElementById. Tôi không cần phải sử dụng jQueries như truy cập DOM. Tôi có thể kết hợp nó với một biến, và sau đó khi tôi thay đổi điều đó biến trong JavaScript nó giữ đồng bộ với HTML, để đơn giản hoá quá trình phải đi qua lại giữa hai người. Điều đó có ý nghĩa? 

Và nhận thấy không có mã truy cập HTML. Chúng tôi đã chỉ cần thực hiện HTML mạnh mẽ hơn, và bây giờ, ví dụ, chúng ta có thể làm những việc như thế này, giống như khi bạn click vào đó, gọi chức năng này trong phạm vi todos.js, và chúng ta có thể làm điều đó trước đây, nhưng có những thứ khác, như thế này ng mô hình, và thông báo này ng-lặp lại. Làm những gì bạn nghĩ rằng điều này không? Dưới đây là danh sách không có thứ tự từ trước. Chúng tôi có các thẻ ul, nhưng tôi bao giờ khiến danh sách đó bên trong mã JavaScript? Tôi không bao giờ vẽ một cách rõ ràng danh sách đó. Làm thế nào để làm việc này? Vâng, cách thực hiện việc này là góc này được gọi là một lặp lại. Về cơ bản này nói rằng tôi muốn in HTML này cho tất cả các công việc phải làm trong mảng todos của tôi. Bên trong todos.jr có một mảng todos ngay tại đây, và điều này sẽ cho góc đi qua mảng đó, và cho tất cả các yếu tố mà bạn nhìn thấy Tôi muốn bạn in HTML này. Đây là loại tuyệt vời vì tôi chỉ có thể làm điều này mà không cần phải viết một vòng lặp, mà đối với một danh sách công việc phải làm đó là chỉ có 30 dòng mã có thể không phải là điều có lợi nhất, nhưng nếu bạn có một dự án lớn, điều này có thể nhận được rất thuận tiện. 

Đây là một giải pháp cho vấn đề này, làm cho HTML mạnh mẽ hơn, và cho phép chúng ta giữ JavaScript và HTML đồng bộ. Có nhiều cách khác có thể giải quyết vấn đề này, và không phải tất cả khuôn khổ thực hiện điều này. Không phải mọi khuôn khổ hoạt động dọc theo những dòng. Một số khuôn khổ có cách tiếp cận khác nhau, và bạn có thể thấy rằng bạn thích mã hóa trong một khuôn khổ trong khác. Hãy xem xét một lần nữa. Đây là danh sách công việc phải làm mã hóa trong một khuôn khổ gọi là đường trục. Tôi sẽ đi qua này một cách nhanh chóng. Tôi sẽ bắt đầu với HTML trước khi chúng tôi đến đó. Thứ hai. Bắt đầu với HTML, như bạn thấy, HTML của chúng tôi là rất tương tự với những gì nó đã được trước đó, vì vậy không quá nhiều mới trên mặt trận này. Nhưng tập tin js của chúng tôi là một chút khác nhau. Loại có xương sống của ý tưởng này, hoặc xây dựng trên ý tưởng mà rất nhiều những gì chúng tôi làm với, nói, dự án JavaScript của chúng tôi là suy nghĩ về mô hình và bộ sưu tập các mô hình này. Điều này có thể, ví dụ, một bức ảnh và bộ sưu tập các bức ảnh, hoặc ý tưởng của một người bạn và các bộ sưu tập của bạn bè. Và đôi khi chúng ta đang lập trình các ứng dụng JavaScript chúng tôi sẽ sắp xếp của đại diện các ý tưởng có một bộ sưu tập của bạn bè bằng cách nào đó trong JavaScript, và xương sống cho chúng ta lớp này trên đầu trang của các mảng và các đối tượng hiện có JavaScript để làm những điều mạnh mẽ hơn với điều đó dễ dàng hơn. 

Ở đây tôi đã xác định một mô hình-do, và bạn không cần phải lo lắng quá nhiều về cú pháp, nhưng nhận thấy đó là những gì một trong những thuộc tính của điều này? Nó có một lĩnh vực mặc định. Xương sống cho phép tôi để xác định đã lập tức bất kỳ mới phải làm mà tôi tạo ra là sẽ có những mặc định. Bây giờ tôi có thể tùy chỉnh này, nhưng có thể chỉ định giá trị mặc định là tốt đẹp, và đó là loại thuận lợi bởi vì đây không phải là một cái gì đó như vốn có trong JavaScript, và bây giờ tôi không cần phải rõ ràng nói rằng todos chưa đầy đủ. Tôi có thể nói ngay lập tức mà todos sẽ được đánh dấu là không đầy đủ. Nhận thấy thì đây là những gì? Bây giờ tôi có một danh sách công việc phải làm, và đó là một bộ sưu tập. Thông báo các lĩnh vực liên quan đến nói rằng mô hình cần làm. Đây là cách của tôi nói rằng Backbone Tôi sẽ phải suy nghĩ về một bộ sưu tập các todos cá nhân. Điều này về cơ bản là cấu trúc mô hình cho chương trình của tôi. Ở đây tôi có ý tưởng này của một bộ sưu tập, và về cơ bản các mục có trong bộ sưu tập đó là tất cả sẽ là những todos, và đó là rất tự nhiên trong ý nghĩa này bởi vì tôi có todos, và tôi có chúng trong một bộ sưu tập. 

Hãy xem xét một chút về điều này. Đây là một cái nhìn Backbone. Một thứ khác mà Backbone nói là rất nhiều các mô hình mà bạn đang suy nghĩ về hoặc thậm chí bộ sưu tập sẽ cần phải có một số cách được hiển thị. Chúng ta cần phải làm đó để làm, và nó sẽ không được tốt đẹp nếu chúng tôi có thể cung cấp cho mỗi mô hình hoặc liên kết với mỗi mô hình điểm này cho phép chúng ta tôi đoán kết nối hai cùng nhau? Trong khi đó, trước khi chúng tôi đã phải sử dụng một vòng lặp mà có thể chạy thông qua tất cả các việc cần làm trong danh sách của chúng tôi và sau đó in ra đây chúng tôi về cơ bản có thể kết nối nó với mô hình này. Đây là một cái nhìn công việc phải làm. Điều này có liên quan đến các việc cần làm, chúng tôi tìm thấy trước đó. Bây giờ mọi việc cần làm là bày hoặc renderable bằng cách này để làm điểm. Nhận thấy một số các lĩnh vực. Bạn nghĩ gì tagName này là, tagName: li? Nhớ từ trước khi chúng tôi muốn làm một việc cần làm chúng ta sẽ phải ghép một cách rõ ràng todos của chúng tôi với thẻ li này. Bây giờ chúng ta đang nói rằng nơi cần làm này sẽ sống là có được bên trong một thẻ li. Và bây giờ chúng tôi cũng đang liên kết các sự kiện với todos của chúng tôi. 

Tất cả các việc cần làm có sự kiện này một. Nếu bạn bấm khá nhiều nút chuyển đổi, đó là những gì tôi nói có, sau đó về cơ bản đánh dấu sự cần làm như trái ngược với những gì nó đã được trước và sau đó lại làm cho các ứng dụng. Đây là loại tương tự như mã trước. Nhớ khi chúng ta đánh dấu nó như là ngược lại hoặc- và sau đó chúng tôi lại trả lại nó. Nhưng hãy chú ý tại sự kiện này là một điều đó là trong HTML. Nó đang ngồi ở đó. Nút có một trên nhấp chuột. Khi bạn nhấp vào nút, nó loại nào công cụ để thiết lập mà cần làm là không đầy đủ. Ở đây chúng tôi đã kết hợp sự kiện của cách nhấp vào nút chuyển đổi và ngược lại cho dù đó là trên hoặc tắt với quan điểm này. 

Đây là một cách tốt đẹp của việc thiết lập sự kiện này để nó rất ràng buộc chặt chẽ quan điểm này, và do đó nhận thấy một điều này hơn. Tôi có khiến phương pháp này, và chúng tôi không cần phải đi qua các chi tiết. Đó là loại tương tự như những gì chúng ta có trước đây, nhưng nhận thấy tôi không vòng lặp thông qua bất cứ điều gì. Tôi không in mà thẻ ul đó là loại nói tôi sẽ in tất cả các yếu tố. Tôi đang cung cấp các chức năng để biểu diễn này để làm mục. Đây là một khái niệm rất mạnh mẽ bởi vì về cơ bản danh sách công việc phải làm của chúng tôi bao gồm tất cả các todos, và nếu chúng ta về cơ bản có thể xác định cách để làm cho một trong những todos sau đó chúng ta có thể có xương sống mạnh mẽ của chúng tôi cho mỗi gia nhập làm cho tất cả các todos bằng cách gọi phương pháp vẽ lại trên các todos cá nhân. Đây là một khái niệm đó là hữu ích ở đây. Bây giờ một câu hỏi hay để hỏi là làm thế nào là ứng dụng này được đặt lại với nhau? Bởi vì chúng tôi có khả năng làm một việc phải làm, nhưng làm thế nào để chúng ta có được ý tưởng của nhiều todos? 

Chúng ta hãy nhìn vào đó. Đây là phần cuối cùng. Nhận thấy chúng tôi có một danh sách xem việc phải làm ở đây, và nhận thấy nó cũng là một quan điểm. Và phải đi qua một vài điều, phương thức khởi tạo này sẽ được gọi khi chúng tôi lần đầu tiên tạo ra danh sách to-do này. Như bạn thấy, nó giống như việc tạo ra các danh sách công việc phải làm và kết hợp nó với quan điểm này. Và sau đó tôi được thêm vào các chức năng ở đây về cơ bản khi bạn thêm một mục- điều này cũng tương tự như phương pháp addItem chúng ta đã thấy trước- Tôi sẽ tạo một đối tượng cần làm mới, và thông báo tôi đang thực sự kêu gọi phương pháp này cần làm mới, vì vậy đây được cung cấp bởi Backbone, và tôi có thể vượt qua trong tài sản của tôi ở đây. Và bây giờ mọi việc cần làm mà tôi tạo bằng này sẽ nhận được rằng chức năng mà chúng ta đã thấy trước đây. Thông báo tôi đang thanh toán bù trừ ra khỏi hộp văn bản trước-một chút nhỏ chi tiết- và sau đó tôi thêm bộ sưu tập này. 

Điều này gần như có vẻ lạ vì trước khi chúng tôi chỉ phải làm todos.push đó, và sau đó chúng tôi đã được thực hiện, và điều này có vẻ phức tạp hơn đối với dự án này, và bạn có thể thấy rằng đường trục hoặc thậm chí góc hoặc bất kỳ khuôn khổ khác không phù hợp với dự án cụ thể của bạn, nhưng tôi nghĩ rằng điều quan trọng là phải suy nghĩ về điều này có nghĩa là trên một quy mô lớn hơn cho các dự án lớn hơn, bởi vì nếu chúng tôi đã có một dự án lớn hơn, nơi chúng tôi đã đại diện cho một số bộ sưu tập thực sự phức tạp, một cái gì đó sâu sắc hơn chỉ là một danh sách công việc phải làm, hãy nói một danh sách bạn bè hoặc một cái gì đó như thế, điều này có thể có ích bởi vì chúng tôi có thể tổ chức mã của chúng tôi trong một cách thực sự thuận tiện, trong một cách mà sẽ làm cho nó dễ dàng hơn cho người khác ai muốn nhận một dự án xây dựng trên. Bạn có thể thấy rằng điều này cung cấp rất nhiều cấu trúc. Và sau đó tôi gọi điện thoại làm cho trên addItem này. Làm, bạn có thể thấy, và bạn không cần phải nắm bắt đầy đủ cú pháp này, nhưng về cơ bản cho mỗi mô hình nó sẽ gọi phương thức vẽ lại cá nhân. Đó là sắp xếp của nơi này đến từ đâu. Chúng ta hãy xác định làm thế nào để làm cho todos cá nhân, và sau đó chúng ta hãy dán chúng lại với nhau như một toàn thể. Nhưng cung cấp một cách trừu tượng, vì tôi có thể thay đổi cách tôi quyết định làm cho todos cá nhân, và tôi sẽ không phải thay đổi bất kỳ của mã này. Đó là loại mát mẻ. 

Không ai có bất kỳ câu hỏi về các khuôn khổ JavaScript? [Sinh viên không nghe được câu hỏi] Oh, chắc chắn, đó là một câu hỏi lớn. Câu hỏi đặt ra là làm thế nào tôi bao gồm các khuôn khổ? Hầu hết các khuôn khổ JavaScript cơ bản chỉ là các file js mà bạn có thể bao gồm ở trên cùng của mã của bạn. Thông báo trong phần đầu của HTML của tôi, tôi có tất cả những thẻ script, và thẻ kịch bản cuối cùng là mã mà chúng tôi đã viết. Và sau đó là 3 mã số khuôn khổ chỉ còn thẻ script. Tôi là bao gồm cả chúng từ những gì được gọi là một CDN, cho phép tôi để có được nó từ một người khác vào thời điểm này nhưng mỗi khung có này, bạn có thể tìm thấy khá nhiều nội dung cho một thư viện JavaScript đặc biệt có sẵn trên một số CDN hoặc một cái gì đó như thế, và sau đó bạn có thể bao gồm các thẻ script. Điều đó có ý nghĩa? Mát mẻ. 

Đó là 2 phương pháp tiếp cận khác nhau. Đó không phải là cách tiếp cận duy nhất để giải quyết vấn đề này. Có rất nhiều điều khác nhau mà ai đó có thể làm, và có rất nhiều khuôn khổ ra khỏi đó. Góc cạnh và đường trục không nói cho toàn bộ câu chuyện. Chúc may mắn với các dự án cuối cùng của bạn, và cảm ơn bạn rất nhiều. [CS50.TV]