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