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