笔记练习题

Date.now()返回一个时间戳，是number类型

 var one;

var two=null;

console.log(one==two,one===two);     true  false

一个页面不可以存在多个title元素

 浮动元素重叠
1、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上
2、块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上

  getElementsByName() 该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

css 如何使用服务端的字体：@font-face

    typeof undefined // 'undefined'
    typeof '10' // 'String'
    typeof 10 // 'Number'
    typeof false // 'Boolean'
    typeof Symbol() // 'Symbol'
    typeof Function // ‘function'
    typeof null // ‘Object’
    typeof [] // 'Object'
    typeof {} // 'Object'

如果在catalog.htm中包含如下代码，则该HTML文档IE浏览器中打开后，用户单击此链接<A HREF="#novel">小说</a>将(     )

使页面跳转到catalog.htm包含名为“novel”的锚记处

某下对this对象的理解哪些是正确的  ()
正确答案: B D   

this总是指向函数的直接调用者（而非间接调用者）；    可以apply call bind

如果有new关键字，this指向new出来的那个对象；

在事件中，this总是指向触发这个事件的对象；

this是函数运行时自动生成的一个内部对象，只能在函数内部使用；

/b+/g    //匹配前面的子表达式一次或多次，有一个或多个b
 
/b*/g    //匹配前面的子表达式零次或多次,结果不止数组中那么多
 
/b{1,4}/g   //匹配1-4个b
 
/b{1,5}/g    //匹配1-5个b

正则表达式
JavaScript RegExp 对象有 3 个方法：test()、exec() 和 compile()。
(1) test() 方法用来检测一个字符串是否匹配某个正则表达式，如果匹配成功，返回 true ，否则返回 false；
(2) exec() 方法用来检索字符串中与正则表达式匹配的值。exec() 方法返回一个数组，其中存放匹配的结果。如果未找到匹配的值，则返回 null；
（3）compile() 方法可以在脚本执行过程中编译正则表达式，也可以改变已有表达式。

div、p是块状元素

span是内联元素

img是内联块状元素

下面说法正确的有( )
正确答案: A B D  

P元素不能包含div

li元素的祖先元素可能是li，但父元素不可能是li

Dom Tree的根节点是body元素

a元素可以包含img

var person={fname:"John",lname:"Doe",age:25};
var txt="";
for (x in person)
{
  txt=txt + person[x];
}
alert(txt);

正确答案: A   你的答案: B (错误)

JohnDoe25

fname:"John",lname:"Doe",age:25

fname:John,lname:Doe,age:25

fnamelnameage

for in 中 x代表key值，所以取出的值为value

字符串+number 还是字符串

visibility保留物理空间，即使设置了visibility:hidden但页面结构没有改变   display：none  直接从页面中消失 并且不会占用页面的物理位置   overflow：hidden  溢出隐藏

H5新增属性
新增header，footer，nav，article，section，aside，datalist，audio，video，embed，input属性

以下是Video/Audio中会触发的事件的有？

方法：load() play() pause()
事件：play() playing() pause() seeked() seeking() abort()当音频/视频的加载已放弃时触发

typeof的实现就是通过判断低三位的数字来判断值类型的。当传入一个null的时候，因为null存储时32位的数字表示都是0，所以低三位也是0，typeof就将其认定为object类型的了。

在浏览器输入URL回车之后发生了什么？

    URL 解析

    DNS 查询

    TCP 连接

    处理请求

    接受响应

    渲染页面

addEventListener  添加多个事件
阻止事件冒泡
event.stopPropagation()
阻止默认事件
// event.preventDefault();

1.src是对资源的引用 它指向的内容会嵌入到当前标签所在的位置  JS 脚本优先下载
href超文本的引用  它指向一些网络资源，建立和当前元素或者文档的链接关系  并行下载

2.语义化是指根据内容结构化，选择适合的标签。
3meta由name和content 定义，用来描述网页文档的属性

行内元素有：a b span img input select strong
块级元素有 div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p

label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。

        渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
        优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

h5新特性：1、新语义元素（新增标签和属性），有利于代码可读性和SEO；2、sessionStorage、localStorage和indexedDB加强本地存储；3、离线web应用；4、表单新增功能；5、CSS3；6、地理定位。

闭包有3大特性：

    函数嵌套函数
    函数内部可以引用函数外部的参数和变量
    参数和变量不会被垃圾回收机制回收

闭包优点：

    可读取函数内部的变量
    局部变量可以保存在内存中，实现数据共享
    执行过程所有变量都匿名在函数内部

闭包缺点：

    使函数内部变量存在内存中，内存消耗大
    滥用闭包可能会导致内存泄漏
    闭包可以在父函数外部改变父函数内部的值，慎操作

事件循环

    在JavaScript中，我们把任务分为同步任务和异步任务。
    同步和异步任务分别进入不同的执行”场所”，
同步的进入主线程，异步的进入事件表并注册函数

    当指定的事情完成时，事件表会将这个函数移入事件队列

    主线程内的任务执行完毕为空，会去事件队列读取对应的函数，进入主线程执行。

    上述过程会不断重复，也就是常说的(事件循环)

异步任务里面到底是如何分类呢？其实异步任务是包含宏任务和微任务，他们会加在同一个队列里面，只是执行顺序不一样而已。
宏任务：整体代码script、setTimeout、setInterval、setImmediate

微任务：原生Promise中then方法、process.nextTick、MutationObserver

1、防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间

举例：就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。

节流(thorttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

举例：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。

2、区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

BFC/IFC
BFC（Block Formatting Context）叫做“块级格式化上下文"
（1）内部的盒子会在垂直方向，一个个地放置；
（2）盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
（3）每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
（4）BFC的区域不会与float重叠；
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
（6）计算BFC的高度时，浮动元素也参与计算。
触发条件
（1）float的属性不为none；
（2）position为absolute或fixed；
（3）display为inline-block，table-cell，table-caption，flex；
（4）overflow不为visible
IFC（inline Formatting Context）叫做“行级格式化上下”
（1）内部的盒子会在水平方向，一个个地放置；
（2）IFC的高度，由里面最高盒子的高度决定；
（3）当一行不够放置的时候会自动切换到下一行；

计算属性computed :
1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：
1. 不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

输入一个URL 实现过程
重定向
查看缓存
DNS解析
TCP链接
发送报文数据
响应报文数据
浏览器解析数据
渲染页面

MVVM
model 代表数据模型   数据逻辑与方法都是model中定义
view  代表视图UI  用来数据的展示
viewmodel    监听数据变化以及控制视图更新   处理用户的交互操作

. data为什么是一个函数而不是对象
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。
而在Vue中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。
所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。

对keep-alive的理解，它是如何实现的，具体缓存的是什么？

如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。

浅拷贝是一个传址,也就是把a的值赋给b的时候同时也把a的址赋给了b，当b（a）的值改变的时候，a（b）的值同时也会改变
深拷贝是指，拷贝对象的具体内容，二内存地址是自主分配的，拷贝结束之后俩个对象虽然存的值是一样的，但是内存地址不一样，俩个对象页互相不影响，互不干涉

箭头函数和普通函数有什么区别
1：写法不一样

2：普通函数存在变量提升的现象

3：箭头函数不能作为构造函数使用

4：两者this的指向不同

5：箭头函数的arguments指向它的父级函数所在作用域的arguments

6：箭头函数没有new.target

    普通函数的this指向的是谁调用该函数就指向谁

    箭头函数的this指向的是在你书写代码时候的上下文环境对象的this，如果没有上下文环境对象，那么就指向最外层对象window。

        Entry：入口，webpack构建的起始
        Module：模块，webpack里面一切皆模块，也是代表着文件，从Entry配置的入口文件开始，递归找出依赖的模块
        Chunk：代码块，找出递归依赖模块经转换后组合成代码块
        Loader：模块转换器，也就是将模块的内容按照需求装换成新内容
        Plugin：扩展插件，webpack构建过程中，会在特定的时机广播对应的事件，而插件可以监听这些事件的发生

•1、webpack可以根据模板生成HTML,并自动处理上面的css/js引用路径
•2、webpack可以自动处理<img>里面的图片路径,css里面背景图的路径,字体引用
•3、webpack可以开启本地服务器,一边改写代码,一边自动更新页面内容
•4、webpack可以编译jsx es6 sass less coffescript等,并添加md5、sourcemap等辅助
•5、webpack可以异步加载内容,不需要时不加载到DOM
webpack可以配合vue.js和react.js等框架开发。

生命周期
创建前：实例初始化后  data observer和事件配置被调用
创建后 data已经初始化  计算属性   event/watch事件回调  但是DOM树没有挂载
挂载前 ：渲染函数首次被调用生成虚拟DOM
挂载后：dom树已经完成渲染页面  可以进行dom操作
更新前：数据有更新被调用
更新后：虚拟dom重新渲染补丁以最小的dom开支来重新渲染dom
销毁前：实例销毁前调用  这里还可以访问实例的数据
销毁后：所有实例方法被销毁

     this   函数调用  方法调用  构造函数调用   改变this指向 apply call  bind

Vuex有五个核心概念：

state, getters, mutations, actions, modules。

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
pp
回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

  5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

hash模式：即地址栏 URL 中的 # 符号
history模式：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
history模式怕啥
 通过history api，我们丢掉了丑陋的#，但是它也有个毛病：
 不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。
 在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。