js简单知识

关注

原创最新推荐文章于 2026-08-20 18:44:29 发布 731 阅读 AI 写同款· GEO 优化 ›

【Claude Code 实战】第十章：DevOps 与 CI/CD 集成 / 光子AI 本章摘要：探讨Claude Code在DevOps与CI/CD集成中的应用。DevOps作为现代软件工程核心，结合AI技术实现自动化全流程，从代码提交到生产部署。通过CALMS模型（文化、自动化、精益、度量、分享）解析DevOps理念，对比传统瀑布模式与DevOps模式差异，展示AI如何加速Dockerfile编写、CI/CD配置等任务。典型示例显示AI可将原本30-60分钟的手动配置缩短至1-2分钟，大幅提升DevOps效率。阅读详情

JS

js基础

初识js

html决定网页结构和内容（决定看到什么），相当于人的身体。css决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆。js实现业务逻辑和页面控制（决定功能），相当于人的各种动作。

浏览器执行js：浏览器分为两部分：渲染引擎和js引擎。

渲染引擎：用来解析html和css，俗称内核。
js引擎：也称为js解释器，用来读取网页中的js代码，对其处理后运行。
浏览器本身不会执行js代码，而是通过内置引擎来执行js代码。js引擎执行代码时逐行解释每一句源码，然后由计算机去执行，所以js语言归为脚本语言，会逐行解释执行。

组成

js由ECMAScript（语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）组成。

ECMAScript规定了js 的编程语言和基础核心知识。
DOM：通过DOM提供的接口可以对页面上的各种元素进行操作。
BOM：它提供了独立于内容的、可以于浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口。

书写位置

js有三种书写位置：行内式、内嵌式、外部。

行内式：直接写在元素的内部。
- 可读性差，不方便阅读。
- 特殊情况下才使用。
内嵌式：将代码写在script标签中。
外部：引入外部的js文件。
- <script src=""></script>
- script标签中间不能写代码。
- 适合js代码量大的情况。

在html中推荐使用双引号，但在js中推荐使用单引号。

输入输出语句

js提供的一些输入输出语句：

alert(msg)：浏览器弹出警示框。（展示给用户的
console.log(msg)：浏览器控制台打印输出信息。（给程序员测试用的
prompt(info)：浏览器弹出输入框，用户可以输入。

变量

变量是用于存放数据的容器，我们通过变量名获取数据，甚至修改数据。变量的本质是程序在内存中申请的一块用来存放数据的空间。

变量的使用：先声明再赋值。

声明变量：var age。
- var是关键字，用来声明变量，使用该关键字声明变量后，计算机会自动为变量分配内存空间。
- age是程序员定义的变量名。
- 声明多个变量只需要写一个var，多个变量名用逗号隔开。
赋值：age = 18;
变量初始化：var age = 18;

声明变量的特殊情况：

只声明不赋值：undefined。
不声明不辅助：报错。
不声明直接赋值：可以使用，但是最好不要。

变量的命名规范：

严格区分大小写。
不能以数字开头。
不能是关键字、保留字。
变量名要有意义，遵守哦驼峰命名法。
我们尽量不要直接使用name作为变量名，有些浏览器对这留有含义。

数据类型

js是一种弱类型（动态）语言，这意味着不用提前声明变量的类型，在程序运行中，类型会自动确定。js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的。js是动态语言，也同时意味着变量的数据类型可以发生改变。

js把数据类型分为两大类：简单数据类型、复杂数据类型。

简单数据类型

Number：用来保存整数值，也可以保存小数。

数字前面加0，表示八进制。例如：010换成十进制就是8。
数字前面加0x，表示八进制。
数字型的最大值：Number.MAX_VALUE，数字型的最小值：Number.MIN_VALUE。
Infinity：无穷大；-Infinity：无穷大；NaN：非数字。
- isNaN()：用来判断非数字，并且返回一个值。如果是数字则返回false，否则返回true。

String：引号里的文本（推荐就使用单引号）

引号嵌套：外单内双，外双内单。
字符串转义字符都是\开头，要写到引号里面。

Boolean：true表示1，false表示0。

undefined：如果一个变量声明未赋值，就是undefined（未定义数据类型）。

例如：var v = undefined;
- console.log(v + 'pink')，输出的是undefinedpink。
- console.log(v + 1)，输出的是NaN。

null：空值。

例如：var v = null;
- console.log(v + 'pink')，输出的是nullpink。
- console.log(v + 1)，输出的是1。

检测数据类型：typeof 变量名。

prompt取过来的值是字符型的。

数据类型转换

数字型转换成字符串型：

变量.toString()
String(变量)
变量 + ‘’(隐式转换

其他类型转换成数字型：

parseInt(变量)：字符型转换成数字型，得到的是取整的整数。
- parseInt(120px)，得到的是120，会去掉这个px单位。
- parseInt(rem120px)，不识别，得到的是NaN。
parseFloat(变量)：字符型转换成数字型，得到的是浮点数。
Number(变量)
利用了算数运算 - * / （隐式转换）

其他类型转换成布尔型：Boolean()函数。

代表空、否定值会被转换成false。如：‘’、0、NaN、null、undefined。
其余值都会被转换成true。

编译和解释语言

程序语言翻译成机器语言的工具称为翻译器，它翻译的方式有两种：编译和解释，两者区别在于翻译的时间点不同。

编译器是在代码执行之前进行编译，生成中间代码文件。（Java
解释器是在运行时进行及时解释，并立即执行。（js

运算符

浮点数在算数运算里面会有误差，不要直接判断浮点数是否相等。

==：默认转换数据类型，会把字符串型的数据转换成数字型，只需要两边值相等就是true。

===：要求两侧的值和数据类型完全一致才是true。

短路运算：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。

分支结构

三元运算符：条件表达式?表达式1:表达式2。如果条件表达式结果为真，就返回表达式1的值；如果为假就返回表达式2的值。

switch语句：通常处理case为比较确定值的情况，我们开发里面表达式经常写成变量。表达式的值和case里面的值相匹配的时候是全等，必须值和数据类型都一样。

switch(表达式){
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
    ...
    default:
        执行最后的语句;
}

循环结构

continue关键字用于立即跳出本次循环，继续执行剩余次数循环。

break用于跳出整个循环。

数组

创建数组：

var arr = new Array();
var arr = [];（用这个，简单

筛选数组中的元素：newArr[newArr.length] = arr[i];

函数

函数使用分为两步：声明函数和调用函数。

声明函数：

function 函数名(){
    函数体
}

function是关键字，必须小写。
形参可以看作是不用声明的变量。

函数形参和实参匹配问题

如果实参的个数和形参的个数一致，则正常输出结果。
如果实参的个数多于形参的个数，会取到形参的个数。
如果实参的个数少于形参的个数，多于的形参定义为undefined。

return：

后面的代码不会被执行。
返回的结果是最后一个值。
函数如果有return则返回的是return后面的值；没有return就返回undefined。

arguments的使用：当我们不确定有多少个参数传递的时候，可以用arguments来获取。在js中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

伪数组并不是真正意义上的数组，它有以下特点：

具有数组的length属性。
按照索引的方式进行存储的。
它没有真正数组的一些方法 pop() push()等。

作用域

js作用域：就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性，更重要的是减少命名冲突。

js的作用域（es6）之前：全局作用域、局部作用域。

全局作用域：整个script标签或者是一个单独的js文件。
局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用。

变量的作用域：根据作用域的不同变量分为全局变量和局部变量。

全局变量：在全局作用于下的变量，在全局下都可以使用。
- ps：如果在函数内部没有声明直接赋值的变量也属于全局变量。
局部变量：在局部作用域下的变量或者在函数内部的变量都是局部变量。
- ps：函数的形参也可以看作是局部变量。

从执行效率来看全局变量和局部变量：

全局变量只有浏览器关闭的时候才会销毁，比较占内存资源。
局部变量当我们程序执行完毕就会销毁，比较节约内存资源。

现阶段js没有块级作用域，在es6的时候新增的块级作用域。

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值。（就近原则）

预解析

js解析器运行js分为两步：预解析、代码执行。

预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面。
代码执行：按照代码书写的顺序从上往下执行。

预解析分为：变量预解析（变量提升）、函数预解析（函数提升）。

变量提升：把所有的变量声明提升到当前作用域的最前面，不提升赋值操作。
函数提升：把所有的变量声明提升到当前作用域的最前面，不调用函数。

案例：

<script>
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1(){
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        //上面的代码预解析过后是：
        f1();
        function f1(){
            var a; // 局部变量
            a = 9;
            b = c = 9; //直接赋值就是全局变量
            console.log(a); //9
            console.log(b); //9
            console.log(c); //9
        }
        console.log(c); //9
        console.log(b); //9
        console.log(a); //报错
</script>

对象

在js中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。对象是由属性和方法组成的。

属性：事物的特征（n
方法：事物的行为（v

创建对象的三种方式：字面量、new Object、构造函数。

对象字面量：就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。

<script>
        //利用字面量创建对象{}
        var obj = {
            uname: 'wld',
            age: 20,
            saiHi: function(){
                console.log('hi');
            }
        }
        //使用对象 1.采取 对象名.属性名
        console.log(obj.uname);

        //2.调用属性还有一种方法： 对象名['属性名']
        console.log(obj['age']);

        //调用对象的方法sayHi  对象名.方法名()
        obj.saiHi();
    </script>

里面的属性或者方法采取键值对的形式。键属性名: 值属性值
多个属性或者方法中间用逗号隔开
方法冒号后面跟的是一个匿名函数

new Object

//利用new Object创建对象
        var obj = new Object();
        obj.uname = 'wld';
        obj.age = 20;
        obj.saiHi = function(){
            console,log('hi');
        }

利用等号 = 赋值的方法添加对象的属性和方法
每个属性和方法之间用分号结束

构造函数：就是把对象里面一些相同的属性和方法抽象出来封装到函数里面。

前面的方式一次只能创建一个对象，因此我们可以利用函数的方法，重复这些相同的代码，里面封装的是对象。

//构造函数的语法格式
        function 构造函数名(){
            this.属性 = 值;
            this.方法 = function(){

            }
        }
        new 构造函数名();
        function Star(uname, age, sex, sang){
            this.uname = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
        }
        var wld = new Star('www', 20, '女');
        wld.sing('乐队的夏天');

构造函数名字首字母要大写
构造函数不需要return就可以返回结果
调用函数要new函数
方法和属性前面要有this

变量和属性的相同点：用来存储数据的。不同点：变量是单独声明并赋值，使用的时候直接写变量名，单独存在的；属性是在对象里面的不需要声明的，使用的时候必须是对象.属性。

函数和方法的相同点：实现某种功能。不同点：函数是单独声明，并且调用的函数名()单独存在的；方法是在对象里面的，调用的时候是对象.方法。

遍历对象：

for(var k in obj){
    console.log(k); //k 变量 输出 得到的是属性名
    console.log(obj[k]); //obj[k] 得到的是属性值
}

使用for in 里面的变量一般写k 或 key

内置对象

内置对象就是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。js提供了多个内置对象：Math、Date、Array、String等。

Math

Math数学对象不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可。

Math.max():

可以没有参数，没参数返回-Infinity
若参数中有非数字型，则返回NaN

Math.abs()：求数值的绝对值。

存在隐式转换，会把字符串型转换成数字型。例如：‘-1’会转换成-1，但是‘pink’还是返回NaN。

三个取整方法：

Math.floor()：向下取整，往小的取值。
Math.ceil()：向上取整，往大的取值。
Math.round()：四舍五入。其他数字都是四舍五入，但是**.5特殊**，它往大的取。

Math.random()：返回一个随机的小数，范围是[0,1)。

没有参数。
想要得到两个数之间的随机整数，并且包含这两个整数：Math.floor(Math.random() * (max - min + 1)) + min;

Date

Date是个构造函数，必须使用new来调用创建我们的日期对象。

new Date();

没有参数，则返回当前系统的当前时间。
参数的常用方法：数字型 2022,8,15 或者是字符串型 ‘2022-8-15 21:28:8’
- getMonth()：在返回月份时会比实际小1（0-11）
- getDay()：周一返回1，周六返回6，周日返回0（0-6）

获得Date总的毫秒数(时间戳)，不是当前时间的毫秒数，而是距离1970年1月1日的毫秒数。

先new Date()，再调用valueOf()、getTime()
最常用的方法：直接 +new Date()
H5新增的方法：Date.now()

Array

检测是否为数组：

instanceof 运算符
Array.isArray(数组名)：H5新增的，ie9以上版本支持

添加数组元素的方法：

push()：在数组的末尾添加一个或者多个数组元素。
- 参数直接写数组元素就可以了
- push完毕后，返回的结果是新数组的长度
unshift()：在数组的开头添加一个或者多个数组元素。
- 特点与push一样

删除数组元素的方法：

pop()：删除数组的最后一个元素。
- 没有参数
- 返回的结果是删除的元素
shift()：删除数组的第一个元素。
- 特点与pop一样

翻转数组：reverse();

数组排序（冒泡排序）：sort(function(a, b){

return a - b;})(a - b就是升序排列，b - a是降序)

数组索引方法：

indexOf(数组元素)：返回该数组元素的索引号，从前往后查找。
- 只返回第一个满足条件的索引号
- 找不到就返回-1
lastIndexOf()：返回该数组元素的索引号，从后往前查找。

数组转换成字符串：

toString()
join(分隔符)

contact()：连接两个或多个数组，不影响原数组，返回一个新的数组。

slice()：数组截取slice(begin, end)，返回被截取项目的新数组。

splice()：数组删除splice(第几个开始，要删除的个数)，返回被删除项目的新数组。ps：这个会影响原数组。

String

基本包装类型：就是把简单数据类型包装成为了复杂数据类型，这样基本数据类型就有了属性和方法。

1.生成临时变量，把简单类型包装成复杂数据类型。
2.赋值给我们声明的字符变量。
3.销毁临时变量。

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。

字符串对象，根据字符返回位置：index('要查找的字符',[起始的位置])

根据位置返回字符：

charAt(index)：返回元素本身
charCodeAt(index)：返回相应索引号的字符ASCII值，目的是判断用户按下了哪个键
str[index]：H5新增的

有一个对象来判断是否有该属性：对象['属性名']

字符串操作方法：

concat(str1,str2...)：用来连接两个或多个字符串，拼接字符串等效于+，+更常用。
substr(start,length)：从start开始，length取的是个数。
slice(start,end)：从start开始，截取到end位置，end取不到。
substring(start,end)：从start开始，截取到end位置，end取不到，基本和slice相同，但是不接受负值。

替换字符：replace('被替换的字符','替换为的字符')

字符转换为数组：split('分隔符')

toUpperCase()：转换大写

toLowerCase()：转换小写

数据类型内存分配

简单类型又叫基本数据类型或者值类型，复杂类型又叫做引用类型。简单数据类型 null返回的是一个空的对象。

值类型：在存储时变量中存储的是值本身。
引用类型：存储的仅仅是地址（引用）。通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等。

堆栈空间分配区别：

栈：简单数据类型放在栈里面。
堆：复杂数据类型放在堆里面。

Web API

API是为我们程序员提供的一个接口，帮组我们实现某种功能，会使用就行。

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM），现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。

DOM

简介

DOM是文档对象模型，是个标准编程接口，通过DOM接口可以改变网页的内容、结构和样式。

DOM树：（DOM把以下内容都看作是对象

文档：一个页面就是一个文档，用document表示。
元素：页面中的所有标签都是元素，用element表示。
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），用node表示。

获取元素

获取元素：getElementById()

参数 id是大小写敏感的字符串
返回的是一个元素对象
console.dir()：打印我们返回的元素对象，更好的查看里面的属性和方法。

获取某类标签元素：document.getElementsByTagName('标签名')

返回的是获取过来元素对象的集合，以伪数组的形式存储。
- 如果页面中只有一个元素对象，返回的还是伪数组的形式。
- 如果页面中没有这个元素，返回的还是伪数组的形式，只不过是空的。
依次打印里面的元素对象可以采取遍历的方式。
得到的元素是动态的
element.getElementsByTagName('标签名')：获取某个元素（父元素）内部所有指定标签名的子元素
- 父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。

通过H5新增的方法获取：

document.getElementsByClassName('类名')：根据类名返回元素对象集合。
document.querySelector('选择器')：根据指定选择器返回第一个元素对象。
- 里面的选择器需要加符号，如.box、#nav。
document.querySelectorAll('选择器')：根据指定选择器返回所有元素对象集合。

获取特殊元素（body、html）：

document.body：返回body元素对象。
document.documentElement：返回html元素对象。

事件基础

所谓的事件就是触发的响应机制。事件由三部分组成：事件源、事件类型、事件处理程序，也称为事件三要素。

事件源：事件被触发的对象。
事件类型：如何触发什么事件。比如：鼠标点击（onclick）还是鼠标经过、键盘按下。
事件处理程序：通过一个函数赋值的方式完成。

执行事件的步骤：

1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）

操作元素

改变元素内容：

element.innerText：从起始位置到终止位置的内容。
- 不识别html标签（非标准
- 去除空格和换行
element.innerHTML：起始位置到终止位置的全部内容。
- 识别html标签（W3C标准
- 保留空格和换行
这两个属性是可读写的，可以获取元素里面的内容。

修改表单属性：

表单里面的值文字内容是通过value来修改的。
如果想要某个表单被禁用，不能再点击 disabled。
- this.disabled = true; this指向的是事件函数的调用者。

样式属性操作：

element.style：行内样式操作。
- js修改style样式操作，产生的是行内样式，css权重比较高。
- js里的样式采用驼峰命名法。比如：fontSize、backgroundColor。
- 如果样式比较少或者功能简单的情况下使用。
``element.className`：类名样式操作。（添加类名
- 它会直接更改类名，会覆盖之前的类名。如果想要保留之前的类名，就在等号先写出之前的类名后面加空格再写上新的类名。（多类名选择器
- 适合样式多的情况。

获得焦点：onfocus，失去角度：onblur。

鼠标经过：onmouseover，失去角度：onmouseout。

排他思想：如果有一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法。

1.所有元素全部清除样式。
2.给当前元素设置样式。

获取属性操作：

element.属性：获取内置属性值（元素本身自带的属性）
element.getAttribute('属性')：主要获取自定义的属性（自己添加的属性）

修改属性值操作：

element.属性 = '值' ：设置内置属性值
element.setAttribute('属性','值')：主要针对于自定义的属性

移除属性：element.removeAttribute('属性')

自定义属性目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，H5新增了自定义属性：H5规定自定义属性data-开头做为属性名并且赋值。

新增的获取自定义属性的方法：element.dataset.属性名或者element.dataset['属性名']
- dataset是一个集合，里面存放了所有以data开头的自定义属性
- 如果自定义属性里面有多个-链接的单词，获取的时候必须采取驼峰命名法。
- 这个只能获取data开头的。

节点操作

一般来说，节点至少拥有nodeType、nodeName、nodeValue这三个基本属性。在实际开发中，节点操作主要操作的是元素节点。

元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodeType为3（文本节点包含文字、空格、换行等）

节点层级

父节点：parentNode

得到的是离元素最近的父节点。
如果找不到就返回null。

子节点：

获取子节点
- childNodes：获取所有的子节点。
  - 得到的所有子节点包含元素节点、文本节点等等。
  - 如果只想要获得里面的元素节点，就要专门处理。
- children：获取所有的子元素节点。（最常用的
获取第一个子节点（最后一个是last
- firstChild：返回第一个子节点，不管是元素还是文本节点。
- firstElementChild：返回第一个子元素节点
- 实际开发的写法：没有兼容性问题又返回第一个子元素
  - children[index]

兄弟节点：

下一个兄弟节点：
- nextSibling：下一个兄弟节点，包含元素节点或文本节点等等。
- nextElementSibling：下一个兄弟元素节点。
上一个兄弟节点：
- previousSibling：下一个兄弟节点，包含元素节点或文本节点等等。
- previousElementSibling：下一个兄弟元素节点。

创建和添加节点

我们想要在页面添加一个新的元素：1.创建元素 2.添加元素。

document.createElement('tagName')方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点：

node.appendChild(child)（node父级、child子级）方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素。
node.insertBefore(child,指定元素)：在指定元素前面添加child节点。

删除节点

node.removeChild(child):删除一个node的child节点，返回删除的节点。

复制节点

node.cloneNode()：返回调用该方法的节点的一个副本。

如果括号参数为空或者是false，则是浅拷贝，即只复制标签，不复制里面的内容。
参数为true，则是深拷贝，会复制节点本身和里面的内容。

三种动态创建元素的区别

document.write()：直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘。

innerHTML：创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。

createElement()：创建多个元素效率稍微低一点，但是结构更清晰。

BOM

概述

BOM是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供很多方法与属性。BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。BOM比DOM大，它包含DOM。

window对象是浏览器的顶级对象。

它是js访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法，在调用的时候可以省略window。
- window下的一个特殊属性window.name

window对象的常见事件

窗口加载事件

window.onload = function(){}或者window.addEventListener('load',function(){});是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css、文件等），就调用的处理函数。

有了这个可以把js代码写到页面元素的上方。
这种传统注册事件方式只能写一次，如果有多个，会以最后一个为准。
如果使用addEventListener则没有限制。

document.addEventListener('DOMContLoaded',function(){})：DOMContLoaded事件触发时，仅当DOM加载完成就行。

如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必须影响用户的体验，此时用这个比较合适。
load：等页面内容全部加载完毕，包含页面dom元素、图片、flash、css等。DOMContLoaded：是DOM加载完毕，不包含图片、falsh、css等就可以执行，加载速度比load更快一些。

调整窗口大小事件

window.onresize = function(){}或者window.addEventListener('resize',function(){});是调整窗口大小加载事件，当触发时就调用的处理函数。

只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。window.innerWidth是当前屏幕的宽度。

定时器

window提供了两个好用的方法：

window.setTimeout(调用函数,[延迟的毫秒数])：设置一个定时器，该定时器在定时器到期后执行调用函数。
- window调用的时候可以省略。
- 这个延迟时间单位是毫秒，但是可以省略，如果省略就默认是0。
- 这个调用函数可以直接写函数，还可以写函数名。
- 页面中可能有很多的定时器，我们经常给定时器加标识符（名字）
- 这个调用函数称为回调函数callback。
setInterval(回调函数,[间隔的毫秒数])：反复调用一个函数，每隔这个时间，就去调用一次回调函数。
- 特点与setTimeout一样。

window.clearTimeout(timeoutID)：取消先前通过调用setTimeout()建立的定时器。