[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]