前一课小结SPA理论和工作前提，现在开始本课正题——多页网站改造为单页应用（MPA的SPA改造）。
根据前面的理论的指引，我们的改造概略以下几点：
我们再看看这个常规完整的SPA体系结构图：
服务端交换和 Model都不是必须，本课简单交互功能不需这些组件。
截至上一版本的项目实验，我们实例项目（a-wgp）的项目功能、构建系统和版本跟踪系统 都有了基本的构造，包括：
这些基础功能构造，足以满足一个 由多人协作的中小型动态网站项目 的开发。接着这一版本我们将它转换SPA，一种最基础的SPA程序构造。
作为「前端开发者」或「Web应用设计师」，对 单页应用程序（SPA）的形式[注]和逻辑结构[注]有特别细致的了解 是他的专业基础。这些基础知识，有助于作为「开发者」精确的 对（设计方案上的）某种功能设计 进行技术实现，也有助于作为「设计师」更专业的将用户需求转化具体的容易技术实现的设计方案。
注：根据被认识的主体不同（矿物和生物），形式有静态属性，和动态规律，两种；程序是种被动弱智生命；
注：逻辑结构就是质料结构（构造）
「设计案」是设计师和开发者沟通的中间媒体，「设计案」全称构造设计案，Web应用程序（WGP）的构造设计案是对项目需求文档的技术具体，是对程序源码的逻辑概述。WGP构造设计案异常的重要，其制作（由设计师）和使用（由开发者）都是以WGP理论为基础的，是它的一种应用。 
然，这里有个疑问，形式理论如何为「设计案」的基础呢？原因为，「某物理论」可指导认识和制造「某物」，以及「某物」的逻辑模型，逻辑模型就是设计案，算是某物成型的半成品。 「某物理论」可指导可举一个简单的例子，例如，GP界面程序的MVC结构模式，构件关系和构件逻辑都是基于GP理论的。
单页应用程序 发展有一段时间，然而纯粹的完整的 SPA理论[注]，我还没有读到过。本文参考《Master React 2016》的部分与SPA理论相关的内容，我以为还不错，在其基础上丰富一下。
交互页面（网页）不是一张图片、图表或绘画，但是【现代交互页】漂亮的就像一副绘画，层次分明，色彩绚丽，还能响应用户。很难想象一张二维平面作品，背后的（起点）居然是一份结构化的HTML文档。动画不说，光页面格式化和二维空间布局都很复杂，将一条“树”转为一张平面图，CSS和浏览器需要做什么。
“布局”是一种任务（描述），布就是安排，局就是位置空间；按照最新的作业观，布局任务的产出（存在）是一张二维的交互界面，包括局部交互功能组件和全局的交互页。12/19/19 12:34 PM
跨域问题和任务应该是当下前端开者常规任务之一。跨域的全称是跨域Ajax请求（Cross-Domain Ajax Requests），它与「一般Ajax请求」有什么联系呢？按「技术与任务关系」的指引，如果跨域是新的Ajax任务，那跨域请求引入什么新任务内容，又有怎样的新技术呢？
我发现，由于缺乏一种全面的抽象的指导（我指的是一种理论），很多「有关跨域编程的文章」都流于表面和解释混乱，例如本文将略译的《Using CORS for Cross-Domain Ajax Requests》，标题“使用CORS技术实现跨域请求”，CORS是不是一种技术，是谁的技术，技术完成何种任务，这都是要相关解释的，当解释下来后发现，CORS并不是种技术（下面会提到），并不是前端开发者针对跨域编程任务的技术。本文先就跨域编程的问题小结一下自己的理解，并以此作为跟随前一文，对找到有关「技术和任务理论」的新特例。文未略这篇文章作为对CORS的介绍。
最近开始离开JS核心，研习JS的一些具体应用，主要是client-side，包括事件处理模型，异步处理等。本文进入Ajax的研习，在学习的过程中，下意识的尝试总结一种快速掌握一项应用技术的理论和方法——一种学习理论，利用Ajax作为一种特殊例子，找到有关理论、技术、任务和方案之间的原理。文未略译《Basic AJAX Request: XMLHttpRequest》，作为Ajax技术的HOWTO。
Ajax，一个前端开发社区人尽皆知的技术名词，一个曾经被誉为推动Web进入新时代的关键技术，然而了解的人知道，Ajax不是个单一技术概念，它是一集相关技术的概括；随着HTML5，CSS3和JS的演化，Ajax有一点点昨日黄花的感觉，至少就Ajax这个字面，很早就outdate了。不过，Ajax所针对的问题，所完成的任务并没有过时，在当下流行的单页面程序中，Ajax所指代的任务依然重要，历久弥新。
本文略译自《JavaScript Event Delegation is Easier than You Think》。
如果你有过一点前端JS开发的经验，一定听说过事件委托（event delegation）或事件代理。这个概念听起来很高级，事实上，如果你已经熟悉如何给页面元素添加事件处理程序（event handlers），你几乎已经知道如何编写事件委托。
「JavaScript事件模型」是网页交互功能的技术基础，一般情况下，你需要一项交互功能（例如点击交互），就为交互元素安装一个事件处理程序。然而，事件处理程序的安装是会引起内存泄漏和性能下降的，你安装得越多，性能风险就越大。事件委托的目的是要「降低事件处理安装数量」，它原理就是，通过给DOM树的父元素安装单一个事件处理程序，来避免给多个子元素安装事件处理程序。
客户端（client-side）JS的代码可以在HTML标签上定义，<script>可以放在<head>内，也常常被放</body>之前，也常使用<script>的src外部引入，现代浏览器对<script>甚至支持异步（async）和延迟（defer）加载的功能……所有这些种种的JS加载，对入新手，缺乏项目经验的人，该如何选择确实是个难题。
新手困难的原因有二：
举个例子，把<script>放在被放</body>之前，与使用延迟式脚本有什么区别？该如何选择？使用何种加载方式，取决于JS脚本的任务性质（是构建交互界面、安装事件处理、还是准备交互计算），例如，脚本有构建交互页面内容（使用document.write），可使用同步加载；如果脚本主要安装事件处理函数，那完全可以使用延迟式脚本，等DOM完全初始化后再执行。
本文略译自《犀牛书》第六版，主要讲述第一个问题，文未有有关第二个问题的一些参考。