[Powered by Google Translate] [講座] [JavaScript框架：為什麼和怎麼樣？] [凱文·施密德] [哈佛大學] [這是CS50。] [CS50.TV] 

嗨，大家好。歡迎您的JavaScript框架研討會。 我的名字是凱文，今天我要談論的JavaScript框架， 本次研討會的目的是不是讓你說，掌握每一個特定的框架本身 而是給你一個廣泛的介紹一對夫婦的框架 並說明為什麼我們會永遠想使用一個框架。 

在我這樣做，我會在JavaScript中提供一點背景， 然後我們將它從那裡。 我們要開始實施一個To-Do列表。 下面是我們今天的任務列表。 這是一種有趣的。我們必須實現一個在JavaScript中的to-do列表。 這是它的樣子，所以這是我們的第一目標。 我們不打算用一個框架來做到這一點。 我們將編寫JavaScript代碼，並獲得工作的to-do列表。 那我們是要改進設計，而無需使用一個框架。 我們要討論的各種事情，我們能做的只是JavaScript獨自 使我們的To-Do列表一點點精心設計。 然後我們要去扔在一些jQuery， 然後我們要去看看在相同的to-do列表， 只是在不同的框架實現，我們將討論  沿途的利弊。 

讓我們開始實施，to-do列表。 比方說，我們給這個HTML。 我打算使這一點更小。 正如你可以看到，我有一個小的頭，說的Todo 和一個小盒子，在那裡我可以輸入一個描述待辦事項 然後一個新的項目“按鈕，讓我們嘗試進入一個新的待辦事項列表。 給一個JavaScript框架研討會， 而我創出新項目。 我得到這個的JavaScript警告說實現我。 我們已經得到了實現它。 讓我們來看看這個代碼，HTML和JavaScript的。 這裡是我們的HTML。 你可以在這裡看到，這裡的我們的小托多斯頭。 這是大膽的東西在上面， 然後我們有輸入框的佔位符， 然後有一定這按鈕調用這個函數addTodo的的屬性。 有誰要猜測這標誌著點擊？ [學生聽不見回應] 好，是有點像上點擊事件， 點擊鼠標一樣，僅僅是一個事件，我們正在做什麼 我們綁的情況下點擊這個按鈕，執行該功能。 AddTodo此事件處理程序，點擊該按鈕。 

正如你可以看到，當我點擊“新項目”按鈕 上的click事件被解僱，這個函數被調用。 讓我們來看看功能。 正如你可以看到，這裡是我的JavaScript代碼至今。 我在上面為我的to-do列表是一個全球性的數據結構。 它看起來像一個數組。這只是一個空數組。 然後我有addTodo的功能，我們在前面看到的， 只有一行代碼，在那裡是這樣的警示。 它警示實現我，然後我手頭有2個任務。 我要添加待辦事項全局數據結構， ，然後我想繪製出的to-do列表。 沒什麼特別的，只是還沒有，但JavaScript中，您可能不熟悉， 所以我打算去緩慢和審查中的JavaScript這樣的基本面。 

讓我們給這個一桿。 比方說，用戶輸入的東西在這個盒子裡。 我只是在這裡的東西，文字輸入。 我如何通過JavaScript訪問該文本排序？ 記住了JavaScript，其基本特點之一是，它為我們提供了 這一綱領性訪問DOM。 它允許我們訪問這個實際的HTML元素和它們的屬性。 我們做事的方式，與裸露的骨頭JAVASCRIPT 實際上，我們可以使用一個函數在JavaScript稱為getElementByID的。 我想存儲鍵入的文本有一些變量， 所以我會說一個新的變量new_todo 我會得到這個元素。 這是一個功能，getElementByID。 現在我得到一個元素的ID，所以我需要該文本框的ID， 所以我給它的ID new_todo_description。 這就是我要得到一個元素。 這是我的此函數的參數，以指定的ID來獲得。 並使得HTML中的一個元素，它具有屬性。 你見過這些。他們的屬性。 被調用，用於存儲用戶輸入的文本元素的屬性值。 我現在保存該文本框的值在這個變量稱為new_todo的。 現在我有這個變量的編程訪問，這是一種很酷 因為現在我能做些什麼，我可以把它添加到我的to-do列表。 

在JavaScript中，我們會做到這一點的方法，不要擔心，如果你不熟悉這個， 但只是通過todos.push的 因為這是我的全局數據結構的名稱，在這裡， 我要去推new_todo。 這是偉大的，因為現在我已經把它添加到我的JavaScript 代表性的to-do列表。 但現在我怎麼得到它的HTML？ 我一定要找到一種方式來排序，將其推回。 換句話說，我不得不得出這樣的。 我們要做的是我們要繪製的to-do列表。 我需要更新該網頁上的其他HTML， 你可以看到，我已經離開這個小容器在這裡， 這個分頻器的頁面的ID是待辦事項， 我打算把那裡的to-do列表。 首先，我將它清除出去，因為，說是一個老的to-do列表。 我理解的元素的ID再次， 我訪問該元素的內部HTML， 我要明確表示。 如果我們離開了這個代碼，我們會看到一個空白的什麼也沒有， 現在我想開始渲染我的新的to-do列表。 我基本上是要消滅我的to-do列表。 

現在的內部HTML裡面，待辦事項格是完全清楚的， 現在我需要開始添加我的清單。 第一件事情，我想補充的是無序列表標記， 這基本上表示，這是一個無序列表開始。 我想現在我的待辦事項數組中的每個元素，HTML裡面打印出來。 我想將其追加到這個列表的底部。 就像在C，我可以使用一個for循環，我要在我的清單年初開始 元素為0，而且我要去一路列表的長度。 事實上，我們可以在JavaScript中使用數組的長度屬性的長度。 基本上我要做的東西非常相似，這裡裡面 打印出該元素。 我可以再次訪問待辦事項格，內部HTML的財產， 我要去上添加這個新的清單項目，那就是要被包圍 這個li標記，我要帶“+”運算符來連接， 這就是我的待辦事項數組的第i個元素， 然後我要關閉該標籤。 現在，每一個元素，我們將添加一個新的列表項。 然後我們真正需要做的是關閉該標籤。 我只需要以關閉無序列表標記。 

你感覺如何工作？ 這將打開整個列表。 這增加了個別元素從待辦事項列表列表， 然後關閉整個列表，這是我addTodo的功能。 基本上，我開始獲得從文本框的待辦事項。 我想補充一點到待辦事項的數組，然後我重新渲染的to-do列表。 現在我可以將項目添加到我的清單。 這是一種令人興奮的，因為在短短的幾行代碼 基本上，我們已經做了一個to-do列表，在這裡我們可以添加項目。 太好了。 這是一個基本的介紹到JavaScript。 不要太擔心現在的語法， 而是去想這個概念。 我們有一些HTML。 我們有一個文本框，基本上允許用戶輸入一個做項目添加在頁面上。 然後，我們使用JavaScript來獲取該文本框，待辦事項。 我們存儲JavaScript數組裡面，基本上是像 我們的方案表示，待辦事項， 然後我們打印出來。 這是todos.js。 

這是一種很酷的，但如何才能採取進一步的？ 嗯，你可以看到，這是不是像一個完整的to-do列表。 例如，我不能標誌著這些項目不完整， 想，如果我想重新安排的項目或刪除項目。 這是好的，但我們可以藉此進一步。 我不會添加額外的功能過多談論， 但我們可以採取進一步。 讓我們來談談有關添加一個功能更to-do列表， 這是怎麼回事能夠檢查個人做項目 它劃掉了，所以基本上說我做這個。 讓我們來看看一些代碼，可以完成。 請注意，在上面我做了什麼我已經添加 一個新的全球陣列稱為完整。 我基本上都採用這種存儲To-Do列表上的項目是否 或不完整的。 這是一個辦法做到這一點。 如果我看的實現，顯示， 基本上，如果我輸入待辦事項，我按這個切換按鈕 它跨越了，所以這個名單上的每個項目都有一個完整的 或不完整的狀態，我使用另一個數組來表示。 

基本上，待辦事項數組中的每一個待辦事項 有一個完整的數組，基本上表示項目 是否是完整的或不。 我不得不對代碼的改變非常少， 所以這裡的我們的addTodo函數。 請注意，在這裡我推到陣列， 然後我推，完整陣列0， 基本上說，新的todo推平行 我加入這個項目，它加上這個值， 這意味著它是不完整的。 然後我重繪To-Do列表。 現在，請注意我已經加入這個drawTodoList的功能。 這需要花費很多我們以前的代碼， 基本上清除出箱，然後繪製新的to-do列表。 但是請注意，這裡面的for循環，我們正在做的多一點現在。 我們基本上是檢查是否對應的項目的第i個待辦事項 是完整的，我們在這2種情況下表現不同。 如果它是完整的，我們正在添加本德爾標籤， 這基本上是這樣，你可以得到滲透作用 過路的to-​​do列表，如果它是完整的， 如果它不是，我們不包括它。 所以那種需要照顧， 

來完成，這是一種方式。 然後注意到，當用戶點擊這些 我們切換的完成狀態。 當用戶點擊時，我們是否會扭轉，它已經完成或不 然後我們將重繪。 這種作品。 我們有這些功能，進行自己的任務， 這是好的。 有什麼我們可以做的更好，雖然？ 請注意，我們有2全球陣列。 如果這是C，我們有2個陣列，代表一種 排序的數據以某種方式相關 結合這2個字段，我們會用什麼在C 到的東西，它封裝了兩條信息？ 有人要提出一個建議嗎？ [學生聽不見回應] 

沒錯，所以我們可以使用某種形式的結構， 如果你想回來，說，習題集3， 記得我們有字典，然後我們有這個詞是否 在字典中，所有這些信息放在一起 內的一些數據結構。 有一件事我可以做這個代碼，以避免這2個不同的陣列 類似的作品信息，我可以將它們組合成一個JavaScript對象。 讓我們來看看這個。 請注意，我只在頂部有一個數組 我做了什麼，這僅僅是JavaScript的語法排序 創建一個文本版本的對象， 注意到有2個屬性，所以我們有待辦事項， 和它的保持在一起，無論它是完全或不完全。 這是非常相似的代碼。 我們使用的JavaScript對象。 這種提高了的東西。 就像現在，所有這些領域的相關信息放在一起。 當我們去把它打印出來，我們就可以進入的領域。 

請注意，我們正在做的待辦事項[I]。完整 而不是單獨檢查完整的數組， 注意到，當我們想要做字符串，我們正在做物業 ，待辦事項，所以這種有道理的，因為 每一個項目都有它的這些內在屬性。 它有一個待辦事項，並且它有，它是否是完整的或不。 沒有太多變化有功能，只是增加了一些更多的代碼。 這是一個在某些方面改善，對不對？ 我的意思是，我們考慮設計出位。 現在，我們基本上這個數據封裝的對象。 是否有從這裡我們可以做更多的JavaScript的事嗎？ 同樣的通知，該代碼在這裡 獲得一個div的內部HTML 是一點點，我猜，長。 有（“待辦事項”）的innerHTML。 有一件事我們可以做些什麼來使這個代碼看起來友善一點 所以我不會一直滾動左，右，來回奔波， 我可以用一個像jQuery庫。 

讓我們來看看會2 這是相同的代碼，但它與jQuery。 你可能不是太熟悉使用jQuery， 但我們知道，jQuery是排序為JavaScript庫 這使得它更容易做的事情像訪問單個元素的DOM。 在這裡，而不是說的document.getElementById（“待辦事項”）的innerHTML 我可以使用更清潔的方式在jQuery中， 這僅僅是使用選擇。 正如你可以看到，這個代碼沒有得到少許清潔劑， 非常相似的功能，但是這是這個想法。 到目前為止，我們已經看到了一對夫婦的事情， 所以我們開始只是原始的JavaScript實現。 我們增加了新的功能，並表明我們如何才能改善它與 正是我們在JavaScript。 

有誰看到這種設計任何困難？ 也就是說，我猜或不一定困難，但讓我們說 我們根本沒有做一個待辦事項列表項目，我們明天決定 我們希望做一個購物清單或購物清單項目。 很多這些功能都非常相似。 很多的事情，我們想要得到的JavaScript是很常見的， 這強調了需要某種方式 這更容易做。 我必須建立此HTML訪問，這一切訪問DOM， 像我要代表這個模型的To-Do列表。 並注意到我負責為JavaScript開發人員 保持同步，我在HTML和JavaScript。 沒有自動的JavaScript表示 或to-do列表推到HTML。 沒有強制執行，除了我。 我不得不寫抽獎待辦事項功能。 可能不是，我的意思是，它是合理的做到這一點， 但它可能是乏味的，有時。 如果你有一個更大的項目，這可能是困難的。 

框架，框架的目的之一 簡化這個過程和排序的因素出來 這些常見的，我猜你可以說設計模式 人們一般都有某種形式的數據表示方式， 是否這是一個好友列表，不管是地圖信息 要么就是一個to-do列表。 有些人普遍表示信息的一種方式， 他們一般都需要保持該信息排序同步 用戶看到的某種觀點之間， 來說的，就像你在講座上看到的模型視圖控制器， 然後模型，該模型在這種情況下，這是JavaScript數組。 框架給大家一個辦法來解決這個問題。 現在，讓我們來看看在實施這一to-do列表 的框架稱為angularjs。 這是什麼。請注意，它適合在幻燈片上。 我沒有滾動到左側和右側。 這可能是不是一個偉大的理由，建議使用一個框架， 但是請注意，我曾經訪問單個HTML元素在這裡？ 我曾經打算到DOM？ 你看不到任何的document.getElementById或類似的東西嗎？ 不，那是走了。 

角有助於我們保持DOM和代表性的東西，我們的JavaScript 一種同步，因此，如果它不是在js文件， 如果沒有編程所有的HTML內容的方式 從JavaScript，我們如何保持同步？ 如果它不是在。js文件，它必須是在HTML，對不對？ 這是新的版本的HTML文件， 注意到我們在這裡增加了很多。 注意有說點擊和NG-NG-重複這些新屬性。 角的方法來解決這個問題，在設計上的困難 是基本HTML更強大的。 角是一種方式，可以讓您在HTML有些更傳神。 例如，我可以說，我要配合或綁定該文本框中 內我角的JavaScript代碼的變量。 這納克模型做到了這一點。 這基本上說，這個文本框裡面的項目， 只是關聯，變量new_todo_description的 在JavaScript代碼。 這是非常強大的，因為我沒有明確地去 DOM來得到這些信息。 我沒有說的document.getElementById。 我不必使用jQueries像DOM訪問。 我可以聯想到一個變量，然後當我改變這個變量 在JavaScript中，它保持同步的HTML， 因此，簡化的過程中，兩者之間來回走。 這是否有意義？ 

並注意有沒有HTML訪問代碼。 我們剛剛作出了HTML更強大， 而現在，例如，我們可以做這樣的事情， 喜歡當你點擊這個，調用這個函數的todos.js範圍內， 我們可以做到這一點，但還有其他的東西，比如這個納克模型， 並注意到這個NG重複。 你覺得這樣做嗎？ 下面是我們從之前的無序列表。 我們有UL標籤， 但我沒有呈現該名單內的JavaScript代碼？ 我不會明確地呈現這一名單。 這是如何工作？ 那麼，角的方式完成，這就是所謂的中繼。 基本上說，我想打印此HTML 每一個待辦事項裡面我待辦事項陣列的。 內部todos.jr有一個待辦事項陣列就在這裡， 會告訴角度去通過該陣列，你看到的每個元素 我希望你能打印此HTML。 這是一種真棒，因為我就可以做到這一點 而無需寫一個for循環， 這對於一個待辦事項列表，只有30行代碼 未必是最有利的事情， 但如果你有一個大的項目，這可能會變得非常方便。 

這是這個問題的一個解決方案，使得HTML的更強大的， ，使我們能夠保持同步JavaScript和HTML。 還有其他可能的方法來解決這個問題， 而不是每一個框架，這樣做了。 並不是每一個框架沿著這些線路。 一些框架有不同的方法， 你會發現，你喜歡在一個框架比其他編碼。 讓我們來看看一個。 這是編寫了一個稱為骨幹框架的to-do列表。 我會去通過這個迅速。 我將開始與HTML之前，我們去那裡。 一秒鐘。 與HTML開始，你注意到，我們的HTML非常相似 它是什麼之前，所以沒有太多新在這一方面。 但是，我們的js文件是一個有點不同。 骨幹種有這樣的想法，或基礎上的想法 我們做了很多，比方說，我們的JavaScript項目 想想模型和這些模型的集合。 例如，這可能是一張照片，照片集， 或想法的朋友和收藏的朋友。 而且通常情況下，當我們的JavaScript應用程序編程 我們將整理代表的想法，有一個收藏的朋友 不知何故在JavaScript中，骨幹，為我們提供了這層 現有的JavaScript的數組和對象之上 做更強大的東西，更容易。 

在這裡，我定義了一個待辦模型， 你不必過分擔心語法， 但要注意什麼的屬性？ 它有一個默認的字段。 骨幹已經讓我指定了蝙蝠 任何新的做，我創建這些默認值。 現在我可以自定義，但可以指定默認值 是很好的，它是一種方便，因為這是不是就像 在JavaScript中固有的，現在我沒有明確 說是不完整的待辦事項。 我可以說了蝙蝠的權利，待辦事項標記為不完整。 然後請注意這是什麼？ 現在我有一個to-do列表，這是一個集合。 注意領域模型TODO說。 這是我的方式告訴骨幹 我要思考這些單個待辦事項的集合。 這基本上是我的程序的模型結構。 在這裡，我有這個想法的集合， 該集合中包含的項目基本上都被這些待辦事項， ，這是很自然的，在這個意義上 因為我做的待辦事項，我讓他們在一個集合。 

讓我們來看看多一點。 這裡是一個骨幹視圖。 骨幹說的另一件事是， 很多的車型，你想約，甚至收藏 需要有某種方式被顯示。 我們需要渲染，to-do列表， 不會是很好，如果我們能夠提供每個模型 或與每個模型視圖 我想，使我們能夠將兩者結合起來呢？ 而在此之前，我們不得不使用for循環將貫穿 每一個待辦事項列表，然後在這裡把它打印出來 基本上，我們可以將它連接這種模式。 這是一個觀點。 這與我們早期發現的待辦事項。 現在每天的待辦事項可顯示或渲染 這看法。 請注意的一些領域。 你怎麼看這個標記名，標記名：李？ 還記得前當我們想要呈現一個TODO 我們將有明確配對的的待辦事項與此li標記。 現在，我們說，這TODO去住 將是裡面的li標記。 而現在我們也關聯事件與我們的待辦事項。 

每一個待辦事項這個事件。 如果你點擊了相當多的切換按鈕，這就是我說有什麼， 然後基本上標誌著什麼之前相反的待辦事項 然後重新呈現該應用程序。 這是一種類似於之前的代碼。 記住，當我們將其標記為相反或 然後我們重新呈現。 但是請注意，現在是在HTML使用此事件。 就坐在那裡。 按鈕上點擊。 當你按一下按鈕，它做的東西 待辦事項是不完整的。 在這裡，我們點擊切換按鈕，該事件相關聯 和扭轉，無論是打開或關閉這個觀點。 

因此，它是非常緊密的結合，這是一個很好的方式，設立這個事件 這種觀點，所以注意到這一個。 我有這樣的渲染方法，我們不必去通過細節。 這是一種類似於我們以前， 但是請注意我不是遍歷什麼。 我不是說我要打印的所有元素的排序打印，UL標籤。 我提供的功能呈現一個做項目。 這是一個非常強大的概念，因為基本上 我們的to-do列表包含所有這些待辦事項，如果我們基本上可以指定 的方式來呈現這些待辦事項 那麼我們可以有我們強大的骨幹本身渲染所有的待辦事項 通過對個人待辦事項調用render方法。 這是一個概念，這裡是非常有用的。 現在要問的是一個很好的問題，這是怎麼應用程序放在一起呢？ 因為我們有能力呈現一個待辦事項， 但我們怎樣才能獲得多個待辦事項的想法？ 

讓我們來看看這個。 這是最後的部分。 請注意，我們這裡有一個to-do列表視圖， 並注意到它也是一個觀點。 走了過來一對夫婦的事情， 這個初始化方法會被調用時，我們首先創建這個To-Do列表。 正如你可以看到的，它就像創建to-do列表，並將其關聯到這個觀點。 然後我說這裡的功能，所以基本上，當你添加一個項目 這是addItem方法類似，我們看到前 我要創建一個新的todo對象，並通知我實際調用 這個新的todo方法，所以這是由骨幹， 我可以通過在這裡我的物業。 現在每天的待辦事項我創建使用該功能，我們以前看到的。 請注意，我清理出的文本框中前一個小細節 -  然後我加入這個集合。 

這幾乎似乎不可思議，因為之前我們剛剛做到這一點todos.push的， 然後我們做了，為這個特殊的項目，這可能看起來比較複雜， 你可能會發現，骨幹，甚至角或任何其他框架 不能滿足您的特定項目，但我認為重要的是要思考 這意味著什麼，在更大的規模較大的項目， 因為，如果我們有一個更大的項目，我們代表 收集一些真正複雜的，更深層次的東西不僅僅是一個to-do列表， 讓我們說一個朋友列表或類似的東西，這可能會派上用場 ，因為我們可以在一個非常方便的方式組織我們的代碼， 在某種程度上，這將使它更容易為別人 誰想要拿起建立一個項目。 你可以看到，這提供了很多結構。 然後我打電話來，呈現在此的addItem。 渲染，你可以看到，你沒有抓住這個完整的語法， 但基本上每一個模型，它會打電話給個別渲染方法。 這就是一種來自哪裡。 讓我們只指定如何呈現各個待辦事項， 然後讓它們粘合在一起作為一個整體。 但是，這提供了一種方法的抽象， 因為我可以改變我決定的方式來呈現個人待辦事項， 我也不會改變任何代碼。 這是一種很酷的。 

沒有任何人有任何關於JavaScript框架的問題嗎？ [學生聽不見的問題] 哦，當然，這是一個很大的問題。 問題我怎麼框架？ 大多數JavaScript框架基本上只是js文件 可以包含在你的代碼的頂部。 注意，在我的HTML的頭部，我有所有這些腳本標籤， 最終腳本標籤是我們寫的代碼。 然後3框架代碼也只是腳本標籤。 我包括他們從什麼叫做CDN， 這可以讓我在這一點上它從別人 但每一個框架，你幾乎可以找到的內容 對於一個特定的JavaScript庫，可在一些CDN或類似的東西， 然後你就可以包括這些腳本標籤。 這是否有意義？ 涼爽。 

這是兩種不同的途徑。 這些都不是唯一的方法來解決這個問題。 有很多不同的事情， 有人能做到，而且有很多框架在那裡。 角和骨幹不告訴整個故事。 祝你好運與您的最終項目，非常感謝你。 [CS50.TV]