深入理解 JS ｜青训营笔记

2023-05-01 85 阅读3分钟

JavaScript 变量

JS 是弱变量类型的语言，变量只需要用 var/let/const 来声明。而 Java 中变量的声明，要根据变量的类型来定义。

// ES5 写法
var a;

// ES6 写法
const a;
let a;
复制代码
复制代码

JavaScript 组成

JavaScript 总体分为三个部分：

ECMAScript：JavaScript 的语法标准。包括变量、表达式、运算符、函数、if 语句、for 语句等。
DOM：Document Object Model（文档对象模型），JS 操作页面上的元素（标签）的 API。比如让盒子移动、变色、改变大小、轮播图等等。
BOM：Browser Object Model（浏览器对象模型），JS 操作浏览器部分功能的 API。通过 BOM 可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。

通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 是浏览器运行环境为 JS 提供的 API。

引入 JavaScript 代码

引入 JS 代码，有三种方式，这与和 CSS 的引入方式类似

行内式：写在标签内部。
内嵌式（内联式）：写在 head 标签中。
外链式：引入外部 JS 文件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <!-- 外链式：引入外部的 js 文件：这个 utils.js 文件与当前的 html 文件，处于同一级目录 -->
        <script src="utils.js"></script>
    </body>
</html>
复制代码
复制代码

这段代码，JavaScript 文件被放到了 body 标签里，可以和内嵌的 JS 代码并列。上方代码的 script 标签已经引入了外部 JS 文件，所以这个标签里面，不可以再写 JS 代码。

在实战开发中，基本都是采用外链式。因为将 html 文件和 js 文件分开的方式，有利于代码的结构化和复用，符合高内聚、低耦合的思想。

过程抽象

用来处理局部抽象细节控制的一些方法
函数式编程思想的基础应用
Once
为了能够让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象
HOF
- 以函数为参数
- 以函数作为返回值
- 常用于作为函数装饰器

编程范式

命名式
声明式：是以数据结构的形式来表达程序执行的逻辑。即告诉计算机应该做什么，但不指定具体要怎么做
函数式：以函数为第一位，即函数可以出现在任何地方，可以把函数作为参数传递给另一个函数，即关注做什么而不是怎么做。

JavaScript 输出语句

alert()语句
- 弹出“警告框” 。它会在弹窗中显示一条信息，并等待用户按下 “OK”。
confirm()语句
- 代码运行后，页面上会显示一个弹窗。弹窗上有“确认”和“取消”两个按钮，点击“确定”返回 true，点击“取消”返回 false。
prompt()语句
- prompt()就是专门弹出能够让用户输入的对话框。
document.write()语句
- 网页内容区域输出
console.log() 打印日志
- console.log()表示在控制台中输出。在 Chrome 浏览器中，按 F12 即可打开控制台，选择「console」栏，即可看到打印的内容。