19 篇博文 含有标签「JS/HTML/CSS」

在TypeScript项目中，tsconfig.json文件指定了用来编译这个项目的根文件和编译选项，通过自定义tsconfig.json文件中的配置项，可以达到我们想要的编译结果。

tsc

当我们使用tsc命令对项目进行编译时，编译器会从当前目录开始去查找tsconfig.json文件，逐级向上搜索父目录。

下面我们将通过以下三个方面来讲述tsconfig.json配置：

• 文件选项: files、include、exclude
• 编译选项: compilerOptions
• 项目引用: extends、references

文件选项​

files​

files指定一个包含相对或绝对文件路径的列表，列举在files中的所有文件，编译器在编译时都会将它们包含在内。

// tsconfig.json
"files": [
    "src/core.ts",
    "src/index.ts",
]

当配置文件中的files字段值如上所示时，使用tsc命令编译时，src目录下的core.ts和index.ts文件会被编译为core.js和index.js文件。

有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，目前有两种方式可以实现：

• setTimeout 将函数的执行推迟到一段时间之后再执行。
• setInterval 让函数间隔一定时间周期性执行。

这两个方法并不存在于 JavaScript 的规范中。但是大多数运行环境都有内置的定时器，而且也提供了这两个方法的实现。目前来讲，所有浏览器，包括 Node.js 都支持这两个方法。

事件系统概述​

基础概念​

JavaScript 和 HTML 之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口之间发生的一些交互瞬间。可以使用侦听器（或处理程序）来监听事件，以便事情发生时执行相应的代码。

一个完整的事件系统，通常存在以下三个角色：

• 事件对象，用于储存事件的状态。
• 事件源对象，当前事件在操作的对象，如元素节点，文档对象，window 对象，XMLHttpRequest 对象等。
• 事件监听函数，当一个事件源生成一个事件对象时，它会调用相应的回调函数进行操作。

通俗点讲，事件源对象相当于”当事人“，事件监听函数相当于”监护人“，事件对象相当于”事故详情“。一个事件可以理解为，当事人出了点事，至于什么事情（被打了，还是被抢了）都记录在事故详情里，监护人根据事故详情得做出点反应（回调函数）。

查找节点​

前面四个方法除了定义在 document 对象上，还定义在 Element 上，即在元素节点上也可以调用。

querySelector()​

document.querySelector 方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

let el1 = document.querySelector('.myclass');
let el2 = document.querySelector('#myParent > [ng-click]');

Since HTML5 it’s been valid to start an HTML element ID with a number. For example <div id="10">. From an HTML perspective, that’s fine.

概览​

• Flexbox 布局语法速查手册
• Learn Flexbox with 30 Code Tidbits

• 在线编写和检验正则的网站：https://regex101.com 支持多语言切换
• freeCodeCamp: Introduction to the Regular Expression Challenges
  • 在线练习
  • 在线视频

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。