揣包自用的前端小册

2019-09-10 admin

图片来自wallhaven

慢慢整理、修改、丰富

HTML相关

1.HTML5的优缺点

优点:

  • 网络标准统一、HTML5本身是由W3C推荐出来的。
  • 多设备、跨平台
  • 即时更新。
  • 提高可用性和改进用户的友好体验;
  • 有几个新的标签,这将有助于开发人员定义重要的内容;
  • 可以给站点带来更多的多媒体元素(视频和音频);
  • 可以很好的替代FlashSilverlight
  • 涉及到网站的抓取和索引的时候,对于SEO很友好;
  • 被大量应用于移动应用程序和游戏。

缺点:

  • 安全:像之前Firefox4web socket和透明代理的实现存在严重的安全问题,同时web storageweb socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
  • 完善性:许多特性各浏览器的支持程度也不一样。
  • 技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socketweb storage 等新特性,后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战
  • 性能:某些平台上的引擎问题导致HTML5性能低下。
  • 浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没

2.HTML5的新特性

HTML5新增了 27 个元素,废弃了 16 个元素

新特性

  • 语义:能够让你更恰当地描述你的内容是什么
  • 连通性:能够让你和服务器之间通过创新的新技术方法进行通信
  • 离线 & 存储:能够让网页在客户端本地存储数据以及更高效地离线运行
  • 多媒体:使 videoaudio 成为了在所有 Web 中的一等公民
  • 2D/3D 绘图 & 效果:提供了一个更加分化范围的呈现选择
  • 性能 & 集成:提供了非常显著的性能优化和更有效的计算机硬件使用
  • 设备访问 Device Access:能够处理各种输入和输出设备
  • 样式设计: 让作者们来创作更加复杂的主题

3.HTML5元素

根据现有的标准规范,把 HTML5的元素按优先级定义为结构性属性级块性元素行内语义性元素交互性元素 4 大类。

结构性元素主要负责web上下文结构的定义

结构性元素 用途
section 在 web 页面应用中,该元素也可以用于区域的章节描述。
header 页面主体上的头部, header 元素往往在一对 body 元素中。
footer 页面的底部(页脚),通常会标出网站的相关信息。
nav 专门用于菜单导航、链接导航的元素,是 navigator 的缩写。
article 用于表现一篇文章的主体内容,一般为文字集中显示的区域。

块性元素主要完成web页面区域的划分,确保内容的有效分割

块级元素 用途
aside 用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure 是对多个元素进行组合并展示的元素,通常与 ficaption 联合使用。
code 表示一段代码块。
dialog 用于表达人与人之间的对话,该元素包含 dt 和 dd 这两个组合元素, dt 用于表示说话者,而 dd 用来表示说话内容。

行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础

行内语义元素 用途
meter 表示特定范围内的数值,可用于工资、数量、百分比等。
time 表示时间值。
progress 用来表示进度条,可通过对其 max 、 min 、 step 等属性进行控制,完成对进度的表示和监事。
video 视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。
audio 音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。

交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。

交互性元素 用途
details 用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与 legend 交互才会显示出来。
datagrid 用来控制客户端数据与显示,可以由动态脚本及时更新。
menu 主要用于交互菜单(曾被废弃又被重新启用的元素)。
command 用来处理命令按钮。

4.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

(1)、Doctype声明位于文档中的最前面,处于标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。

(2)严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。

(3)在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

(4)DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

5.对WEB标准以及W3C的理解与认识?

  • web标准

    • 什么是web标准:一系列标准的集合,包括结构化标准语言(html等)、表现标准语言(css)、行为标准语言(EMCAScript等)。这些标准大部分由万维网联盟起草和发布
    • 为什么使用web标准:为了解决因浏览器版本不同、软硬件设备不同导致的需多版本开发的问题
  • W3C:万维网联盟,是一个web开发的国际性联盟

标准认识

  • 标签闭合、标签小写、不乱嵌套
  • 结构行为表现分离:提高搜索机器人搜索几率、使用外链cssjs 脚本
  • 文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问
  • 容易维护、改版方便
  • 提高网站易用性。

6.src和href的区别

  • src指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,用于替换当前元素,当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕
  • href 指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于在当前文档和引用资源之间确立联系。

CSS相关

1.link和@import的区别

  • linkXHTML 标签,除了加载 CSS 外,还可以定义 RSS 等其他事务; @import 属于 CSS 范畴,只能加载 CSS
  • link 引用 CSS 时,在页面载入时同时加载; @import 需要页面网页完全载入以后加载。
  • linkXHTML 标签,无兼容问题; @import低版本的浏览器不支持。
  • link 支持使用 Javascript 控制 DOM 去改变样式;而 @import 不支持。

2.CSS盒模型

盒子模型有两种,分别是IE盒子和标准W3C盒子模型。

W3C盒子模型包括marginborderpaddingcontent,并且content部分不包含其他部分。

IE盒子模型包括marginborderpaddingcontent,和标准W3C盒子模型不同的是,IE盒子模型的content部分包含了bordepadding 标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边框的宽度 IE盒模型:width = content+padding-Left+padding-right+border-left + border-right

3.CSS选择器类型有哪些以及优先级

  • 通配符:*
  • ID选择器:#id
  • 类选择器:.class
  • 元素选择器:div p
  • 后代选择器:a img div p
  • 伪类选择器:a:hover
  • 属性选择器:input[type="text"]
  • 子元素选择器:li:firth-child
  • 相邻兄弟选择器:p + span
  • 群组选择器:h1, h2, h3,...,h6

选择器优先级顺序:!important> 内联样式 > ID选择器 > 类选择器 > 元素和伪元素 > 通配符 > 继承 > 默认

4.列出display的值并说明他们的作用

  • block:指定对象为块级元素/显示
  • inline:指定对象为行内元素
  • inline-block:指定对象为行内块级元素
  • none:取消样式
  • normal:指定对象为默认样式
  • flex:指定对象为弹性盒模型
  • table:指定对象为块元素级的表格

5.如何居中元素

水平居中

(1)行内元素水平居中

  • 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inlineinline-blockinline-tableinline-flex元素水平居中都有效。

(2)块级元素的水平居中

  • 将该块级元素左右外边距margin-leftmargin-right设置为auto
  • 使用table + margin:先将子元素设置为块级表格来显示(类似),再将其设置水平居中,display:table在表现上类似block元素,但是宽度为内容宽。
  • 使用absolute + transform:先将父元素设置为相对定位,再将子元素设置为绝对定位,向右移动子元素,移动距离为父容器的一半,最后通过向左移动子元素的一半宽度以达到水平居中.不过transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀。
  • 使用flex+justify-content
  • 使用flex+margin:通过flex将父容器设置为为Flex布局,再设置子元素居中

(3)多块级元素水平居中

  • 利用flex布局:其中justify-content 用于设置弹性盒子元素在主轴(默认横轴)方向上的对齐方式
  • 利用inline-block:将要水平排列的块状元素设为display:inline-block,然后在父级元素上设置text-align:center,达到与上面的行内元素的水平居中一样的效果。

(4)浮动元素水平居中

  • 对于定宽的浮动元素,通过子元素设置relative + 负margin
  • 对于不定宽的浮动元素,父子容器都用相对定位
  • 通用方法(不管是定宽还是不定宽):利用弹性布局(flex)的justify-content属性,实现水平居中,子元素有无定宽不影响

(5)绝对定位元素水平居中

  • 通过子元素绝对定位,外加margin: 0 auto来实现

垂直居中

(1)单行内联元素垂直居中

  • 利用行高line-height设置为height的高度

(2)多行内联元素垂直居中

  • 利用flex布局(flex):利用flex布局实现垂直居中,其中flex-direction: column`定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题
  • 利用表布局(table):利用表布局的vertical-align: middle可以实现子元素的垂直居中

(3)块级元素垂直居中

  • 使用absolute+负margin(已知高度宽度);通过绝对定位元素距离顶部50%,并设margin-top向上偏移元素高度的一半,就可以实现了
  • 使用absolute+transform:当垂直居中的元素的高度和宽度未知时,可以借助CSS3transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
  • 使用flex+align-items:通过设置flex布局中的属性align-items,使子元素垂直居中
  • 使用table-cell+vertical-align:通过将父元素转化为一个表格单元格显示(类似 <td><th>),再通过设置 vertical-align属性,使表格单元格内容垂直居中。

水平垂直居中

(1)绝对定位与负边距(已知高度宽度)

  • 需要知道被垂直居中元素的高和宽,才能计算出margin值,兼容所有浏览器

(2)绝对定位与margin:auto(已知高度宽度)

  • 这种方式无需知道被垂直居中元素的高和宽,但不能兼容低版本的IE浏览器

(3)绝对定位+CSS3(未知元素的高宽)

  • 利用Css3transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。CSS3transform固然好用,但在项目的实际运用中必须考虑兼容问题,大量的hack代码可能会导致得不偿失。

(4)flex布局

  • 利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。不能兼容低版本的IE浏览器。

(5)flex/grigmargin:0 auto

  • 容器元素设为 flex 布局或是grid布局,子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器

详见元素水平居中+垂直居中+水平垂直居中

6.优雅降级和渐进增强

优雅降级Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IEhack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强: 从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

7.CSS单位对比

单位 描述
% 百分比
px 像素
em 相对单位。相对于父元素计算,该元素的1em = 父元素px * 2
rem 相对单位。相对于根元素html,该元素的1rem = html的px * 2
rpx 微信小程序的相对单位,1rpx = 屏幕宽度/750px

8.对边距折叠的理解

外边距折叠:相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距(margin)

相邻: 没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系

垂直方向外边距合并计算:

a、参加折叠的margin都是正值:取其中 margin 较大的值为最终 margin 值。

b、参与折叠的 margin 都是负值:取的是其中绝对值较大的,然后,从 0 位置,负向位移。

c、参与折叠的 margin 中有正值,有负值:先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。

9.CSS布局中position的理解

position:static | relative | absolute | fixed | center | page | sticky

默认值:staticcenterpagesticky是CSS3中新增加的值。

(1)、static

可以认为静态的,默认元素都是静态的定位,对象遵循常规流。此时4个定位偏移属性不会被应用,也就是使用leftrightbottomtop将不会生效。

(2)、relative

相对定位,对象遵循常规流,并且参照自身在常规流中的位置通过toprightbottomleft这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

(3)、absolute

a、绝对定位,对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

b、元素定位参考的是离自身最近的定位祖先元素,要满足两个条件,第一个是自己的祖先元素,可以是父元素也可以是父元素的父元素,一直找,如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位,通俗说就是position的属性值为非static都行。

(4)、fixed

固定定位,与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

(5)、center

absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)

(6)、page

absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)

(7)、sticky

对象在常态时遵循常规流。它就像是relativefixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

10.为什么要初始化CSS样式

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

  • 最简单的初始化方法就是(不建议):{padding: 0; margin: 0;}
  • 样式初始化:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; } 

11.SVG理解

SVG可缩放矢量图形( Scalable Vector Graphics )是基于可扩展标记语言( XML ),用于描述二维矢量图形的一种图形格式。

SVG 严格遵从 XML 语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

特点

  • 任意放缩,破坏图像的清晰度、细节等。
  • 文本独立,保留可编辑和可搜寻的状态,无字体限制
  • 体积小
  • 超强显示效果,适合任何屏幕分辨率和打印分辨率。
  • 超级颜色控制
  • 交互 X 和智能化

浏览器支持

  • Internet Explorer9,火狐,谷歌 ChromeOperaSafari 都支持 SVG
  • IE8和早期版本都需要一个插件 - 如 Adobe SVG 浏览器,这是免费提供的。

JavaScript相关

1.常用DOM操作

createDocumentFragment() // 创建一个DOM片段
createElement() // 创建一个具体的元素
createTextNode() // 创建一个文本节点
appendChild()
removeChild()
replaceChild()
insertBefore() // 在已有的子节点前插入一个新的子节点

getElementsByTagName() // 通过标签名称
getElementsByName() // 通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
getElementById() // 通过元素Id,唯一性

2.iframe的优缺点

优点:

  1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
  2. Security sandbox
  3. 并行加载脚本

缺点:

  1. iframe会阻塞主页面的Onload事件
  2. 即时内容为空,加载也需要时间
  3. 没有语意

3.null和undefined的区别

null是一个表示"无"的对象,转为数值时为0

undefined是一个表示"无"的原始值,转为数值时为NaN

当声明的变量还未被初始化时,变量的默认值为undefined

null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象

undefined表示 “缺少值”,就是此处应该有一个值,但是还没有定义。典型用法是:

  1. 变量被声明了,但没有赋值时,就等于 undefined
  2. 调用函数时,应该提供的参数没有提供,该参数等于 undefined
  3. 对象没有赋值的属性,该属性的值为 `undefined
  4. 函数没有返回值时,默认返回 undefined

null表示“没有对象”,即该处不应该有值。典型用法是:

  1. 作为函数的参数,表示该函数的参数不是对象
  2. 作为对象原型链的终点

4.new操作符具体干了什么

  1. 创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型
  2. 属性和方法被加入到 this 引用的对象中
  3. 新创建的对象由 this 所引用,并且最后隐式的返回 this
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj); 

5.对JSON 的了解

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

6.js延迟加载的方式有哪些

  1. deferasync
  2. 动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack
  3. 按需异步载入js

7…call() 和 .apply() 的作用

动态改变某个类的某个方法的运行环境

8.javascript对象的几种创建方式

  1. 工厂模式
  2. 构造函数模式
  3. 原型模式
  4. 混合构造函数和原型模式
  5. 动态原型模式
  6. 寄生构造函数模式
  7. 稳妥构造函数模式

9.javascript继承的 6 种方法

  1. 原型链继承
  2. 借用构造函数继承
  3. 组合继承(原型+借用构造)
  4. 原型式继承
  5. 寄生式继承
  6. 寄生组合式继承

10.ajax 的过程是怎样的

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  3. 设置响应HTTP请求状态变化的函数
  4. 发送HTTP请求
  5. 获取异步调用返回的数据
  6. 使用JavaScriptDOM实现局部刷新

Vue相关

vue

1.MVVM(Model-View-ViewModel)模型

MVVM分为ModelViewViewModel三部分。

  • Model代表数据模型,定义数据和业务逻辑,访问数据层
  • View代表视图,展示页面结构、布局和外观(UI)
  • ViewModel代表视图模型,负责监听Model数据变化并更新视图,处理用户交互

ModelView是通过ViewModelModel的数据变化会触发View的更新,View的交互操作也会使Model的数据发生改变。只需要针对数据进行维护操作,数据的自动同部不需要通过操作dom实现。

2.Vue指令

内置指令 指令的本质就是语法糖或者标志位。

指令 作用 期望数值类型
v-text 更新元素文本内容 string
v-html 更新元素的innerHTML,不推荐使用 string
v-show 条件渲染。根据表达式的真假值,控制元素的显示或隐藏 any
v-if 条件渲染。根据表达式的值的真假条件选择是否渲染元素这个节点 any
v-else 条件渲染。根据v-if的相反条件进行元素渲染 any
v-else-if 条件渲染。做v-if的链式调用 any
v-for 列表渲染。对数据进行遍历渲染,最好提供key Array / Object / number / string
v-on 事件处理。绑定事件监听器,事件类型由参数指定,表达式可以是方法名或内联语句。 Function / Inline Statement / Object
v-bind 动态绑定。动态绑定一个或多个特性,或一个组件prop到表达式 any (with argument) / Object (without argument)
v-model 表单绑定。在表单或组件是上创建双向绑定 随表单控件类型变化
v-pre 跳过该元素和它的子元素的编译过程,直接输出模板字符串
v-slot 作用域插槽
v-cloak 设置 [v-cloak] { display: none }可以在渲染时延后加载Vue实例,避免闪现
v-once 元素和组件只渲染一次,重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过

自定义指令 不是刚需,和生命周期有很大关系,可见五个生命周期钩子。

  • bind
  • inserted
  • update
  • componentUpdated
  • unbind

3.Vue响应式原理

Vue实例化时,遍历访问data里的所有属性,使用 Object.defineProperty 将其属性全部转换为getter/setter进行依赖追踪以便修改属性时进行变更通知,就是一个代理层,不管是获取数据还是什么,都是在代理层里进行,当组件渲染时,会从代理层进行代理映射,组件渲染需要什么就会放在watcher中,因为每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新,没有与之关联的组件就不会更新。

4.Vue双向数据绑定和单项数据流

(1)什么是双向数据绑定

model的更新会触发view的更新,view的更新也会触发model的更新

(2)什么是单向数据流

model的更新会触发view的更新,但是view的更新不会触发model的更新

(3)双向绑定 or 单向数据流

  • Vue是单向数据流,不是双向绑定
  • Vue的双向绑定不过是语法糖
  • Object.defineProperty是用来做响应式更新的,和双向绑定没关系

(4)简单实现一个响应式双向数据绑定

简单实现,有一个子组件输入框,一个按钮,父组件通过props传值给子组件,当按钮增加时,子组件通过$emit通知父组件修改相应的props值。

<div id="app">
        <parent></parent>
    </div>
    <script>
        var childNode = {
            template:`
                <div class = "child">
                    <div>
                        <span>子组件数据</span>
                        <input v-model="childMsg">
                        <button @click=add>+1</button>
                    </div>
                </div>
            `,
            data(){
                return{
                    childMsg:0
                }
            },
            methods: {
                add(){
                    this.childMsg++;
                    this.$emit('update:foo',this.childMsg)
                }
            }
        };
        var parentNode = {
            template:`
                <div class="parent">
                    <div>
                        <span>父组件数据:{{msg}}</span>
                        <child :foo.sync="msg"></child>
                    </div>
                </div>
            `,
            components:{
                'child':childNode
            },
            data(){
                return{
                    'msg':0
                }
            }
        };
        let vm = new Vue({
            el:'#app',
            components:{
                'parent':parentNode
            }
        })

5.合理应用计算属性和侦听器

(1)计算属性(computed)的应用

  • 处理数据计算,减少模板中计算逻辑
  • 数据缓存。当计算的数据比较多的时候,放在计算属性中,不会在每次渲染界面的重新计算,提高页面性能
  • 它必须依赖固定的数据类型(响应式数据),而不是全局数据

(2)侦听器watch

  • 更加灵活、通用,可以触发一系列的操作
  • watch提供一个底层API,可以执行任何逻辑,如函数节流、Ajax异步获取数据,操作DOM,但是不推荐

(3)计算属性和侦听器的应用场景

  • 计算属性computed能做的,侦听器watch都能做,反之不行
  • 能用计算属性computed的尽量不用侦听器watch

6.Vue的生命周期钩子

生命周期一共分为三个阶段,创建阶段(执行一次)、更新阶段(执行多次)、销毁阶段

返回顶部

(1)生命周期的应用场景

钩子 调用 类型 是否在服务端渲染期间调用
beforeCreate Vue实例初始化之后,数据观察和事件配置之前 Function Yes
create 实例创建完成(数据观察/属性和方法运算/侦听器配置/事件回调)之后,挂载之前 Function Yes
beforeMount 挂载开始之前,模板render函数首次调用 Function Yes
mounted 实例挂载完成之后,异步请求/操作DOM/定时器 Function No
beforeUpdate DOMpatch之前调用进行数据修改,可以移除已添加的事件监听器等,不可更改依赖数据 Function No
updated 组件 DOM 更新完成,避免在此期间更改状态(依赖数据) Function No
actived keep-alive 组件激活时 Function No
deactived keep-alive 组件停用时 Function No
beforeDestroy 实例销毁之前,可以移除已添加的事件监听器等 Function No
destroyed 实例销毁 Function No
errorCaptured 当任何一个来自后代组件的错误时被捕获时

收到三个参数:错误对象、发生错误的组件实例,和一个包含错误在何处被捕获信息的字符串 返回 false,以阻止该错误继续向上冒泡 | Function | No |

(2)函数式挂件

一般用于做展示用。

  • functional:true

  • 无状态、无实例、没有this上下文、无生命周期

    7.Vue组件

Vue组件 = Vue实例 = new Vue(options),每个组件就是一个Vue实例 组件可以是页面中每一个区域板块,也可以是某一个复用业务逻辑,也可以是每一个单页面。

(1)组件的构成

就以上面的双向数据绑定实现为例:

  • 属性:

    • 自定义属性props:组件props中声明的属性,父组件使用props定义数据属性,向子组件传递数据
    • 原生属性attrs:没有声明的属性,默认自动挂载到组件根元素上,设置inheritAttrsfalse可以关闭自动挂载
    • 特殊属性classstyle:挂载在组件根元素上,支持字符串、对象、数组等多种语法
  • 事件event

    • 普通事件:@click@input@change@xxx等事件,通过this.$emit('xxx',...)触发自定义事件event向父组件发送消息
    • 修饰符事件:@input.trim@click.stop@submit.prevent等,一般用于原生HTML元素,自定义组件需要自行开发支持
  • 插槽slot

    • 普通插槽:slot进行组件内容分发,插入子组件内容,简单点就是传递内容的 <template slot="xxx">...</template><template v-slot="xxx">...</template>
    • 作用域插槽:需要根据子组件的某些值来做动态处理,可以简单理解为返回组件的函数 <template slot="xxx" slot-scope="props">...</template><template v-slot:xxx="props">...</template>

(2)组件通信

  • 父子组件通信:父组件使用props向子组件通信,子组件使用$emit向父组件传递消息
  • 非父子组件通信:父组件可以使用v-on监听子组件的任何事件,子组件使用$emit传入事件,这样父组件就会收到事件并更新
  • 跨级组件通信:使用Vuex比较好管理

1)如何优雅地获取跨层级组件实例(拒绝递归)

<p ref="p">hello</p>
<child-component ref="child></child-component>

callback ref

  • 主动通知(setXxxRef)
  • 主动获取(getXxxRef)

(3)组件更新

组件的更新都是由数据驱动的,没有特殊情况,任何更改DOM的行为都是在作死。

1)数据来源(单向)

包含三个部分:

  • 来自父组件的属性props
  • 来自组件自身的状态data
  • 来自状态管理器,如vuex vue.observable

注意:状态和属性的改变未必会触发组件更新

8.高级特性provide/inject

一般用于底层组件通信。底层组件通信,不仅属性要层层传递,事件也要层次冒泡,这是很耗性能的。

9.Vue-router路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为

下面是一个简单路由的实现:

<div id="app" class="demo">
      <h1>Hello App!</h1>
      <p>
          <!-- 通过router-link导航 -->
          <!-- 通过传入'to '属性指定链接-->
          <!--  <router-link> 默认会被渲染成一个 `<a>` 标签-->
              <router-link to="/foo">go to Foo</router-link>
              <router-link to="/bar">go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
   </div>
   <!-- 
       0\. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
       1\. 定义 (路由) 组件。
       2.定义路由
    -->
   <script>
       //1\. 定义 (路由) 组件。
       const Foo = {template:'<div>foo</div>'};
       const Bar = {template:'<div>bar</div>'};
       //2.定义路由
       //每个路由应该映射一个组件。其中component可以是通过Vue.extend()创建的组件构造器
       //或者只是一个组件配置对象
       const routes = [
           {path:'/foo',component:Foo},
           {path:'/bar',component:Bar}
       ]

       //3.创建router实例,然后传‘routes’配置
       const router = new VueRouter({
           routes//(缩写)相当于routes:routes
       })

       //4.创建和挂载根实例
       //要记得通过router配置参数注入路由,从而让整个应用都有路由功能

       const app = new Vue({
           router
       }).$mount('#app');

浏览器相关

1.常用浏览器内核以及理解

浏览器 Chrome Firefox Safari IE Opera
渲染引擎 Blink Gecko Webkit Trident Blink
JS引擎 V8 SpiderMonkey Nitro Chakra V8
前缀 -webkit -moz -webkit -ms -o

浏览器内核主要分为两部分:渲染引擎 和 JS 引擎:

  • 渲染引擎:负责取得网页的内容(HTMLXML 、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
  • JS引擎:解析和执行 javascript 来实现网页的动态效果。

2.cookies、sessionStorage 和 localStorage 的区别?

sessionStoragelocalStorageHTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStoragelocalStoragecookie 都是在浏览器端存储的数据

区别 存储时间 单个域名存储量 所有域名存储量 个数限制 是否发送到服务器
Cookie 浏览器关闭之前有效 4k 4k yes yes
LocalStorage 永久存储 5MB 无限制
SessionStorage 只在 Session 内有效 存储量更大(推荐没有限制,但是实际上各浏览器也不同)

更多详见浏览器数据存储

3.表单提交中Get和Post方式的区别

Get Post
从服务器上获取数据 向服务器传送数据
提交过程在url中可见 传送过程用户不可见
服务器端用 Request.QueryString 获取变量的值 服务器端用 Request.Form 获取提交的数据
传送的数据量较小,不能大于 2KB 传送的数据量较大,一般被默认为不受限制。但理论上, IIS4 中最大量为 80KBIIS5 中为 100KB
安全性低 安全性较高

4.浏览器标准模式和怪异模式之间的区别是什么

严格模式又称标准模式,有doctype声明,则是标准模式,浏览器按W3C标准解析执行代码。

反之没有就是怪异模式,混杂模式又称怪异模式,浏览器使用自己的方式解析执行代码。

5.常见浏览器兼容性问题与解决方案

(1)常用浏览器兼容

1)前缀兼容

Chrome Firefox Safari IE Opera
渲染引擎 Blink Gecko Webkit Trident
JS引擎 V8 SpiderMonkey Nitro Chakra
前缀 -webkit -moz -webkit -ms

2)透明属性opacity

透明属性opacity,解决IE9以下浏览器不能使用opacity问题:

opacity:0.5;
filter:alpha(opacity = 50);//IE6-IE9习惯使用filter属性来 进行实习
filter:progrid:DXImageTransform.Microsoft.Alpha(style = 0,opacity = 50);//IE4-IE9都支持

3)浏览器 hack

1.判断IE浏览器

 <!--[if IE ]> ie8 <![endif]-->

2.判断Safari浏览器

 let isSafari = /a/.__proto__=='//';

3.判断Chrome浏览器

 let isChrome = Boolean(window.chrome);

(2)样式兼容性(css)

1) 使用Normalize.css

不同浏览器样式存在差异,可以使用这个去除差异

2)使用通配符选择器,全局重置样式

不加样式控制,不同浏览器外补丁和内补丁不同,用以下方法:

* {
 margin:0;
 padding:0;
}

3) display:inline转为行内属性

块属性标签设置浮动float后,又有横行的margin情况下,在IE6显示margin比设置的大。

解决方案:在float的标签样式控制中加入 display:inline,将其转化为行内属性

4) 图片间距设置font-size:0

图片默认有间距,设置font-size

(3)交互兼容性(JavaScript)

(1)封装适配器进行事件兼容,过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为处理

 var  helper = {}

//绑定事件
helper.on = function(target, type, handler) {
    if(target.addEventListener) {
        target.addEventListener(type, handler, false);
    } else {
        target.attachEvent("on" + type,
            function(event) {
                return handler.call(target, event);
            }, false);
    }
};

//取消事件监听
helper.remove = function(target, type, handler) {
    if(target.removeEventListener) {
        target.removeEventListener(type, handler);
    } else {
        target.detachEvent("on" + type,
        function(event) {
            return handler.call(target, event);
        }, true);
    }
};

(2)使用new Date(str)来正确生成日期对象->’2018/07/05’。 (3)获取scrollTop通过document.documentElement.scrollTop兼容非Chrome浏览器

 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

详见浏览器兼容性问题与处理

6.如何实现浏览器内多个标签页之间的通信

调用 localstorge、cookies 等本地存储方式

7.如何对网站的文件和资源进行优化(性能优化)

1.尽可能减少http请求次数,将css, js, 图片各自合并

2.使用CDN,降低通信距离

3.添加Expire/Cache-Control

4.启用Gzip压缩文件

5.将css放在页面最上面

6.将script放在页面最下面

7.避免在css中使用表达式

8.将css, js都放在外部文件中

9.减少DNS查询

10.最小化css, js,减小文件体积

11.避免重定向

12.移除重复脚本

13.配置实体标签ETag

14.使用AJAX缓存,让网站内容分批加载,局部更新

8.如何解决跨域问题

  1. jsonpjsonp 的原理是动态插入 script 标签)
  2. document.domain + iframe
  3. window.namewindow.postMessage
  4. 服务器上设置代理页面

9.documen.write和 innerHTML 的区别

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

10.哪些操作会造成内存泄漏

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

  1. setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
  2. 闭包
  3. 控制台日志
  4. 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

11.如何判断当前脚本运行在浏览器还是node环境中

通过判断 Global 对象是否为window,如果不为window,当前脚本没有运行在浏览器中。即在node中的全局变量是global ,浏览器的全局变量是window。 可以通过该全局变量是否定义来判断宿主环境

12.Node的优点和缺点

优点:

  1. 因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
  2. Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。

缺点:

  1. Node是一个相对新的开源项目,所以不太稳定,它总是一直在变。
  2. 缺少足够多的第三方库支持。

HTTP相关

1.http状态码有那些?分别代表是什么意思?

1xx: 信息性状态码,表示服务器接收到请求正在处理。

2xx: 成功状态码,表示服务器正确处理完请求。

3xx: 重定向状态码,表示请求的资源位置发生改变,需要重新请求。301永久重定向,302临时重定向。

4xx: 客户端错误状态码,服务器无法处理该请求。 404 not found

5xx: 服务器错误状态码,服务器处理请求出错。

2.一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么

分为4个步骤:

  1. 当发送一个 URL 请求时,不管这个 URLWeb 页面的 URL 还是 Web 页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
  2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
  3. 一旦 TCP/IP 连接建立,浏览器会通过该连接向远程服务器发送 HTTPGET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200HTTP 响应状态表示一个正确的响应。
  4. 此时,Web 服务器提供资源服务,客户端开始下载资源。

请求返回后,便进入了我们关注的前端模块

简单来说,浏览器会解析 HTML 生成 DOM Tree,其次会根据 CSS 生成 CSS Rule Tree,而 javascript 又可以根据 DOM API 操作 DOM

[转载]原文链接:https://segmentfault.com/a/1190000020343356

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74766.html

文章标题:揣包自用的前端小册

相关文章
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
《JavaScript快速查询手册》PDF
下载地址:《JavaScript快速查询手册》PDF下载 http://pan.baidu.com/s/130rP8’ 简介: JavaScript快速查询手册 目录 前言 第一部分 命令查询 第二部分 JavaScript语句与运算符 第...
2015-11-16
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
html5 参考手册chm
下载地址:html5参考手册chm 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
何为闭包?有关JS闭包的一些理解
简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就...
2015-11-11
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
回到顶部