两个月亮

实现界面自适应，避免产生窗口尺寸变化导致的空白区域，影响美观。这里我们将实现双击页面进入或退出全屏显示的效果。在三维计算机图形学中，视锥体（英语：viewing frustum）又称视景体、视锥，是三维世界中在屏幕上可见的区域，即虚拟摄像机的视野。仅改变了画布大小，并没有改变视锥体的宽高比，所以在我们更改画布大小后场景中的元素将被拉伸。

在浏览器提供 requestAnimationFrame() API 前，这类工作是通过 setInterval() 函数来进行的。现代浏览器通过 requestAnimationFrame() 函数为稳定而连续的渲染场景提供了良好的解决方案。通过 requestAnimationFrame() 函数，你可以向浏览器提供一个回调函数。你无需定义回调间隔，浏览器将自行决定最佳回调时机。你需要做的是在这个回调函数中完成每一帧的需要进行的绘制操作，然后将剩下的工作交由浏览器处理，浏览器将赋值使场景绘制尽量高效和平

Vite 采用了与 Webpack 截然不同 unbundle 机制。Vite 在将项目打包到生产环境时，使用的工具是 Rollup。因此，Vite 相比于 Webpack 的优势主要体现在开发阶段。Vite 使用原生 ESM 文件，无需打包，可以更快速的为客户提供服务。

全局前置守卫是导航守卫中的一种，是最常使用的导航守卫。全局前置守卫将在当前网站的任何页面发生跳转时触发，因此，你可以使用该守卫控制用户对某一路径的访问权限。

Vue Router 是 VueJS 官方提供的路由插件，使用该插件你将能更加便利的管理 VueJS 创建的单页面应用程序（Single Page Web Application，SPA）中的组件间的动态切换。你可以使用 a 元素代替 router-link 元素，但并不推荐这么做。使用 router-link 而不是 a 元素可以使你获得来自 vue-router 的更多帮助。

在 VueJS 中，路由可以理解为 Hash 地址 与 组件 的映射关系。由于 VueJS 构建的是单页面应用程序，在构造具有如下效果的页面时，无法直接切换页面（因为仅有一个页面），但可以通过切换组件来达到相同的效果。路由在 VueJS 及 Web 后端中的概念稍有不同，但都表示某两者之间的映射关系。锚点是网页制作中超级链接的一种，是一种能够定位当前页面的元素的超级链接。

VueJS 允许你注册自定义指令，以便封装对 DOM 元素的重复处理行为，提高代码的复用率。VueJS 中的自定义指令分为两类，即全局自定义指令及私有自定义指令。其中，私有自定义指令仅允许当前组件（定义该指令的组件）使用，而全局自定义指令允许当前项目中的任何组件使用。你可以通过终端directives节点来定义私有自定义指令。

在对组件进行封装时，我们可能需要提供一个接口，使得组件的使用者可以向该组件提供模板或其他组件以供当前组件使用，而这个接口就是插槽。在为插槽命名后，你可以通过插槽的名称向对应的插槽提供内容。如果你需要向插槽的使用者提供一些数据，那么你可以通过作用域插槽的方式向插槽的使用者提供数据。在对组件进行封装时，我们可能需要提供一个接口，使得组件的使用者可以向该组件提供模板或其他组件供当前组件使用，而这个接口就是插槽。父组件模板中的表达式只能访问父组件的作用域，子组件模板中的表达式只能访问子组件的作用域。

在组件的动态切换过程中，存在组件的生成与销毁过程。在切换组件后，原组件将被销毁。再次切换为原组件时，由于组件经历了再生成的过程，组件中的数据都将处于初始状态。在实现组件的动态切换功能时，你可能会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。我们可以使用 keep-alive 元素达成该目的。

你将能够获得该组件对应的 Vue 实例对象，这意味着父组件对子组件的每一个属性和方法都拥有有完全的访问权。虽然 Vue 的声明性渲染模型为我们抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个。密码输入框中的内容与数据达成了双向绑定，密码输入框中的内容变换将导致数据发生变化，组件将因此进入。按钮添加 “状态”，在进入生命周期函数后，我们将对。

组件从创建到销毁的这一系列过程被称为组件的生命周期。在Vue中，组件生命周期的节点会被定义为一系列的方法，这些方法称为生命周期钩子。有了这些生命周期方法，我们可以在合适的时机来完成合适的工作。下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。每一个 Vue 组件都是一个通过 Vue 构造函数创建的实例。// 使用生命周期钩子（在 DOM 节点更新前执行该函数）// 使用生命周期钩子（在 DOM 节点更新后执行该函数）

为了选择当前组件的子组件中的元素进行样式设置，先使用属性选择器选择自定义属性以指定当前组件（不同的组件 ，VueJS 为其分配的自定义属性 data-v-* 不同），再通过后代选择器选择当前组件的后代组件中的相应元素。深度选择器可以在保证不发生全局样式冲突的前提下，将父组件中的样式应用到子组件（准确来说应该是当前组件的所有后代组件）中。在使用深度选择器时，你的编辑器也许会在深度选择器下显示红色波浪线以提示开发者代码编写错误，请不要理会，深度选择器在 VueJS 中是合理的。元素中，就能够避免发生样式冲突。

组件实例的作用域是孤立的。也就是说，子组件的是无法直接获取到父组件中的数据的。VueJS 为组件开发提供了 props，通过 props ，父组件中的数据将能够传递给子组件，而子组件则需要提前对 props 进行声明以便接收父组件传递过来的数据。在对通用组件进行封装时，合理地使用 props 能够提升组件的复用性。我们可以在使用组件时，通过使用在子组件中使用 props 定义的属性来向子组件传递数据。细节驼峰式命名排斥现象HTML 是 不区分大小写的。如果在一个 HTML 元素中存在多个同名属

组件化的目的，是为了让页面中的各个部分可以被复用，以减少重复的代码。另一方面，也可以更好地使团队分工协作，让不同的人负责编写不同的组件。

在下图中，左下角的红色方块代表第一个控制点，右上角的红色方块代表第二个控制点。函数的最后一个参数我们可以获得一个可以与当前图形互补成圆形的图形。函数会将绘制的图形的首尾进行连接，所以我们仅使用。/* 使 body 元素内的元素均居中显示 *//* 设置 Canvas 元素的边框样式 */// 如需运行示例，请将后续示例代码插入此处。/* 去除部分元素的默认属性 *//* 设置圆角半径 */

服务器端接收到该数据后将在服务器中查询与该 SessionID 相关的 Session 对象并通过该对象中存储的用户信息来决定对该客户端的行为。在一个电商网站里，用户把某个商品加入到购物车，切换一个页面后再次添加了商品，这两次添加商品的请求之间没有关联，浏览器无法知道用户最终选择了哪些商品。Cookie 保存了你的登录信息，浏览器会通过域名来划分浏览器中所有的 Cookie。如果一个客户是首次登录该网页的，那么在本次登录成功后，服务器端将向客户端发送一个 Cookie ，其中保存了用户的登录信息。

出现这种现象的原因是因为预检请求共包含两次请求，一次是 options 请求，即预检请求，该请求由浏览器自动发送；一次是正式请求。CORS 的相关响应头部的前缀均为 Acess-Control-Allow 。同源策略的一个主要功能就是有效阻止可能发生的 CSRF（Cross Site Request Forgery，跨站伪造请求） 。

Canvas 元素已被大多数浏览器所支持，如果你担心旧版本浏览器无法显示 Canvas 元素，你可以在 Canvas 元素内部嵌套另一个元素（替补元素）。如果浏览器支持 Canvas 元素，则 Canvas 元素内部嵌套的另一个元素将被忽略；如果浏览器不支持 Canvas 元素，则 Canvas 元素将被忽略，而其内部的元素将正常发挥作用。，否则该元素后的元素都将被认为是 canvas 元素的替补元素。函数来为直线的绘制指定绘制的起点，那么上一条直线的终点将作为下一条直线的起点（第一条直线的起点必须使用。

在 NodeJS 对数据库进行查询等操作时 NodeJS 将正式向 MySQL 发起连接，所以通过此法可以检查数据库是否可以正常连接。在编写后端代码时，一定要注意数据与代码分离的原则。在 mysql 模块中，你可以使用 ? 来代替某个数据。在使用占位符代替数据后，请不要忘记向 mysql 模块提供需要被替代的数据。

中间件 express.urlencoded() 可以将客户端以 POST 方式提交的 application/x-www-form-urlencoded数据转换为 JavaScript 对象。比如，express.urlencoded() 可以将如下数据转换为：转换为：这个转换过程中进行了如下两个步骤：Express 模块在 4.16.0 后才添加了内置中间件 express.urlencoded() ，在该版本以前，该功能主要由 Express 的第三方中间件 body-parser 承担。如果你使用

中间件可以理解为实现某项功能的函数或是模块。在 Express 中，你可以使用一个或多个中间件来处理客户端的请求，并在最后对客户端的请求进行响应。

在 Web 中，路由可以理解为 URL 与函数的映射关系。当一个请求从客户端发送到服务器端时，都需要与已定义的路由进行匹配，当匹配成功时将调用对应的回调函数以对客户端的请求进行响应。URL 与路由匹配成功需要满足客户端发出的请求的请求类型及该请求所请求的路径均与路由相应的设置匹配成功。你可能希望为创建的路由添加一个统一的前缀，这里我们尝试为路由添加一个统一的前缀。请求的 URL 将与程序中建立建立的路由依次匹配，一旦匹配成功便停止匹配。修改后，在本示例中，访问如下链接你将得到如下响应。

Express 会自动对 URL 进行分析，并提取其中的静态 URL 参数，你可以通过 Express 提供的接口 req.params 来获取 URL 参数的分析结果。我们可以在项目根路径中创建 public 文件夹，该文件夹中的资源将被服务器托管，客户端可以对资源进行访问。

ThreeJS 是基于WebGL 封装的一个易于使用且轻量级的 3D 库，ThreeJS 对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，同时也极大地提高了性能。，如果你希望可以快速的使用 ThreeJS 官网提供的这些功能（你还可以获取例子中的源码用于学习），可以将 ThreeJS 网站的项目文件下载到本地并对其进行搭建。当然你也可以通过终端的提示，通过访问链接。在完成上述操作后，使用如下命令安装该项目可能缺少的依赖项（第三方模块或插件），这些依赖项被记录在项目中的。

html-webpack-plugin 插件可以自动地将某个路径下的文件复制到其他路径下，该文件并不会存在于物理磁盘中，在 webpack 运行过程中，该文件都将暂存于内存中，在 webpack 停止运行时，将该文件写入物理磁盘（复制的文件中所发生的修改在 webpack 中止运行后将写入原文件中）中。在对 webpack 进行配置之前，需要在项目根目录下新建 webpack 配置文件，该文件的名称为。在 webpack 结束运行前，打包后的文件都将存储在内存中，可以在项目文件根目录中访问到该文件。

由于墙的存在，部分包（NodeJS 中的第三方模块）的安装可能会十分缓慢甚至无法安装，我们可以通过将 npm 当前的安装源更换为国内的镜像源来解决这一问题。package.json** 会记录项目中所使用到的模块，在将项目文件转移到其他计算机后，你可以通过 **npm install** 来一键安装 **package.json** 所描述的包。

在 ES6 中模块将自动开启严格模式，不管你有没有在模块文件的文件头部加上 use strict; 语句。在 module 对象中存在另一个对象 exports ，该对象可用于将模块中的成员共享到其他文件中去。要共享某个成员，你仅需要将该成员定义为 module.exports 对象的方法或属性即可。在 NodeJS 中使用 require() 函数导入某个模块，实际上导入的是 module.exports 对象。

HTTP 模块是 NodeJS 中核心的内置模块，你可以通过该模块搭建 HTTP 或 HTTPS 服务器，而无需像 PHP 等服务器端语言需要其他软件（Aphche、Nginx、IIS等）提供服务器功能。使用 server.listen() 或 server.listen(0) 在目标端口被占用的情况下，使用由 NodeJS 提供的随机端口。如果随机端口仍被占用，则将继续触发错误代码为 **EADDRINUSE** 的错误，并再次使用 NodeJS 提供的随机端口，直

这是因为，NodeJS 在执行 JavaScript 文件时，会将其中的相对路径与执行命令时所在的工作目录进行拼接。前面你所认识到的问题便是路径拼接问题，该问题的解决方法有两种：1. 使用绝对路径而非相对路径指定计算机中的文件。2. 通过 NodeJS 来获取被 NodeJS 执行的文件所在的文件夹的路径与目标文件（将要读取的文件）的相对路径进行拼接得到目标文件的绝对路径。

在大多数时候，你应该使用异步方法。异步方法对开发者更为友好，并且使用异步方法也更能发挥好 NodeJS 本身的优势。但也不能对同步方法一味的排斥，在某些情况下（例如读取配置文件并启动服务器），你应该使用同步方法。

浏览器是 JavaScript 的前端运行环境，而 NodeJS 则是 JavaScript 的后端运行环境。因此，JavaScript 在 NodeJS 运行环境中无法调用 DOM 和 BOM 等浏览器内置 API；同样的，JavaScript 在浏览器提供的 JavaScript 运行环境中也无法使用 NodeJS 提供的内置 API。

Vue CLI 是 Vue.js 开发的标准工具，它简化了开发者基于 webpack 创建工程化 Vue 项目的过程。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

将 jQuery 对象转换为 DOM 对象得到的将是一个包含 DOM 对象的数组，我们还需要将 DOM 对象从这个数组中取出来。，即倡导写更少的代码，做更多的事情。可以看到控制台中打印了该 DOM 对象，DOM 对象中包含了一些列属性和方法，你可以使用它们。由于使用 jQuery 时常需要操作 DOM，所以将 jQuery 代码放入。方法将 jQuery 对象转换为 DOM 对象时我们得到了这个结果。方法，我们可以将 jQuery 对象转换为 DOM 对象。也就是说，你可以将 jQuery 代码中出现的。

当使用 data-tilt-{option} 及 VanillaTilt.init() 同时对配置选项进行设置时，将优先使用 data-tilt-{option} 提供的配置，VanillaTilt.init() 的所有配置都将失效。

仅用于指定日历应用 dyCalendarJS 提供的样式的 HTML 容器，不为 HTML 容器应用该类时，你将无法使用 dyCalendarJS 提供的样式。你可以通过为 HTML 容器添加类名来设置日历的样式（这些样式由 dyCalendarJS 提供，你也可以自由发挥为日历添加自定义样式）。在创建日历前，我们需要为 HTML 容器提供您选择的 ID。函数的对象的属性来改变日历的样式，我们将在后续对这些属性进行详细的讲解。你可以通过为 HTML 容器添加类来为日历添加阴影，类的大致格式为。

即使不适用 deep 选项，我们同样也可以侦听对象中的属性的值的变化，只不过不能使得目标对象中的多个属性触发监听器，仅目标对象中的目标属性可以触发侦听器。3. 利用 deep 选项，我们可以使得多个数据共同使用同一个侦听器（使用 deep 选项后，监听的目标对象中的属性值发生变化都将触发侦听器）。当监听的目标数据为一个对象时，对象中的属性的值发生变化并不会触发侦听器。// 当输入的文本不存在于 users 中时，我们将更改输入。// 当输入的文本不存在于 users 中时，我们将更改输入。

无论你使用过滤器函数对文本进行了怎样的操作，使用过滤器对文本进行格式化的结果都将为过滤器函数的返回值，所以在对文本进行一顿操作后，请记得将结果作为过滤器函数的返回值进行返回。Vue.filter() 接收两个参数，其中第一个参数为全局过滤器函数的名称，第二个参数则为全局过滤器的处理函数。但从这个示例中由引出了一个问题，若同时存在同名的全局过滤器及私有过滤器，含有私有过滤器会优先使用哪一个过滤器呢？私有过滤器仅能被创建该过滤器的。// 使用空格来分割获取到的文本，得到包含所有英语单词的数组对象。

Promise.catch() 与 Promise.then() 类似，Promise.catch() 仅接收一个参数，你可以为该参数提供一个实参（函数），用于指定 Promise 对象的状态为。返回了一个 Promise 对象，则 Promise.then() 返回的 Promise 对象依据此类情况（Promise 对象转换为 Promise 对象）进行判断。我们可以尝试在第二个 Promise.then() 中的调用函数中返回一个特定状态（在这个例子中需要的 Promise 对象的状态应该为。