前端笔记1

最新推荐文章于 2024-04-14 09:17:41 发布

我是一只蘑菇17

最新推荐文章于 2024-04-14 09:17:41 发布

阅读量994

点赞数

分类专栏：前端文章标签： html5 css javascript

本文链接：https://blog.csdn.net/weixin_46806288/article/details/118991995

版权

前端专栏收录该内容

104 篇文章 9 订阅

订阅专栏

1.@click.stop与@click.prevent

@click.stop 阻止事件冒泡

@click.prevent 阻止事件的默认行为，

2.push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

3.viewport:

在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其他值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条。

4.css中的1px并不等于设备的1px，分辨率越高像素越高

用户缩放也会引起css中px的变化

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixeIRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，css中的px可以看做设别的独立像素

5.所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，第二，显示的文字大小是合适的

所有iphone的ideal viewport宽度都是320px,无论他的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度

ideal viewport的宽度等于移动设备的屏幕宽度

6.<meta name=”viewport” content=”width=device-width,user-scalable=0”>

该meta标签的作用是让当前viewport的宽度等于设备宽度，同时不允许用户手动缩放

7.input-autocomplate属性规定输入字段是否应该启用自动完成功能

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前入过的值，应该显示出在字段中填写的选项

8.双核浏览器：基于Webkit的内核用于常用网站的告诉浏览，基于IE的内核主要用于部分网银，政府，办公系统等网站的正常使用

内核控制标签，兼容

9.<meta http-equiv="x-UA-Compatible" content="IE=Edge">

这句代码可以改变360兼容模式下以何种版本的IE去渲染页面

10.<meta name="apple-mobile-web-app-capable" content="yes">

显示工具栏和菜单栏，Web应用会以全屏模式运行，可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示

11.<meta name="format-detection" content="telephone=no">

当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接

12.springboot+vue

·npm install -g cnpm --registry=https://registry.npm.taobao.org(安装淘宝镜像)

·cnpm install(安装依赖)

npm run dev(运行),然后访问: http://localhost:8080/

13.vue

cd进入一个文件，vue init cc wj-vue, 这里是以cc 为模板指生成项目，

报错则npm install依赖，运行运行npm run dev

14.

.index.js中路由的方法

import Index from '@/components/index'
import Updateshu from '@/components/updateshu'

Vue.use(Router)

const routes = [
{
   path:'/',
   name:'图书管理',
   component: Index,
show:true,
redirect:'/pageOne',
children:[
   {
     path:'/pageOne',
   name:'查询图书',
     component: PageOne
   },
   {
     path:'/pageTwo',
     name:'添加图书',
     component: PageTwo
   }
]
},
{
path:'/updateshu',
component:Updateshu,
show:false
}
children实现嵌套路由地作用

第一个对象是配置路由重定向path:’/’为项目的根目录，redirect重定向为渲染的路径（这里指向了第二个对象里的path）

15.

父组件给子组件传值方法，使用props

子组件要给父组件传值方法，使用$emit

用import引入子组件

在components中注入子组件

16.转载于：https://learner.blog.csdn.net/article/details/88926242

最常修改的部分就是 components 文件夹了，几乎所有需要手动编写的代码都在其中。

这里也有一句 <div id="app">，但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

这个文件最关键的一点其实是第四行， <router-view/>，是一个容器，名字叫“路由视图”，意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中。

这个 js 文件可能看着不顺眼，比如没有分号（;），因为是 ES6 的语法，不这么写反而会提示错误，虽说可以把 es-lint 改了或者关了。

最上面 import 了几个模块，其中 vue 模块在 node_modules 中，App 即 App.vue 里定义的组件，router 即 router 文件夹里定义的路由。

Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。

在这个 js 文件中，我们创建了一个 Vue 对象（实例），el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标，router 代表该对象包含 Vue Router，并使用项目中定义的路由。components 表示该对象包含的 Vue 组件，template 是用一个字符串模板作为 Vue 实例的标识使用，类似于定义一个 html 标签。

17.整个项目只有一个html文件，单页面应用

18.关于前后端结合

把两个分离的项目串起来用。在开发的时候，前端用前端的服务器，后端用后端的服务器，当开发前端内容的时候，可以把前端的请求通过前端服务器转发给后端（称为反向代理），这样就能实时观察结果，并且不需要知道后端怎么实现，而只需要知道接口提供的功能。

19.宕机

20.Object.freeze() 方法可以冻结一个对象

21.v-cloak 解决闪烁问题

    <style>
        [v-cloak]{
            display: none;
        }
    </style>

22.不要在选项property或回调上使用箭头函数，因为箭头函数并没有this,this会作为变量一直向上级词法作用域查找，直至找到为止。

23.XSS攻击

24. ..split(‘’).reverse().join(‘’)，反转字符串

25.复杂逻辑，计算属性

26. v-show简单地基于CSS进行切换

一般来说，v –if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好

27. 在JavaScript中，对象都有__proto__属性（隐式原型），指向构造该对象的构造函数的原型，而函数Function比较特殊，它除了和其他对象一样有__proto__属性，还有自己特有的属性----prototype称之为原型对象，原型对象有一个constructor属性，该属性指回该函数。

原文链接：https://blog.csdn.net/dkm123456/article/details/114939677

28. 当只用JavaScript过渡的时候，在enter和leave中必须使用done进行回调。否则，它们将被同步调用，过渡会立即完成

29. v-show标记是否显示html元素，

v-show设置的标记在html DOM中不会消失

30. lazy修饰符是让数据在失去焦点或者回车时才会更新，避免value内容没有打完就执行后续的change方法

(用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量)

31 .@change与@input的区别

@change当输入框失焦的时候触发

@input是输入框发生变化时触发，也就是说输入框一动就触发了

32.v-model.trim 将用户输入的前后的空格去掉

（自动去掉用户输入内容两端的空格）

v-model.number 将用户输入的字符串转换成number

（将用户输入的内容转换为数值类型，如果用户输入非数值的时候，则返回NaN

33.单独声明组件component,在Vue实例中局部注册components

34.组件命名也是要注意大小写的，Say-hello, say-Hello,sayHello都是不行的，

而say-hello,Sayhello却是可以的

35.slot插槽

slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件当中

36.组合slot

在子组件中通过为多个slot进行命名，来接受父组件的不同内容的数据

37. webpack工程

src:源文件文件夹

dist:打包文件夹

package.json:项目设置文件

38..cmder-nano ctrl+x保存

39. Use ESLint to lint your code

使用eslint依赖规范你的代码。为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。

如果你是在公司大型团队搭建项目的话，建议使用它选Yes。如果团队人比较少，项目比较小，或者仅仅是你自己使用的话，其实可以选择no不安装。

转载于：https://wenda.so.com/q/1514470571215317

40.export:

在创建JavaScript模块时，export语句用于从模块中导出实时绑定的函数、对象或原始值，以使其他程序可以通过import语句使用它们

41.

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

42.--save-dev

使用命令 --save-dev 则会把信息记录到 devDependencies 中；

devDependencies 中记录的是项目在开发过程中需要使用的一些文件，在项目最终运行时是不需要的；也就是说我们开发完成后，最终的项目中是不需要这些文件的；

转载于：--save 和 --save-dev 的作用和区别简单描述_cvper's world !-CSDN博客

43.bootstrap中col-md-offset、col-md-push和col-md-pull

col-md-offset-3（在左侧补充3列） col-md-push-8（从左侧往右侧推8列） col-md-pull-2（往左侧拉2列）

<div class="com-md-6 col-md-offset-3"> ,中间的位置

44.面板:

面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。

45.glyphicon glyphicon-console,字体图标

46.th

<div th:action="@{/login}" method="post">
47.<div class="input-group-addon"><span class="glyphicon,字体图标,
<input type="text" class="form-control"输入信息
48.express:
转载链接:https://www.cnblogs.com/mq0036/p/5243312.html
Express是目前最流行的基于Node.js的Web开发框架，可以快速地搭建一个完整功能的网站。

Express框架的核心是对http模块的再包装

49.vue-cli 是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板

50.router-link

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。

51.router-view,路由匹配的组件将显示在这里

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

52.@keyup(键盘事件)是按键松开，当指定的按键松开会触发的事件

53.:disabled CSS 伪类表示任何被禁用的元素

54.outline: none;,轮廓

55.获取焦点时，边框有颜色

 .login_box .myinput:focus{
        border: 1px solid #4289dc;
    }
56.cookie
Cookie是保存在客户端的纯文本文件，比如txt文件，所谓的客户端就是我们自己的本地电脑，当我们使用自己的电脑通过浏览器进行访问网页的时候，服务器就会生成一个证书并返回给我的浏览器并写入我们的本地电脑，这个证书就是cookie。
57.axios.defaults.withCredentials=true; 
转载链接:https://blog.csdn.net/xiaoyuer_2020/article/details/109000664
跨域请求要想带上cookie，必须要请求属性withCredentials=true，这是浏览器的同源策略导致的问题：不允许JS访问跨域的Cookie。
withCredentials 属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization，headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。
58.ajax:可以用来使静态网站访问后台数据库,也可以做无刷新页面表单提交
59.axios.defaults.baseURL
转载链接:https://www.cnblogs.com/1549983239yifeng/p/13780920.html
在只需要配置单个或有限明确的接口域名时可以直接设置，在生产环境和开发环境切换时需手动更改

60.Vue.use(Router)

学习链接：Vue.use(Router) · Vue学习指北 · 看云

61.Vue.config.productionTip = false;阻止启动生产消息，常用作指令。

开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。

62.-save呢，因为使用save的话，这个包就会集成到package.json中的，我们上线的时候就能通过npm install去直接安装了

63.转载链接:打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(1)：创建项目，完成登录功能 - 苏天天 - 博客园

因为是跨域请求node端，所以所有请求前面都需要添加node端的基础地址，以后打包上线的时候需要合并的时候再把这个地址删掉

由于是跨域请求，我们需要配置withCredentials为true，这样避免每次都被识别为新的请求。

在vue中，可以使用代理去实现跨域，但是每次新地址都需要配置

64.assert:

assert模块是Node的内置模块,主要用于断言

65.crypto是加密包，对传输过来的密码进行加密

66.回数据放到数组中。如果数组空，就表示没查到数据，如果非空，比较密码是否一致，如果都正确，就返回登录成功。

67.session,转载链接:node中Session的使用_追梦猪的博客-CSDN博客

session需要在同域下才能使用，跨域会出现undefined

session的工作流程：

 当浏览器访问服务器并发送第一次请求时，服务器端会创建一个session对象，生成一个类似于key,value的键值对，
 然后将key(cookie)返回到浏览器(客户)端，浏览器下次再访问时，携带key(cookie)，找到对应的session(value)。
 客户的信息都保存在session中。

68.因为当进入二级路由以后，在路由内部index和static就不在被认为是同一级，就找不到了，所以就通过 ../往上再找了一级

69.封装模态框

70.Node.js 使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

其实node.js就是一个可以在服务器端运行 javascript的环境而已 -- 运行环境

71.那么阻塞就是同步的状态表示，而非阻塞就是异步的状态表示

72.实现异步有两种方式： 1、回调函数 2、定时器

回调函数：监听到某个事件活动后，再执行别的代码，这种情况不影响后续代码执行，属于异步，

定时器：setTimeout 和 setInterval

所有的异步操纵，在js内部会优先执行同步代码，对于异步的代码会放到最后执行

73.*为什么需要模块儿化? 转载链接:node.js零基础详细教程(2)：模块化、fs文件操作模块、http创建服务模块 - 苏天天 - 博客园

我们以前的常规js代码中，我们为了重用一些js代码，是将js方法封装起来，放到js文件中，然后在HTML页面中引入js，就可以在页面中使用这些方法了。

当这种直接引入和调用的方式存在一些不友好的地方，比如，1、如果两个js中有重名的方法，就会产生覆盖。2、如果某个js需要调用另一个js里的方法，那么就对js引入的顺序有限制，就比如我们使用jQuery的时候一般在js的最前面引入。

这样就有了模块化的需求：将独立功能的js封装成一个模块，避免重名并且不必考虑引入顺序问题。

Node.js遵守CommonJS规范（这个只是一种模块儿化的代码编写规范

74.module对象是Node自带的模块儿化对象，该对象下默认有一个空对象 -- exports ，我们将需要暴露的对象直接赋值给exports就向外暴露了接口

fs：文件系统操作模块
npm作用：
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

77.express-generator说明：它是一个node的自动化创建项目工具，可以自动创建一个项目的初始网站，包含一些基本页面，可以通过浏览器访问

78.git是代码的版本管理工具,学习链接及以上内容:node.js零基础详细教程(3)：npm包管理、git github的使用 - 苏天天 - 博客园

为什么要使用版本控制：因为我们在编码过程中，会对软件进行各种修改，而且很可能需要在以后某个时候撤销到以前某个时间编写的样子，我们如果手动复制备份，不仅工程量大，而且不便于管理，这就需要有一个版本控制器，让我们可以自由的将以前写的各个时间段的版本进行保存

常见的版本控制有以下三种：

1、微软的cvs -- 收费，切只能window使用

2、svn 版本控制良好，但需要一个非本地的服务器（不能本地离线提交版本）

3、git 新一代的版本控制，可以离线实现版本控制，而且可以结合免费的 github网络仓库管理代码，十分方便

79.git的几个监听区域：工作区、暂存区、版本库

工作区：你对当前文件做的所有修改，都属于工作区使用 git status 就可以看到修改的文件。

暂存区：通过上面 git add . 添加的状态（后面的点表示对当下所有的更改添加到暂存区），添加到暂存区的文件可以撤销，也可以提交到版本库

版本库：最后的存放点，在git内部会对每个版本库存一个状态（功能类似创建了很多的备份，可以随意恢复任何一个版本，当然，git只是存了变化的地方，而非真的是备份）

git add . 表示添加当前的所有修改到暂存区，如果只提交某个文件的修改，可以给文件名如 git add a.txt

git commit -m "a" 表示将暂存区的修改提交到版本库，形成一个固定的版本保存下来， -m 后面的引号内是提交的注释说明，可以写“修改了xxxx”。

git status 显示工作区和暂存区的所有修改状态。工作区的是红色的显示，暂存区的是绿色的显示（如下图：只是一个示例说明，不跟着操作）

,,查看版本库 git log 下面的黄色打印部分，是每次修改的独一无二的id

..复制最后那个版本号运行 git reset --hart 版本id 来退回

使用命令 git checkout -- 文件名，可以将该文件的修改撤销到上一次 git add 到暂存区的状态。

!!!!!! git checkout -- . 可以撤销所有修改，建议不要使用，因为这个会把所有没有 add的修改都撤销，而且不可逆。

80.git下载别人的项目

1、文件夹中空白处右键 git bush hare

2、命令行输入 git init 初始化

3、 git pull https://github.com/sutianbinde/jQ-win7.git 如需下载别的项目使用如下格式：git pull 项目git地址

81.node.js是单线程，但是通过事件和回调支持并发，可以实现非常高的性能。

82.Node.js 使用事件驱动模型，当web server接收到请求，就把它关闭然后进行处理，然后去服务下一个web请求。

当这个请求完成，它被放回处理队列，当到达队列开头，这个结果被返回给用户。

这个模型非常高效可扩展性非常强，因为webserver一直接受请求而不等待任何读写操作。（这也被称之为非阻塞式IO或者事件驱动IO）

在事件驱动模型中，会生成一个主循环来监听事件，当检测到事件时触发回调函数。

83.回调函数：回调函数就是将一个函数作为另一个函数的参数传入，作为另一个函数内部执行的函数。

84.如果没有初始化，安装的 express就不会安装到当前目录，使用的时候就会有问题。

85.express只是一个库，而express-generator是项目生成器，

86.

var files = express.static( path.join(__dirname,"files")  );  //设置静态资源路径
app.use(files); //use这个路径设置 才可以 真正使用

87.数据库，转载链接：node.js零基础详细教程(6)：mongodb数据库操作以及导入导出 - 苏天天 - 博客园

数据库管理结构，一般分为两种：B/S架构 C/S架构。

B/S架构： Browser/Server，浏览器/服务器模式，即通过浏览器和服务器端的数据库进行交互

C/S架构： Client/Server，客户端/服务器模式，即通过客户端和服务器的数据库进行交互（我们使用的cmd命令行就可以算是一个客户端）

数据库根据数据结构分为：关系型数据库和非关系型数据库

关系型数据库就如一般很规整的表格，可以根据横向纵向去定位某条数据

而非关系型数据库是不能通过横向纵向去定位一条数据，它的结构更像是一个数组里放了很多个json数据

88.mongodb，非关系型数据库，mongodb有体积小、能方便快捷的操作，很适合中小型项目的快速开发

89.导出：mongoexport可以把一个collection导出成JSON格式或CSV格式的文件。可以通过参数指定导出的数据项，也可以根据指定的条件导出数据。

90.vue是一个简单、易用、功能强大的前端框架，在架构上先进于jQuery，但是实现的还是jQuery实现的功能（其实我们就是做个网页，用什么框架都是干这些事情，只是用法不同而已）

91.active-class属于vue-router的样式方法

  <router-link to='/' active-class="active" >你是个麻瓜</router-link>

首页的active会一直被应用，解决办法，为了解决上面的问题，还需加入一个属性exact,类似也有两种方式：

<router-link to='/' active-class="active" exact>

92.vue-router 的动态路由:query通过url传参，刷新页面时还在，params刷新页面就不在了

93.编程式的导航router.push

编程时导航传递参数有两种类型：字符串、对象

94.当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载

95.视图,数据,结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作

96.在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想

97.虚拟DOM：转载链接：呕心沥血60道Vue、Vue-Router、Vuex面试题及详解！_yaoguaia的博客-CSDN博客

因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。

而Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上

98.this.$emit('clickHeadAction',this.titleRight);

// 第一个参数是自定义事件名第二个参数就是传递的参数

99.让CSS只在当前组件中起作用

<style scoped>
    
</style>

100.<keep-alive></keep-alive>

官方： <keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染

101.v-model支持表单的各种元素。v-model就是为了方便我们获取表单中value值

102.vue-loader:

解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理

103.key:

vue中循环需加 :key=“唯一标识” ，唯一标识可以使item里面id index 等，因为vue组件高度复用增加key可以标识组件的唯一性，为了更好地区别各个组件key的作用主要是为了高效的更新虚拟DOM key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度

104.v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。

原理:

<input v-bind:value="message" v-on:input="message = $event.target.value" /> //把input输入框的value属性值和vue实例的message属性进行绑定，同时监听输入事件。

105.分别简述computed和watch的区别、使用场景-------原文链接：呕心沥血60道Vue、Vue-Router、Vuex面试题及详解！_yaoguaia的博客-CSDN博客

computed：通过属性计算而得来的属性 computed内部的函数在调用时不加()。

computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。

computed中的函数必须用return返回。

在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了。

当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。

使用场景：当一个值受多个属性影响的时候------------购物车商品结算 watch：属性监听 watch中的函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行。

watch中的函数有两个参数，前者是newVal，后者是oldVal。

watch中的函数是不需要调用的。

watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听。“obj.name”(){}------如果obj的属性太多，这种方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。

特殊情况下，watch无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用splice()或者s e t 。 t h i s . a r r . s p l i c e ( 0 , 1 , 100 ) − − − − − 修改 a r r 中第 0 项开始的 1 个数据为 100 ， t h i s . set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100，this.set。this.arr.splice(0,1,100)−−−−−修改arr中第0项开始的1个数据为100，this.set(this.arr,0,100)-----修改arr第0项值为100。

immediate:true 页面首次加载的时候做一次监听。

使用场景：当一条数据的更改影响到多条数据的时候---------搜索框区别：功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

使用场景：computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框

106.v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是否当之需要渲染很小一部分的时候

107.vue的两个核心点：

一.数据驱动在vue中，数据的改变会驱动视图的自动更新。传统的做法是需要手动改变DOM来使得视图更新，而vue只需要改变数据。二.组件组件化开发，优点很多，可以很好的降低数据之间的耦合度。将常用的代码封装成组件之后（vue组件封装方法），就能高度的复用，提高代码的可重用性。一个页面/模块可以由多个组件所组成。

108.随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低

109.Vue-cli打包命令是npm run build,打包后悔导致路径问题，应该在根目录下，新建 vue.config.js文件修改

110 Vue-router跳转和location.href有什么区别使用location.href=’/url’来跳转，简单方便，但是刷新了页面；

使用history.pushState(’/url’)，无刷新页面，静态跳转；

引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。

其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。原文链接：呕心沥血60道Vue、Vue-Router、Vuex面试题及详解！_yaoguaia的博客-CSDN博客

111.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决

112.axios的特点有哪些

从浏览器中创建XMLHttpRequests node.js创建http请求支持Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动换成json axios中的发送字段的参数是data跟params两个两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送 params一般适用于get请求 data一般适用于post put 请求 113.vue初始化页面闪动问题

vue页面在加载的时候闪烁花括号{{}}，v-cloak指令和css规则如[v-cloak]:{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕

114.全局重置{ padding: 0; margin: 0; border:}虽然能全部重置，但由于性能较低，不推荐使用。因为需要遍历整个DOM树，当页面节点较多时，会影响页面的渲染性能。

115.Normalize (号称是CSS reset的替代方案，保留了一些内置的样式，并不是清除所有)

About normalize.css – Nicolas Gallagher

https://github.com/necolas/normalize.css

116.只有IE浏览器认识条件注释、其它浏览器会跳过

117.样式内属性标记法

在CSS样式的属性名前或值后面添加特殊的字符让不同的浏览器解析。

Browserhacks在线查询，这一个功能强大的提供各种针对性兼容办法的网站，非常实用。

118.选择器前缀法

119.文档模式（X-UA-Compatible）

文档模式是IE8浏览器以后的一种独有技术，他可以通过meta指定当前文档的渲染模式，如可以把IE8降级成IE6、IE7使用。文档模式的主要作用是影响浏览器显示网页HTML的方式，用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。

原文链接：谈谈前端浏览器兼容和性能优化_chongbu1880的博客-CSDN博客

120.好的性能要依托如下几个方面：

)、服务器端

2)、网络速度，客户端与服务器之间的每个网络环节

3)、客户端软件与硬件配置

4)、前端的性能，资源的数量，大小，javascript的时间与空间复杂度等

要提高前端的性能可以从如下几个方面入手：

1)、尽量减少HTTP请求数量（图片地图,CSS Sprite,内联资源，样式表的合并，使用字体图标） 2)、压缩 3)、缓存 4)、使用内容发布网络（CDN的使用） 5)、DNS Prefetch 6)、将CSS样式表放在顶部 7)、将javascript脚本放在底部 8)、使用外部javascript和CSS 9)、避免重定向

121.HTML/CSS/JS中注释太长的话，低带宽情形下对网络传输时间的影响倒有可能是比较大的。

122.业务需求和功能不同场景下不同复杂度的需求

123.vue常用修饰符及作用：

.stop 阻止事件冒泡
.prevent 阻止事件默认行为

.native 将一个vue组件变成一个普通的html，使其可以监听click等原生事件具体使用如下

124.keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

原文链接:2年vue项目实战经验汇总_趣谈前端-CSDN博客

vue中检测变化的注意事项

受现代 JavaScript 的限制，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。还有一种情况是，vue无法检测到data属性值为数组或对象的修改，所以我们需要用原对象与要混合进去的对象的属性一起创建一个新的对象。可以使用this.$set或者对象的深拷贝，如果是数组则可以使用splice，扩展运算符等方法来更新。

125.项目框架

vue+element+vue+less,vue+iview+vue+sass

126.展示型组件，录入型组件，基础组件，布局组件，反馈型组件，业务组件

组件尽量遵循单一职责原理，用组合代替功能的杂糅

127.跨域，转载链接：你不知道的JavaScript--Item33 跨域总结与解决办法_小平果的欢乐谷-CSDN博客

注意：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

在浏览器中，<script>、<img>、<iframe>和<link>这几个标签是可以加载跨域（非同源）的资源的，并且加载的方式其实相当于一次普通的GET请求，唯一不同的是，为了安全起见，浏览器不允许这种方式下对加载到的资源的读写操作，而只能使用标签本身应当具备的能力（比如脚本执行、样式应用等等）。最常见的跨域问题是Ajax跨域访问的问题，默认情况下，跨域的URL是无法通过Ajax访问的。

方法：服务器端代理，iframe，利用script标签跨域（JSONP跨域），使用window.name来进行跨域

128.v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href

v-on 指令用于绑定HTML事件：v-on:click 缩写为 @click

129.转载链接：--save 和 --save-dev 的作用和区别简单描述_cvper's world !-CSDN博客

如果只是在开发过程中需要的工具或者文件我们使用 --save-dev 即可；

如果是项目运行必须的文件，那么就使用 --save就好了；

--save可以省掉手动修改package.json文件的步骤

简单来说：使用命令 --save 或者说不写命令 --save ,都会把信息记录到 dependencies 中；

                  dependencies 中记录的都是项目在运行时需要的文件；

                 使用命令 --save-dev 则会把信息记录到 devDependencies  中；

                 devDependencies 中记录的是项目在开发过程中需要使用的一些文件，在项目最终运行时是不需要的；

                 也就是说我们开发完成后，最终的项目中是不需要这些文件的；

130.断言模块提供了一组用于验证不变量的断言函数。 assert.notStrictEqual()函数测试实际参数和预期参数之间的严格不等式。如果条件为真，则不会产生输出，否则会引发断言错误

131.var md5 = crypto.createHash('md5'); md5加密功能

md5.update(req.body.password).digest('base64') base64加密

132.转载链接：Access-Control-Allow-Headers等基础常识 - 盗帅_tim - 博客园

跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种机制，该机制使用附加的 HTTP 头来告诉浏览器，准许运行在一个源上的Web应用访问位于另一不同源选定的资源。当一个Web应用发起一个与自身所在源（域，协议和端口）不同的HTTP请求时，它发起的即跨源HTTP请求。

133.如果服务器端开启了Access-Control-Allow-Credentials为true,假设服务器端设置了Access-Control-Allow-Origin为* 那意味这将cookie开放给了所有的网站,

134.transition-property:将鼠标悬停在一个div元素上，逐步改变表格的宽度

135.&raquo >>

136.Vue不能检测数组下标赋值、长度变化、对象属性动态添加和删除

137.instanceof是检测对象的原型链是否指向构造函数的prototype对象的

138.转载链接:https://juejin.cn/post/6844903454603739149
    Function instanceof Object;//true, 
    所有的构造器的 constructor 都指向 Function

Function 的 prototype 指向一个特殊匿名函数，而这个特殊匿名函数的 __proto__ 指向 Object.prototype

139.词法作用域关注的是函数在何处被定义，而动态作用域关注的是函数在何处被调用。JavaScript是典型的词法作用域的语言

140.闭包：*简单讲，闭包就是指有权访问另一个函数作用域中的变量的函数。

转载链接：https://segmentfault.com/a/1190000006875662

MDN 上面这么说：闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。

在javascript中，如果一个对象不再被引用，那么这个对象就会被垃圾回收机制回收；如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

闭包只能取得包含函数中任何变量的最后一个值，这是因为闭包所保存的是整个变量对象，而不是某个特殊的变量。

应用闭包的主要场合是：设计私有的方法和变量。

缺陷：

闭包的缺点就是常驻内存会增大内存使用量，并且使用不当很容易造成内存泄露。

如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗。

141.原型和原型链：javascript-lessons/2.5-Prototype at master · stone0090/javascript-lessons · GitHub

142.根据官方文档,这个package-lock.json 是在 npm install时候生成一份文件,用以记录当前状态下实际安

装的各个npm package的具体来源和版本号

dependencies": {//项目依赖 "devDependencies": {//开发依赖

143.为什么有了package.json，还需要package-lock.json文件呢，当node_modules文件夹并不存在或被删除时

，需要用到npm install重新装载全部依赖时，通过package-lock.json可以直接表明下载地址和相关依赖，相对下载速度也更快，也不容易报错。

144.for of是ES6新增的循环方法遍历数组里的每一项

145.json.parse()将字符串转成json对象

146.Headless是一款无界面浏览器，支持快速网络接受测试，采用.Net环境。

 'isMobile':true,//是否是移动设备 'hasTouch':true,//是否支持touch事件 'isLandscape':false//是否

横屏 } }

147.gitignore”文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中

148.闭包有延续变量作用域的功能

149.在node开发中使用npm init会生成一个package.json文件，

150.Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组，除了IE下的节点集合（因为ie下的dom对象是以com对象的形式实现的，js对象与com对象不能进行转换）

151.相同的参数，函数不会重复执行

152.在Vue中，组件的依赖关系在它的渲染期间被自动跟踪，因此系统准确地知道哪些组件实际上需要重新渲染。

153.Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

154.

155.

var datas=[10,20,30];

datas.unshift(40,50); // 首部添加 [40,50,10,20,30]

data.pop(); // 尾部删除 [40,50,10,20]

datas.push(60,70); // 尾部添加 [40,50,10,20,60,70]

data.shift(); // 首部删除 [50,10,20,60,70]

Shift() 删除数组的第一个元素，**返回被删除的元素，arr.shift()**

Unshift() 向数组开头添加一个或多个元素，**返回新的长度，arr.unshift(e1,e2..)**

Pop() 删除数组最后一个元素，**返回被删除的元素，arr.pop()**

Push() 向数组尾部添加一个或多个元素，**返回新的长度，arr.push(e1,e2..)**

156.转载链接:https://www.jb51.net/article/181213.htm

157.forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

Promise对象，该对象有一个then方法，允许指定回调函数。回调函数变成了链式写法
arr.slice(0)通过从索引0处的元素到最后一个元素获取切片来生成原始数组的副本。它还用于将类似数组的对象转换为数组。
js函数调用时加括号和不加括号的区别.不加括号相当于把函数代码赋给等号左边,加括号是把函数返回值赋给等号左边
数组 for in 输出的是下标, for of 输出的是元素

for in 相当于《====》 for(let i =0; i < arr.length; i++){ }

162.

//按10进制去处理字符串，碰到非数字字符，会将后面的全部无视
  ``return` `parseInt(num,``10``);

163.在JavaScript中,resize 事件是在浏览器窗口被重置时触发的,如当用户调整窗口大小,或者最大化、最小化、恢复窗口大小显示时触发 resize 事件

164.

165.关于height:100%和height:100vh的区别

vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，

但是设置height:100vh，该元素会被撑开屏幕高度一致。

166.word-spacing 属性增加或减少单词间的空白(即字间隔)。

letter-spacing* 属性增加或减少字符间的空白(字符间距)。

167.*classList.toggle*方法的作用是:在元素中切换类名

168.以下几种操作会返回 NaN：

使用函数无法将参数转换为数字时会返回 NaN，例如 parseInt("abc")、new Number("abc")；
结果不是实数的数学运算，例如 Math.sqrt(-1)；
任何操作数中包含 NaN 的表达式，例如 5 * NaN；
涉及字符串的非加法运算，且字符串无法自动转换为数字，例如 "foo" / 5。

169.在开发过程中，无论是否进行客户端验证，都需要在服务器端对于用户提交的数据进行验证，因为用户可以在浏览器中禁用 JavaScript。

170.转载链接:JS动画效果的实现（附带示例）

与 CSS 动画相比，JavaScript 动画具有以下特点：

JavaScript 动画控制能力更强，可以在动画播放过程中对动画进行控制，例如开始、暂停、回放、终止、取消等；
JavaScript 动画的效果比 CSS 动画更丰富，比如曲线运动，冲击闪烁，视差滚动等效果，只有 JavaScript 动画才能完成；
CSS 动画有兼容性问题，而 JavaScript 大多时候没有兼容性问题。

171.所谓闭包，指的就是一个函数。当两个函数彼此嵌套时，内部的函数就是闭包。

172.包的形成条件是内部函数需要通过外部函数 return 给返回出来

173.字符串减数字，字符串会转换为数字，如果字符串无法转换为数字，则会转换为 NaN；乘、除运算时，也会先将字符串转换为数字。

174.事件捕获：由微软公司提出，事件从文档根节点（Document 对象）流向目标节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标节点；事件冒泡：由网景公司提出，与事件捕获相反，事件会从目标节点流向文档根节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。整个过程就像水中的气泡一样，从水底向上运动。

175.事件委托就是把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素

在 JavaScript 中，页面内事件处理程序的个数会直接影响页面的整体性能，因为每个事件处理程序都是对象，对象会占用内存，内存中的对象越多，页面的性能则越差。此外，事件处理程序需要与 DOM 节点进行交互，访问 DOM 的次数越多，引起浏览器重绘和重排的次数也就越多，从而影响页面的性能。

重绘是指当元素样式改变时，浏览器会根据元素的新样式重新绘制元素的外观。重排是指当 DOM 树的一部分发生变化时（例如元素尺寸改变），浏览器会重新创建 DOM 树。

176.适合使用事件委托的事件有 click、mousedown、mouseup、keydown、keyup、keypress 等

177.转载链接：【万字长文】 Vue全家桶从入门到实战，超详细笔记整理 ( 一 ) （建议收藏）_林深不见鹿的博客-CSDN博客 1.{{}}(插值表达式)和v-text获取数据的区别在于 a.使用v-text取值会将标签中原有的数据覆盖使用插值表达式的形式不会覆盖标签原有的数据 b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

共同点：都可以直接根据data中数据名，将数据渲染到标签内部 v-text: v-text将获取数据直接以文本形式渲染到标签内部 innerText v-html: v-html将获取数据中含有html标签解析之后渲染到对应标签内部 innerHtml

178.v-if、v-show ：作用：都是用来控制页面中标签是否展示和隐藏使用：标签：v-if="true|false" v-show="true|false" 区别： v-show: 底层在控制页面标签是否展示时底层使用的是css 中 display 属性来标签展示和隐藏推荐使用：v-show 数据量比较大控制显示状态切换频繁 v-if : 底层在控制页面标签是否展示时底层是直接操作dom元素，通过对dom元素删除和添加来控制标签的展示和隐藏

179.计算属性：

作用：在完成某种业务时，往往页面结果需要经过多次计算才能获取，computed属性就是用来完成页面结果多次计算
好处：在完成计算同时也会将本次计算结果进行缓存，如果数据没有发生变化，在页面中多次使用，计算方法仅执行一次
使用：{{ 属性名}} 属性名即方法名称

使用methods方法完成计算业务：缺点： 1.只要调用了一次计算方法，整个计算方法就会执行一次，如果在一个页面中多次使用到计算结果，可能会导致造成重复计算，导致页面加载性能变低

180.

事件修饰符作用：用来和事件连用，用来决定事件触发条件和决定事件触发机制 .stop 停止事件冒泡 .prevent 阻止默认行为 .slef 只触发自身行为 .once 一次事件

注意：事件修饰符可以多个连用

181.并发请求`: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

182.

# 
- 1.初始化阶段
        beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
        console.log("beforeCreate: "+this.msg);
        },
        created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
        console.log("created: "+this.msg);
        },
        beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
        console.log("beforeMount: "+document.getElementById("sp").innerText);
        },
        mounted(){//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
        console.log("Mounted: "+document.getElementById("sp").innerText);
        }

- 2.运行阶段
        beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
        console.log("beforeUpdate:"+this.msg);
        console.log("beforeUpdate:"+document.getElementById("sp").innerText);
        },
        updated(){    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致
        console.log("updated:"+this.msg);
        console.log("updated:"+document.getElementById("sp").innerText);
        },

- 3.销毁阶段
        beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
        },
        destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
        }

183.字符串模板通过反引号使用字符串模板

184.怎么理解插槽？

slot相当于一个空标签，通过vue可以实现动态改变值和样式，把一块区域内容抽了出来可以实现复用，就和Java里封装的工具类一样。

插槽就是子组件中的提供给父组件使用的一个占位符。

我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。

通俗易懂的讲，slot具有“占坑”的作用，在子组件占好了位置，那父组件使用该子组件标签时，新添加的DOM元素就会自动填到这个坑里面 185. 1.router-link 用来替换使用a标签实现路由切换好处是不需要书写#号直接书写路由路径 2.router-link to属性用来书写路由路径 tag属性:用来将router-link渲染成指定的标签

186.Map和ForEach 的区别

forEach()方法不会返回执行结果，而是undefined
map()方法会得到一个新的数组并返回
同样的一组数组，map()的执行速度优于 forEach()（map() 底层做了深度优化）

性质决定了两者应用场景的不同

forEach() 适合于你并不打算改变数据的时候，而只是想用数据做一些事情（比如存入数据库）
map() 适用于你要改变数据值的时候，它更快，而且返回一个新的数组

187.findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

188.XSS 即(Cross Site Scripting)中文名称为:跨站脚本攻击

189.onload 事件会在页面或图像加载完成后立即发生

190.因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS 初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对 SEO 有一定的影响

191.利用display:table;使div成为一个块级表格元素，给其子元素设置display:table-cell;使子元素成为表格单元格，然后设置vertical-align:middle;可使多行文字垂直居中

转载链接：table-cell用法_风轻云淡-CSDN博客_table-cell

192.触发（创建）BFC 的方式（一下任意一条就可以）：

float 的值不为 none overflow 的值不为 visible display 的值为 table-cell、tabble-caption 和 inline-block 之一 position 的值不为 static 或者 releative 中的任何一个

193.浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。有时候浮动没处理好也会导致文档错乱情况。

194.外边距合并

195.CSS 预处理器 Sass 语法是$ less 语法是@ rem

196.Web 前端性能优化——如何提高页面加载速度

1、减少 HTTP 请求 2、将样式表放在头部 3、将脚本放在底部 4、使用外部的 JavaScript 和 CSS，缓存 5、关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）尽量不用后代选择器，少用子代选择器，最好不要超过三层；提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性; 6、使用预处理工具或构建工具（gulp 对 css 进行语法检查、自动补前缀、打包压缩、自动优雅降级）转载链接：整理学习：100多道前端面试题（一起加油，且行且珍惜）_阿珊和她的猫的博客-CSDN博客

197.margin 是用来隔开元素与元素的间距；padding 是用来隔开元素与内容的间隔。

198.全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数，这种组织形式就是作用域链。

199.闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

200.DOM （文档对象模型）就是针对 HTML 和 XML 提供的一个 API（接口）。我们可以通过DOM 来操作页面中各种元素，例如添加元素、删除元素、替换元素等